页面中使用CSS的三种方法：
CSS被设计用来与HTML联合建立网页，它不能独立运行，需要依附到页面上才能发挥作用。通常在网页中CSS规定了3种定义样式的方法：
直接将样式控制放置在单个HTML元素内，称为内联式。
在网页的head部分定义样式，称为嵌入式。
以扩展名.css的文件保存样式定义，称为外部链接式，被链接的文件称为CSS文件。
内联样式直接将CSS放在某个HTML标签中，通过使用style属性设置，一般形式为：
style="属性名1: 值1; 属性名2: 值2;……"
属性名与属性值之间用“:”分隔，如果一个样式中有多个属性，各属性之间用分号“;”隔开。
嵌入式样式
在网页的head部分直接实现CSS样式, 即在<head>与</head>标签内，以<style>开始，</style>结束。
CSS规则由两部分组成：选择符和声明。声明由属性名和属性值组成。所以简单的CSS规则如下：
选择符{属性名1: 值1; 属性名2: 值2; ……}
例如： p { color : Green; }
p（段落标签）为选择符，color（颜色）是p的属性名，green（绿色）是color的属性值。该规则声明所有段落标签的内容应该将color属性设置为绿色，即所有<p>中文本将变成绿色。
CSS中主要的4个要素
选择符：表明CSS规则应用到页面的哪个部分。选择符最简单的类型是元素选择符，它指出明确的标签元素，例如HTML中的<p>标签。
声明：声明包含在{}大括号内。大括号内应首先给出属性名，接着是冒号，然后是属性值。结尾分号是可选项，推荐使用结尾分号，以便于规则的扩展。
属性：属性按官方CSS规范定义。用户可以定义特有的样式效果，与CSS兼容的浏览器可能会支持这些效果，如果不支持的浏览器会忽略这些属性。
值：声明的值放置在属性名和冒号之后。它确切定义应该如何设置属性。每个属性值的范围也在CSS规范中定义。
链接式样式
在页面中使用CSS最常用的方法是链接式样式。这样可以在网页中调用已经定义好的样式表文件（css文件）。
与嵌入式相比，链接式可以将定义好的样式在网站的多个页面上重复使用，提高了开发效率，降低了维护成本，同时也实现了将页面结构和表现彻底分离，最适合大型网站的外观设计。
样式规则
无论是定义内嵌式样式还是链接式样式，每个样式的定义格式相同：
选择符 {属性名1: 值1; 属性名2: 值2; ……}
其中，选择符是指样式定义的对象，可以是HTML标记元素、用户自定义的类、用户自定义的id、伪类、具有层次关系的样式规则及并列的样式选择符等。
1．元素选择符
任何HTML元素都可以是一个CSS的元素选择符，例如，div{color : red}，该样式规则中的元素选择符是div，div块内的所有文字颜色为红色。
2．类选择符
类选择符用于定义页面上的相关HTML元素组，使它们具有合适的相同样式规则。创建类时，用户需要给它命名，命名时最好使用字母和数字。
定义了类之后，用户可以使用它作为CSS的选择符。类选择符以“.”为起始标记，一般格式为：
.类选择符 {属性名1: 值1; 属性名2: 值2; ……}
例如：
.c1 { color : Red; }
.c2 { font-size : large; }
上面定义了两个类，类“c1”定义了颜色属性，类“c2”定义了字体大小属性。
在HTML文档中可以按下列方式引用：
<div>
<h1 class="c1">通知</h1>
<p class="c2">将与今天下午2点召开各部门会议。</p>
</div>
标签<h1>中的文本颜色为红色，标签<p>中的字体大小为“large”。因为它们各自的class属性值为类“c1”和类“c2”。
3．id选择符
只有在页面上的标签才能具有给定的id，它必须是唯一的，并只用于指示该元素。
下面的例子中标签<a>定义了一个id属性，值是“next”。
<a href="next.htm" id="next">下一步</a>
在CSS中，id选择符由id值前面的“#”（井号）符号指示，例如：
#next { font-size : large; }
在实际应用中，用户应如何选取类选择或id选择符设置样式呢？
类选择符更灵活，id选择符能完成的它都能完成，甚至比id选择符能完成的还要多。如果想重用样式，用户也可以使用类选择符来完成。但是用id选择符就完成不了，因为id值在页面文档中必须是唯一的，即只有一个元素具有该值。
注意：如果在一个元素的样式定义中，既引用了元素选择符，又引用了类选择符和id选择符，则id选择符的优先级最高，其次是类选择符，元素选择符的优先级最低。
4．伪类
伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。
在CSS中用4个伪类来定义链接样式，分别是a:link、a:visited、a:hover和a:active，
例如：
a:link {color: #FF0000} /* 未被访问的链接 红色 */
a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
以上语句分别定义了链接、已访问过的链接、鼠标停在上方时、点击鼠标时的样式。注意，必须按以上顺序书写，否则不能按预期效果显示。
5．包含选择符
包含选择符用于定义具有层次关系的样式规则，它由多个样式选择符组成，选择符之间用空格隔开。一般格式为：
选择符1 选择符2 …… {属性名1: 值1; 属性名2: 值2; ……}
例如，div h1{ color : red }，这种方式只对div中包含的h1起作用，对单独的div或h1均无效。
如果有多个不同的样式选择符的样式相同，则可以使用并列选择符简化定义，每个样式选择符之间用逗号隔开。一般格式为：
选择符1, 选择符2, ……{属性名1: 值1; 属性名2: 值2; ……}
例如：.classone, #bb, h1{color : red}
398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
