css基础---->学习html(一)
这里零散的总结一下观看css权威指南书的知识。生命中的诸多告别,比不辞而别更让人难过的,是说一句再见,就再也没见过。
一、首字母与首行的伪类
<dvi>
<p>I love you.<br>Hello World</p>
<p>I love you.</p>
</dvi>
css的代码如下:
p:first-letter {
color: red;
}
p:first-line {
color: blue;
}
运行的效果如下:
二、选择器的特殊性
选择器的特殊性由选择器本身的组件确定,表述为4个部分,如:,,,。
、对于选择器中给定各个ID属性值,加0,,,。
、对于选择器中给定的各个类属性值、属性选择或伪类,加0,,,。
、对于选择器中给定的各个元素和伪元素,加0,,,。
、结合符和通配选择器对特殊性没有任何贡献。
这个可以参考博客:http://www.cnblogs.com/xyzhanjiang/p/3653128.html
三、伪类after和before的使用
这个具体参考博客: http://www.cnblogs.com/laden666666/p/6089880.html
对于颜色中的#F00,如果只有三位的话。浏览器会取每一位,并将其复制成两位。如#F01等价于#FF0011。
四、css中长度单位
- 绝对长度单位:in、cm、mm、pt、pc
- 相对长度单位:em、ex、px。
在css中,1em定义为一种给定字体的font-size值。如果一个元素的font-size为14px,那么对于该元素,1em就等于14px。
<h1 style="font-size: 24px;">Hello World H1</h1>
<h2 style="font-size: 16px;">World Hello H2</h2>
<p style="font-size: 8px;">Hello World P</p>
添加css的样式如下:
h1, h2, p {
margin-left: 1em;
}
运行的效果如下:h1,h2,p的左边距分别为24px,16px,8px。
一般来说,px不用来设置字体,设置图像的大小和边框或定位用px比较合适。
五、div中的文字居中
html的代码如下
<div class="radius">Hello World</div>
css的代码如下:line-height和height设置成一样。
.radius {
background-color: orange;
border-radius: 5px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
}
运行的效果如下:使用border-radius,即使是方形的图片也可以显示为圆角的效果。
六、根据子元素条件设置父元素css是不可行的
比如,现在有这样的需求:我想让p标签下面的图片居中显示,这样比较好看。我的第一反应是否根据img标签是p标签的子元素而设置p标签的css样式:text-align='center'。目前好像这种方式css好像还不支持。如果可行的话,感觉也会很多问题。浏览器顺序渲染的话,读取到img的时候,还要重新追溯前面的是否p标签。这样页面又要重新渲染一次,很影响效率。直接给p标签定义class就行了。
<p class="img_center">
<img src="http://images2017.cnblogs.com/blog/****.png" alt="">
<img src="http://images2017.cnblogs.com/blog/****.png" alt="">
</p>
友情链接
css基础---->学习html(一)的更多相关文章
- HTML&CSS基础学习笔记—创建列表
创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...
- CSS基础学习笔记
一. CSS介绍 1. CSS概述:CSS(Cascading Style Sheets)指层叠样式表,极大提高了工作效率. 2. 基础语法: 属性大于1个之后,属性之间用分号隔开 如果大于1个单词, ...
- css基础学习
css(Cascading style sheets):层叠样式表 1.图片替换技术 以下代码表示:点击百度logo的图片就会跳转到百度首页. <style > .baidu{ /*宽高定 ...
- HTML&CSS基础学习笔记1.33-元素选择器
元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器: p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这 ...
- HTML&CSS基础学习笔记1.32-选择器是什么
选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法. 选择器主要分为:元素标签选择器.通用选择器.类选择器.ID选择器.属性选择器.组合选择器.伪类选择器.伪元素选择器. 先做个了解, ...
- HTML&CSS基础学习笔记1.31-像素和相对长度
像素和相对长度 之前的笔记中,我们提到过用属性width.height来设置图片的尺寸,它们的单元都是”px(像素)”.长度单位总结一下,目前比较常用到px(像素).em.% 百分比,要注意其实这三种 ...
- HTML&CSS基础学习笔记1.30-颜色的表达
颜色的表述 在网页中的颜色设置是非常重要,CSS的属性有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 ...
- HTML&CSS基础学习笔记1.29-灵活地使用样式
灵活的使用样式 使用样式的感觉很棒吧! 刚我们使用的内联样式是给具体的标签加上样式,如果有多个标签的时候,我们用内联样式给标签加样式的时候就需要一个个的加过来,这样就很麻烦. 而如果我们使用内部样式表 ...
- HTML&CSS基础学习笔记1.28-给网页添加一个css样式
CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签 ...
- less.css基础学习,陆续更新中
//基础//概念:动态样式语言,有很多语言的特性:变量,函数,运算等 //变量:通过一个简单的@+字母,数字下划线等,但不能以数字开头,不能关键字,保留字等//注意less.css是全局变量,除在函数 ...
随机推荐
- kubernetes 数据持久化
pod本身是无状态,所以很多有状态的应用,就需要将数据进行持久化. 1:将数据挂在到宿主机.但是pod重启之后有可能到另外一个节点,这样数据虽然不会丢但是还是有可能会找不到 apiVersion: v ...
- 课后作业——用lastIndexOf判断是否是字符串的最后一位
package test; public class Testlianxi { public static void main(String[] args) { //判断fgh是否是字符串的最后一位 ...
- linux网口驱动实现(待续)
驱动位于linux/driver/net下. 1. 寄存器读写 asm/io.h #define __raw_writeb(v,a) (__chk_io_ptr(a), *(volatile un ...
- DataTable使用技巧:DataRowState
DataGridView:获取 DataRow 对象的状态,共有5个枚举值. Added 该行已添加到 DataRowCollection 中,AcceptChanges 尚未调用. Deleted ...
- MVC教程一:MVC简介
一.概述 1.MVC是一种流行的Web应用架构技术,他把Web应用划分成Model(模型).Controller(控制器)和View(视图)三部分. 2.优点:可测试.可维护 3.MVC是ASP.NE ...
- Session和几种状态保持方案理解
一.术语session 在我的经验里,session这个词被滥用的程度大概仅次于transaction,更加有趣的是transaction与session在某些语境下的含义是相同的. session, ...
- English Sentenses【no use】
1.Sorry if I might sound arrogant or offensive. 2.Any further question? 3.How dare you! 4.Try it if ...
- (转)x264 编码流程
转自:http://alphamailpost.blog.163.com/blog/static/20111808120128111160728/ http://www.usr.cc/thread-5 ...
- Why provision Bare Metal
Here are a few use-cases for bare metal (physical server) provisioning in cloud; there are doubtless ...
- Shell 启动java程序
#!/bin/sh SHELL_PATH=$(cd ")";pwd) echo $SHELL_PATH cd "$SHELL_PATH" CLASSPATH=. ...