1.样式表的层叠与选择器的特殊性。
在样式表中,同一元素可能有两个或者更多的规则。CSS通过一个成为“层叠”的过程处理这种冲突。层叠采用如下重要度次序:
- 标有!important的用户样式。
- 标有!important的作者样式。
- 作者样式。
- 用户样式。
- 浏览器/用户代理应用的样式。
选择器的特殊性分为四个等级:a b c d
- 如果样式是行内样式,那么a=1
- b等于ID选择器的总数
- c等于类,伪类和属性选择器的数量
- d等于类型选择器和伪元素选择器的数量
选择器 特殊性 以10为基数的特殊性
style="" 1,0,0,0 1000
#wrapper #content{} 0,2,0,0 200
#content .dateposted{} 0,1,1,0 110
div#content{} 0,1,0,1 101
#content{} 0,1,0,0 100
p.comment .dateposted 0,0,2,1 21
p.comment 0,0,1,1 11
div p{} 0,0,0,2 2
p{} 0,0,0,1 1
#content #subcontent1 h2{
color:red;
}
#content #subcontent1>h2{
color:green;
}
body #content div[id="subcontent1"] h2{
color:orange;
}
#subcontent1 div.subcontent2 h2{
color:yellow;
}
subcontent1 div.subcontent2 h2.first{
color:blue;
}
html文件:
<div id="content">
<div id="subcontent1">
<h2>Test</h2>
<div class="subcontent2">
<h2>Hello!</h2>
</div>
</div>
</div>
结果:
Test
Hello!
Test
Hello!
#content #subcontent1>h2{
color:green;
}
#content #subcontent1 h2{
color:red;
}
则结果为:
Test
Hello!
<div id="content1">
<div id="content2"></div>
<div id="content3"></div>
</div>
css文件:
#content1{
height:100px;
width:100px;
margin:20px;
background:red;
}
#content2{
margin:20px;
height:20px;
width:20px;
background:green;
}
#content3{
margin:20px;
height:20px;
width:20px;
background:blue;
}
结果:
![](https://img-my.csdn.net/uploads/201207/28/1343444204_1315.png)
每个content都添加“padding:1px”后:
![](https://img-my.csdn.net/uploads/201207/28/1343444334_5763.png)
![](https://img-my.csdn.net/uploads/201207/28/1343444530_2480.png)
![](https://img-my.csdn.net/uploads/201207/28/1343444554_3404.jpg)
3.浮动与清除。
float:将元素从常规文档流中移出,直至该元素碰到其他元素的边框为止。如果浮动元素后面还有文档流的文本,那么文本将会围绕着浮动元素存在。
clear:对元素进行清理实际上是为前面的浮动元素留出了垂直空间。具体表现为将该元素的margin-top重设(CSS1、CSS2)或者是增大清楚空间而margin-top不变(CSS2.1)。
浮动的特点:如果没有足够的水平空间,浮动元素将下移动,如果浮动元素高度不同,那么当它们向下移动时可能会被其他浮动元素“卡住”:
如图:
关于浮动与清除的一些方法:
HTML文件:
<div id="maincontent">
<div id="content1"></div>
<div id="content2"></div>
</div>
CSS文件:
#content1{
margin:20px;
height:60px;
width:60px;
float:left;
background:red;
}
#content2{
margin:20px;
width:50px;
height:50px;
float:left;
background:green;
}
#maincontent{
border:1px gray solid;
width:200px;
}
结果如下:
如何让maincontent包围住content1和content2呢?
有如下一些方法:
(a)让maincontent浮动——float:left;
(b)添加空白块
html中添加<br id="clear">:
<div id="content2"></div>
<br style="clear:both"/>
(c)maincontent中添加overflow:hidden。(值为hidden或者auto的overflow属性会自动清理包含的任何浮动元素。)
(d)after伪元素的应用:
CSS中添加如下样式:
#maincontent:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear{
zoom:1; /*IE triggers hasLayout,高版本IE不需要了*/
}
最终结果如下:
其他方法略去,推荐c、d的方法。
4.关于布局:
布局可分为固定宽度、流式、弹性布局。各布局主要是单位的不同。一般使用px和em、%作为单位。
ps:弹性布局中,最好以%指定内部宽度(被包含框),而以em指定容器宽度(包含框),这样修改布局时,不需要所有宽度都修改。
两栏布局很简单,在此不赘述。
如下:
HTML文件:
<div class="content">
<div class="secondary">Secondary</div>
<div class="primary">Primary</div>
</div>
CSS文件:
.content .primary{
width:450px;
height:200px;
border:1px solid red;
float:right;
margin:30px 10px;
display:inline;
text-align:center;
}
.content .secondary{
width:100px;
height:200px;
border:1px solid green;
float:left;
margin:30px 10px;
display:inline;
text-align:center;
}
.content{
width:600px;
height:300px;
border:1px dashed gray;
float:left;
}
三栏布局:在primary中将之分为2部分。如下:
三栏布局还可以用负外边距解决最右边框(即pri_secondary框)的问题。此不赘述。
5.其他想说的几点:
a.更多的应用html5和css3。
b.圆角框(1.几张图像的覆盖 2.border-radius 3.border-image)、投影(1.负外边距 2.相对定位--left:-5px;等 3.box-shadow)、不透明度(rgba)及美化连接(突出显示不同的连接类型)。
参考书籍:CSS Mastery