CSS札记一
日期：2014-05-17 浏览次数：20590 次
一、??? CSS语法
CSS的语法结构为： selector {property:value}
selector（选择符）：表示这个样式将应用与HTML中的哪些对象。应用的对象可以是一个标签，也可以是指定了id或者class属性的特定标签。
property（属性）：对于每个HTML标签，CSS都提供了许多样式属性，用于控制标签的颜色、大小、定位等。
value（值）：属性值。
二、??? CSS选择符
对于选择符，CSS提供了多种支持。
1．??? 类型选择符
body {margin:0px}
使用了HTML中已经定义的标签名的选择符称做为类型选择符，就叫类型选择符。如上面的body{…}，使用div、table等也都是类型选择符，类型选择符将用于控制整个HTML文档中所有对应的标签对象。
2．??? id选择符
#header{color:red;width:100px}
如上所示，id选择符使用“#”标识，后跟标签的id属性值。在HTML文档中，每个标签的id属性值必须是惟一的，所以通过id选择符就可以对标签进行精确定位，将CSS样式应用于指定的某个标签对象上。如有一个id为header的div标签：
<div id=”header”>This is header</div>
那么上面的#header选择符将使这个div的宽度为100px，且div中的字体颜色为红色。
3．??? class选择符
.p1{color:red}
id选择符用于惟一定位一个标签对象，那么class选择符则用于定位一组标签对象。Class选择符以“.”标识。在HTML文档中，每个标签都可以指定一个class属性，多个标签的class属性之间可以相同，拥有相同class属性的标签将被应用相同的CSS样式。如
<p class=”p1”></p>
<div class=”p1”></div>
上面的p和div标签中的字体都将会是红色。
4．??? 类型指定式选择符
div#header {color:red}
div.redfont {color:red}
如果即想要对每种标签采用样式，又要使用id或class选择符，那么可以象上面那样使用样式使用如下形式，分别标识对id为header的div和class为redfont的div标签施用样式。
5．??? 群组选择符
div, span, p {font-size:12px}
如果多个标签之间的样式需要使用相同的样式，可以象上面那样使用群组选择符，多个选择符之间用“,”隔开就可以了，这样可以减少代码量，而且可以改善CSS代码结构。象上面那样把相同的属性写在一起，然后对于各异的属性可以再单独定义。
6．??? 包含选择器
div span{margin:0px; color:red}
如果只想对某个对象中的子对象使用样式，那么就可以象上面那样使用包含选择器。象上面的例子，只有在div下span中的字体的才会是红色的：
<div><p><span>red</span></p></div><span>black</span>
7．??? 组合选择符
对于上面所说的选择符，可以任意组合，如：
h1 .p1{}
表示h1下所有class属性为p1的标签（注意哦，h1和.p1之间有无空格差别很大的哦，没有空格可是表示class为p1的ht标签哦）。
#header .p1{}
表示id为header下的所有class属性为p1的标签。
8．??? 通配选择符
*{font-size:12px}
使用“*”，表示将样式应用于所有标签对象上。
9．??? 伪类和伪对象
伪类和伪对象是CSS的一种特殊扩展，由CSS自动支持，名称不能由用户自定义，使用时只能按标准格式进行使用。如：
a:hover {color:red}
上面的例子中hover就是一个伪类。目前比较常用伪类是用于控制a标签的几个伪类：
:link-------------->表示a链接未被访问时的样式
:hover-------------->表示鼠标移动到标签的样式
:active-------------->表示点击和点击释放之间的样式
:visited-------------->表示a链接被访问后的样式
三、??? CSS布局
传统的表格布局是通过控制表格中的单元格的位置来达到界面排版的效果的，而CSS布局则是通过采用合适的对象+CSS控制来时实现界面的排版布局，后者的优势在于界面中只需要在合适的容器对象（如div）中放入内容，容器对象只是用于标识一个区域，而具体如何展示则完全由CSS来进行控制，从而达到内容与表现的分离。下面将以DIV+CSS来介绍几种经典布局。
1.??? 一列固定宽度
在HTML中添加如下代码：
<div id="layout">一列固定宽度</div>
由于为div指定了id属性，所以我们可以用id选择符为这个div设置样式：
??? #layout{
??? ??? background-color:#cccccc;
??? ??? border:1px solid #333333;
??? ??? width:300px;
??? ??? height:200px;
}
上面的CSS为div设置了#cccccc的背景色，并添加了1px solid #333333的边框，最后将div设置成了宽300px、高200px。
?
2.??? 一列自适应宽度
在上面的基础上，我们只要对width属性进行修改，就可以将div修改成宽度根据浏览器窗口自动调整大小的效果：
#layout{
??? ??? background-color:#cccccc;
??? ??? border:1px solid #333333;
??? ??? width:80%;
??? ??? height:200px;
}
这样，div的宽度将是浏览器窗口宽度的80%。
3.??? 一列固定宽度居中
网上有很多网站是采用页面整体居中的布局方式，对于FireFox，我们可以在一列固定宽度的基础上稍作修改就可以达到这种效果：
#layout{
??? ??? background-color:#cccccc;
??? ??? border:1px solid #333333;
??? ??? width:300px;
??? ??? height:200px;
??? ??? margin:0px auto;
}
margin用于设置标签对象与相邻的其它标签对象之间的外边距，如果margin属性被指定了两个值，则第一个值用于控制标签对象的上下外边距，而第二个值则用于控制标签对象的左右外边距。除了能为边距指定数值外，还可以为其指定auto值，表示由浏览器自动设置边距，浏览器会将左右边距设置为相等，从而达到居中的效果。
?
??? 但在IE浏览器不支持margin属性的auto值，为其了达到同样的效果，我们可以将body的text-align属性设置为center来达到这个效果，但这样的话，div中的内容也同时被居中了，这时我们可以使用css hack来规避：
??? <body>
??? ??? <div id="layout">一列固定宽度</div>
??? </body>
???
??? body{*text-align:center;}
??? #layout{
??? ??? background-color:#cccccc;
??? ??? border:1px solid #333333;
??? ??? width:300px;
??? ??? height:200px;
??? ??? margi
