CSS 概述
- css 指层叠样式表 - 样式定义如何显示HTML 元素 - 样式通常存储在样式表中 - 把样式添加到HTML4.0中，是为了解决内容与表现分离的问题 - 外部样式表可以极大的提高工作效率 - 外部样式表通常存储在CSS文件中 - 多个样式定义可层叠为一层叠次序
当同一个HTML 元素被不止一个样式定义时，会使用哪一个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中，数字4拥有最高的优先权。
1.浏览器缺省设置
2.外部样式表
3.内部样式表(位于head标签内部)
4.内联样式(在HTML元素内部)
因此，内联样式拥有最高优先权。
CSS 语法
CSS 规则由两个主要部分组成：选择器，以及一条或多条的声明。
selector{declartion1;declartion2;...declartionN}
选择器通常是你需要改变样式的HTML 元素 每条声明由一个属性和一个值组成。 属性是你希望设置的样式属性，每个属性有一个值，属性和值用冒号分开。
selector:{property:value}
下面这行代码的作用是将h1元素内的文字颜色定义为红色，同时将字体大小设置为14像素。
在这个例子中，h1是选择器，color和font-size是属性，red和14px是值。
h1{color:red;font:14px;}
值的不同写法和单位
除了英文单词red,我们还可以使用十六进制的颜色值#ff0000:
p{color:ff0000;}
为了节约字节，我们可以使用CSS的缩写形式：
p{color:#f00;}
我们还可以通过两种方法使用RGB值：
p{color:rgb(255,0,0);}
p{color:rgb(100%,0%,0%);}
请注意，当使用RGB百分比时，即使当值为0时也要用百分比符号，但是在其他的情况下就不需要那样做了，比如当尺寸为0像素时，0之后不需要使用px单位，因为0就是0，无论单位是什么。
如果值为若干个单词，则要给值加引号。
p{font-family:"sans serif";}
比较好的写法是这样：
p {
text-align: center;
color: black;
font-family: arial;
}
是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
CSS 高级语法
选择器的分组
你可以对选择器进行分组，这样，被分组的选择器可以共享相同的声明。在下面例子中，我们对所有标题元素进行了分组，所有的标题元素都是原谅绿
h1,h2,h3,h4,h5{
color:green;
}
继承及其问题
根据CSS，子元素从父元素继承属性，但是它并不是按照此方法工作。看看下面这条规则。
body {
font-family: Verdana,sans-serif;
}
根据下面上面这条规则，站点的body元素将使用Verdana字体。 通过CSS 继承，子元素将继承最高级元素(在本例中是body)所拥有的属性(这些子元素诸如p,td,ul,ol,li,dl,dt和dd)。不需要另外的规则，所有body的子元素都应该显示Verdana字体，子元素的子元素也一样。 但netscape 4不支持继承，而且还忽略body元素的规则，IE/Windows直到IE6还存在相关的问题，在表格内的字体样式会被忽略，因此我们可以用下面这种方法:
body {
font-family:Verdana,sans-serif;
}
p,td,ul,ol,li,dl,dt,dd{
font-family:Verdana,sans-serif;
}
如何改变子元素的继承
body{
font-family:Verdana,sans-serif;
}
td,ul,ol,li,dl,dt,dd{
font-family:Verdana,sans-serif;
}
p{
font-family:Times,"Times New Roman",serif;
}
CSS 派生选择器
派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁 在CSS1中，通过这种方式来应用规则的选择器被称为上下文选择器，这是由于它们依赖于上下文关系来应用或避免某项规则。 派生选择器允许你根据上下文关系来确定某个标签的样式，通过合理的使用派生选择器，我们可以使用HTML代码变得更加整洁，比如说下面这个例子，请注意标记为"strong"的蓝色代码的上下文关系：
li strong {
font-style: italic;
font-weight: normal;
}
我是粗体字，不是斜体字，因为我不在列表中，所以这个规则对我不起作用
- 我是斜体字，因为strong元素位于li元素内
效果
li strong { font-style: italic; font-weight: normal; }我是粗体字，不是斜体字，因为我不在列表中，所以这个规则对我不起作用
- 我是斜体字，因为strong元素位于li元素内
CSS id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。 id选择器以"#"来定义。 例如：
#red {color:red;}
#green {color:green;}
这个段落是红色的
这个段落是绿色的
效果
#red {color:red;} #green {color:green;}这个段落是红色的
这个段落是绿色的
注意：id属性只能在每个HTML文档中出现一次。
id选择器和派生选择器在现代布局中，id选择器常常用于建立派生选择器。
#sidebar p{
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
一个选择器，多个用法
#sidebar p{
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2{
font-size: lem;
font-weight: normal;
}