——摘自《CSS入门经典（第3版）》 Lan Pouncey、Richard York著
【CSS简介】
·各种浏览器
|
渲染引擎 |
浏览器 |
CSS的支持 |
|
Webkit |
Apple Safari |
支持CSS2.1，也支持CSS3的许多功能。 |
|
Google Chrome |
支持CSS2.1，也支持CSS3的许多功能。 |
|
|
Trident |
IE9 |
支持CSS2.1和CSS3。 |
|
IE8 |
支持CSS2.1，对CSS3支持较少。 |
|
|
IE7 |
支持CSS2.1，不支持CSS3。 |
|
|
IE6 |
支持CSS2.1的部分功能，不支持CSS3。 |
|
|
Gecko |
Mozilla Firefox |
支持CSS2.1，支持CSS3的许多功能。 |
|
Presto |
Opera |
支持CSS2.1，支持CSS3的许多功能。 |
【样式表组成】
·样式表的元素：样式表由规则组成；规则由选择器和声明组成；声明由属性和值组成。
·值：可以是关键字、长度、颜色、字符串、整数、实数或URI
·字符串：CSS中字符串的一种用法就是指定名称中包含空格的字体。
font-family:‘Times New Roman’,Times,serif; //带有空格的字体名称要使用引号括起来。
·颜色简写：#FFFFFF，包含3对FF，简写为#FFF。#FAB等效于#FFAABB。
·RGB颜色：rgb(128,128,128)或者用百分比表示，rgb(50%,50%,50%)
·URI（统一资源标识符）：包含样式表；包含背景图像。
.jupiter{
Background-image:url(jupiter.jpg);
}
·在文档中包含CSS的4种方式：
①使用内嵌样式表，使用<style>和</style>标签，必须放在<head>标签内。
<style type=”text/css”>
Body{
Font:12px sans-serif;
}
</style>
②放在单独的文档中，通过<link>链接到HTML文档中，因为<link>元素不只是引用CSS文件，还可以链接到当前站点的RSS源等，所以包含rel=”stylesheet”很重要。
<link rel=”stylesheet” type=”text/css” href=”exam1-1.css”>
③使用@import规则，从内嵌的或链接的样式表中导入CSS。
<style type=”text/css”> @import url(exam1-1.css); </style>
④包含在style属性中的内联样式直接应用于HTML。
<body style=”font:12px sans-serif;”>
建议使用①②。
【选择器】
·类选择器：以一个点开头，加类名。
如果想给<div>和<img>元素提供相同的类名，但让一条样式表规则只应用于<div>元素，而不应用于<div>元素，可以限定一个类选择器到一种元素的方法：当附加一个类型选择器到一个类选择器上时，就限定了样式表规则只作用于相应类型的元素。
div.planet {
margin:10px 0;
...
}//！元素名称和类选择器之间不能有空格。有空格是后代选择器。
元素可以被分配多个类名，例如<div class=”planet jupiter”>，这个class属性的值包括两个类名，空格隔开，div元素将接受两条规则中的声明。
.planet{
Margin:10px 0;
...
｝
.jupiter{
Background-image:url(jupiter,jpg);
｝
类名也可以串联在一起：
.planet.jupiter{
Background-image:url(jupiter.jpg);
}//只应用于在其class属性中同时包含了这两个类名的元素。
//！IE6根据CSS1规范来解释串联的类名，串联的类名中只有最后一个类名才会被识别。
·ID选择器：以#开头
<style type=”text/css”>
#jupiter{
background-image:url(jupiter.jpg);
}
</style>
<div class=”planet” id=”jupiter”>
<h2>Jupiter</h2>
</div>
·通用选择器：只有一个星号。
单独使用时，该CSS规则应用于文档中的所有元素。不常用，有更好的方法想整个文档应用样式。
*{
font-family:Arial,Helvetica,sans-serif;
}
·后代选择器
div.planet h2{
font-size:18px;
margin-top:0;
}//只有当<h2>元素是类名为planet的<div>元素的后代时，才会选取该<h2>元素。
后代选择器不限于只使用两个元素，必须用一个空格隔开。
div.planet table td{
padding:0 10px 0 0;
text-align:left;
}
·伪类选择器：用来表示动态事件、状态改变等情况。伪类属性的前面只能有一个冒号。
：link 表示未访问的超链接。 例 a:link{color:meduimblue;}
：visited 表示已访问的超链接。
：hover 表示鼠标悬停在该元素上。
：focus 表示获得键盘焦点。
：active 表示用户正在单击该元素。
动态伪类出现在样式表中的顺序是很重要的，如果:link伪类定义在:focus伪类之后，那么:link伪类将被优先采用，:link伪类的声明将重写:focus伪类的声明。
在样式表中出现的顺序遵循的口诀是LoVe HAte，即:link、:visited、:hover和:active。 :hover和:focus一般同时包含，使它们接收相同的样式。
a:focus,
a:hover{
text-decoration:underline;
}//以逗号分组选择器
【层叠和继承】
· ！important规则
!important语法出现在声明中，位于属性值之后、结束声明的分号之前。
body{
background:#000 !important;
}
包含！important规则的声明优先于其他任何声明，甚至是style属性。如果有多条！important规则，后一条规则优先。强烈建议不要使用！important规则。