样式表(CSS：Cascading Style Sheets)学习[上]
日期：2013-06-24 浏览次数：21463 次
一．款式表基础
1． 款式表中每一个条目由选择符（selector）和对应的规则组成，选择符通常是HTML元素名称，也可以是类（class）、标识符（id）、伪类（pseudo class，它们标示了超链接的不同形状）等。
2． 将款式表（规则）添加到HTML文档中有3种方式：
① 外部款式表。
② 使用于整个文档的款式，位于<head>区，包括嵌入款式表和输入款式表。
③ 行内款式，通过绝大多数元素的style属性实现。
3． 款式表内的注释用/* …*/。通过将款式规则包围在HTML注释<!-- -->之间可以让那些不支持款式表技术的老浏览器也能正常任务而不是直接把款式规则显示在屏幕上。普通而言，浏览器会忽略不认识的元素和属性，但包围在元素之间的内容会显示出来。
4． 每一条规则必须以分号；结束。
5． 如果多个元素共享相反的款式规则，可以使用逗号将它们分组定义。这里分组的概念与分类（class）或标识符（id）的概念不同，前者设置的规则对整个文档中所有的该元素都起作用，而后者只对该元素的一个子集（class或id相反的）起作用。当成组规则和其他规则都涉及到同一个元素时，它们将被组合起来，以生成某个元素的完整的款式。
举例：成组规则的使用。
h1,h2,h3 {background : yellow; color : black;}
h1 {font-size : 200%;}
h2 {font-size : 150%;}
h3 {font-size : 125%;}
二．外部款式表
外部款式表通过在<head>区内使用<link>元从来援用，<link>元素有三大属性：
① rel：指明了链接关系，这里是stylesheet。
② href：指明了外部款式表的URL。
③ type：指明了款式表的类型，这里是text/css。（其他还有jss）
举例：外部款式表的援用方式。
<head>
<title>Style Sheet Linking Example</title>
<link rel = "stylesheet" href = "\css\css1.css" type = "text/css">
</head>
三．使用于整个文档的款式表
3．1 嵌入款式表
嵌入款式表的使用方式是直接写在head区的style元素内，从而构成使用与整个文档的款式表。这种情况下只需求用到style元素的type属性。
举例：嵌入款式表的使用。
<head>
<style type = “text/css”>
<!--
body {
font: 10pt;
font-family: Serif;
color: black;
background-color: white;
}
-->
</style>
</head>
3．2 输入款式表
输入款式表也是援用一个外部款式表，但不是通过link元素而是在style区内通过@import语法来援用：@import url（css的url地址）；可以在<style>元素内援用一些输入款式表，同时又指定一些只使用于本文档的款式。但是（Netscape）浏览器对输入款式表的支持还不普遍，所以建议使用<link>来援用外部款式表。
举例：输入款式表和嵌入款式表的联合使用。
<head>
<style type = “type/css”>
<!--
@import url(corerules.css);
@import url(linkrules.css);
/* a rule specific to this document */
h1{
font : 24pt;
font-family : Sans-Serif;
color : black;
text-align : center;
}
-->
</style>
</head>
四．行内款式
绝大多数元素都有style属性。行内款式信息并不需求从不支持款式表的浏览器中隐藏，由于浏览器会忽略它们不理解的任何属性。
举例：行内款式的使用。
<h1 style = “font-size: 48pt; font-family: Arial; color: green;”>CSS1 Inline</h1>
五．款式规则的辖域
以上讨论了款式表的存放位置，如今讨论款式表的作用范围，两者既有联系又有区别：行内款式规则自然决定了它的影响范围是当前元素，而其他款式规则可以灵活地设置规则的作用范围。
5．1 简单规则
最简单的规则不妨称它们为文档规则和行内规则。前者可以使用到整个文档中出现的所有的某元素（如所有的<p>元素），后者只使用到当前元素。
5．2 id规则
使用id属性的元素除了可以作为超链接的目标外（类似name属性，在载入页面时将显示定位在页面的指定位置），还可以用它来和款式表中的某个款式规则绑定（比name属性强的地方）。无论是作为超链接的href还是款式规则的选择符，援用id的格式为：＃id值。在一个HTML文档中，id属性值必须全局独一。
举例：id属性与超链接或款式表的结合使用。
如有<p id = “SecondParagraph”>…</p>，则可以如下援用：
<a href = “# SecondParagraph”>Go to SecondParagraph</a> 或者
<head>
<style type = “text/css”>
<!--
＃SecondParagraph {background-color : green;}
-->
</style>
</head>
5．3 class规则
和id属性一样，class属性也是HTML核心属性之一，多数元素都有该属性。class属性定义了一个元素所属类的名称。class取值不要求独一，同一类元素的多个实例、多个不同类的元素都可能属于同一个类。使用类可以明显地减少文档中必需的款式规则的数量。款式规则中有两种援用class的格式：
① 为所有该类的元素设置款式：.类名{款式规则;}
② 为属于该类的所有X元素设置款式：X.类名{款式规则;}
举例：class规则的使用。
<style type = “text/css”>
<!--
.main-item {font-s
