样式表（CSS：Cascading Style Sheets）简要教程[上]
2005-08-10 16:54
363 查看
首先提供两个手册的下载 CSS2&JavaScript.rar
一．样式表基础
1． 样式表中每一个条目由选择符（selector）和对应的规则组成，选择符通常是HTML元素名称，也可以是类（class）、标识符（id）、伪类（pseudo class，它们标示了超链接的不同状态）等。
2． 将样式表（规则）添加到HTML文档中有3种方式：
① 外部样式表。
② 应用于整个文档的样式，位于<head>区，包括嵌入样式表和输入样式表。
③ 行内样式，通过绝大多数元素的style属性实现。
3． 样式表内的注释用/* …*/。通过将样式规则包围在HTML注释<!-- -->之间可以让那些不支持样式表技术的老浏览器也能正常工作而不是直接把样式规则显示在屏幕上。一般而言，浏览器会忽略不认识的元素和属性，但包围在元素之间的内容会显示出来。
4． 每一条规则必须以分号；结束。
5． 如果多个元素共享相同的样式规则，可以使用逗号将它们分组定义。这里分组的概念与分类（class）或标识符（id）的概念不同，前者设置的规则对整个文档中所有的该元素都起作用，而后者只对该元素的一个子集（class或id相同的）起作用。当成组规则和其他规则都涉及到同一个元素时，它们将被组合起来，以生成某个元素的完整的样式。
举例[/b]：成组规则的应用。
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）
[/b]
举例[/b]：外部样式表的引用方式。
<head>
<title>Style Sheet Linking Example</title>
<link rel = "stylesheet" href = "\css\css1.css" type = "text/css">
[/b]
<[/b]/head>
三．应用于整个文档的样式表
3．1 嵌入样式表
[/b]
[/b]嵌入样式表的使用方式是直接写在head区的style元素内，从而形成应用与整个文档的样式表。这种情况下只需要用到style元素的type属性。
[/b]
举例[/b]：嵌入样式表的使用。
<head>
<style type = “text/css”>
<!--
body {
font: 10pt;
font-family: Serif;
color: black;
background-color: white;
}
-->
</style>
</head>
3．2 输入样式表
[/b]
[/b]输入样式表也是引用一个外部样式表，但不是通过link元素而是在style区内通过@import语法来引用：@import url（css的url地址）；可以在<style>元素内引用一些输入样式表，同时又指定一些只应用于本文档的样式。但是（Netscape）浏览器对输入样式表的支持还不普遍，所以建议使用<link>来引用外部样式表。
举例：[/b]输入样式表和嵌入样式表的联合使用。
<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>
四．行内样式
[/b]绝大多数元素都有style属性。行内样式信息并不需要从不支持样式表的浏览器中隐藏，因为浏览器会忽略它们不理解的任何属性。
[/b]
举例[/b]：行内样式的使用。
<h1 style = “font-size: 48pt; font-family: Arial; color: green;”>CSS1 Inline</h1>
五．样式规则的辖域
以上讨论了样式表的存放位置，现在讨论样式表的作用范围，两者既有联系又有区别：行内样式规则自然决定了它的影响范围是当前元素，而其他样式规则可以灵活地设置规则的作用范围。
5[/b]．1 [/b]简单规则
[/b]
最简单的规则不妨称它们为文档规则和行内规则。前者可以应用到整个文档中出现的所有的某元素（如所有的<p>元素），后者只应用到当前元素。
5[/b]．2 id[/b]规则
[/b]
使用id属性的元素除了可以作为超链接的目标外（类似name属性，在载入页面时将显示定位在页面的指定位置），还可以用它来和样式表中的某个样式规则绑定（比name属性强的地方）。无论是作为超链接的href还是样式规则的选择符，引用id的格式为：＃id值。在一个HTML文档中，id属性值必须全局唯一。
[/b]
举例[/b]：id属性与超链接或样式表的结合使用。
如有<p id = “SecondParagraph”>…</p>，则可以如下引用：
<a href = “# SecondParagraph”>Go to SecondParagraph</a> 或者
<head>
<style type = “text/css”>
<!--
＃SecondParagraph {background-color : green;}
-->
</style>
</head>
5[/b]．3 class[/b]规则
[/b]
和id属性一样，class属性也是HTML核心属性之一，多数元素都有该属性。class属性定义了一个元素所属类的名称。class取值不要求唯一，同一类元素的多个实例、多个不同类的元素都可能属于同一个类。使用类可以显著地减少文档中必需的样式规则的数量。样式规则中有两种引用class的格式：
① 为所有该类的元素设置样式：.[/b]类名{样式规则;[/b]}
② 为属于该类的所有X元素设置样式：X.[/b]类名{样式规则;[/b]}
举例[/b]：class规则的使用。
<style type = “text/css”>
<!--
.[/b]main-item {font-size:150%;}
h1.[/b]veryimportant {background-color:orange;}
-->
</style>
5[/b]．4 [/b]伪类（pseudo[/b]－classes[/b]）和伪元素（pseudo[/b]－elements[/b]）
[/b]
[/b]
5[/b]．4[/b]．1[/b] 伪类[/b]
一组专门的预定义的类称为伪类，主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符＋样式规则来控制。伪类选择符包括：
① a:[/b]link：未访问链接
② a:[/b]visited：已访问链接
③ a:[/b]active：激活时（链接获得焦点时）链接的颜色
④ a:[/b]hover：鼠标移到链接上时
一般a:[/b]hover和a:[/b]visited链接的状态（颜色、下划线等）应该是相同的。前三者分别对应body元素的link、vlink、alink这三个属性。四个“状态”的先后过程是：a:link ->a:hover ->a:active ->a:visited。另外，a:active不能设置有无下划线（总是有的）。
[/b]
举例[/b]：伪类的常见状态值
<style type = “text/css”>
<!--
a:link {color: blue; text-decoration:none;} //未访问：蓝色、无下划线
a:active:{color: red; } //激活：红色
a:visited {color:purple;text-decoration:none;} //已访问：purple、无下划线
a:hover {color: red; text-decoration:underline;} //鼠标移近：红色、下划线
-->
</style>
5[/b]．4[/b]．2 [/b]伪元素
[/b]
两个伪元素：:[/b]first-letter和:[/b]first-letter。它们常常和像<p>这样的元素引导的一段文字一起使用，用来影响其中首字母或者首行的显示，如p:first-letter和p:first-line。
<style type = “text/css”>
<!--
p:first-line {background-color:yellow;}
p:first-letter{color:red;font-size:150%;}
-->
</style>
5[/b]．5 [/b]情景选择（contextual selection[/b]）
[/b]
情景选择允许对位于某嵌套层次内的某元素进行样式控制，该规则通过按照嵌套的顺序列出元素的名称，然后给出样式规则来创建。
举例：[/b]使所有出现在<p>元素内的<strong>元素都有黄色的背景颜色。
p strong {background-color : yellow;}
六．样式规则的继承与嵌套
该性质允许对元素的多种规则进行组合，既可以从父元素那里继承一些属性，也可以重写某些属性。层叠（CSS中的C）的一般思想有效地创建了一个系统以确定在有多个样式表的文档中哪些规则将被应用。例如，使用id属性为一个特定的<p>元素指定规则，这相对于通过class规则指定的规则具有优先权，而class规则相对于为<p>元素自身指定的规则有优先权。相对于应用于整个文档的样式或链接进来的外部样式，通过一个style属性指定的行内样式是更重要的。考虑究竟哪一个规则将最终生效的简单方法是：越专门的规则优先级越高，和标记位置越近的规则优先级越高。
[/b]
[/b]如果需要一个特定的规则永远不被后面的另一条规则重写，可以用!important声明。对希望绝不被忽略的规则，可以在这个规则的分号之前插入声明!important，它一定要放在规则的最后，分号之前的位置，否则将被忽略。另外，许多老版本的浏览器并不支持该声明。
举例：[/b]使用!important声明不被重写的规则。
P {color:red !important;font-size:12pt;}
<p style=“color:green;font-size:24pt;”}...</p>
<p>元素最终将以红色、24点大小显示。
继续：样式表（CSS：Cascading Style Sheets）简要教程[下]
来自：http://blog.csdn.net/tonywearme/
一．样式表基础
1． 样式表中每一个条目由选择符（selector）和对应的规则组成，选择符通常是HTML元素名称，也可以是类（class）、标识符（id）、伪类（pseudo class，它们标示了超链接的不同状态）等。
2． 将样式表（规则）添加到HTML文档中有3种方式：
① 外部样式表。
② 应用于整个文档的样式，位于<head>区，包括嵌入样式表和输入样式表。
③ 行内样式，通过绝大多数元素的style属性实现。
3． 样式表内的注释用/* …*/。通过将样式规则包围在HTML注释<!-- -->之间可以让那些不支持样式表技术的老浏览器也能正常工作而不是直接把样式规则显示在屏幕上。一般而言，浏览器会忽略不认识的元素和属性，但包围在元素之间的内容会显示出来。
4． 每一条规则必须以分号；结束。
5． 如果多个元素共享相同的样式规则，可以使用逗号将它们分组定义。这里分组的概念与分类（class）或标识符（id）的概念不同，前者设置的规则对整个文档中所有的该元素都起作用，而后者只对该元素的一个子集（class或id相同的）起作用。当成组规则和其他规则都涉及到同一个元素时，它们将被组合起来，以生成某个元素的完整的样式。
举例[/b]：成组规则的应用。
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）
[/b]
举例[/b]：外部样式表的引用方式。
<head>
<title>Style Sheet Linking Example</title>
<link rel = "stylesheet" href = "\css\css1.css" type = "text/css">
[/b]
<[/b]/head>
三．应用于整个文档的样式表
3．1 嵌入样式表
[/b]
[/b]嵌入样式表的使用方式是直接写在head区的style元素内，从而形成应用与整个文档的样式表。这种情况下只需要用到style元素的type属性。
[/b]
举例[/b]：嵌入样式表的使用。
<head>
<style type = “text/css”>
<!--
body {
font: 10pt;
font-family: Serif;
color: black;
background-color: white;
}
-->
</style>
</head>
3．2 输入样式表
[/b]
[/b]输入样式表也是引用一个外部样式表，但不是通过link元素而是在style区内通过@import语法来引用：@import url（css的url地址）；可以在<style>元素内引用一些输入样式表，同时又指定一些只应用于本文档的样式。但是（Netscape）浏览器对输入样式表的支持还不普遍，所以建议使用<link>来引用外部样式表。
举例：[/b]输入样式表和嵌入样式表的联合使用。
<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>
四．行内样式
[/b]绝大多数元素都有style属性。行内样式信息并不需要从不支持样式表的浏览器中隐藏，因为浏览器会忽略它们不理解的任何属性。
[/b]
举例[/b]：行内样式的使用。
<h1 style = “font-size: 48pt; font-family: Arial; color: green;”>CSS1 Inline</h1>
五．样式规则的辖域
以上讨论了样式表的存放位置，现在讨论样式表的作用范围，两者既有联系又有区别：行内样式规则自然决定了它的影响范围是当前元素，而其他样式规则可以灵活地设置规则的作用范围。
5[/b]．1 [/b]简单规则
[/b]
最简单的规则不妨称它们为文档规则和行内规则。前者可以应用到整个文档中出现的所有的某元素（如所有的<p>元素），后者只应用到当前元素。
5[/b]．2 id[/b]规则
[/b]
使用id属性的元素除了可以作为超链接的目标外（类似name属性，在载入页面时将显示定位在页面的指定位置），还可以用它来和样式表中的某个样式规则绑定（比name属性强的地方）。无论是作为超链接的href还是样式规则的选择符，引用id的格式为：＃id值。在一个HTML文档中，id属性值必须全局唯一。
[/b]
举例[/b]：id属性与超链接或样式表的结合使用。
如有<p id = “SecondParagraph”>…</p>，则可以如下引用：
<a href = “# SecondParagraph”>Go to SecondParagraph</a> 或者
<head>
<style type = “text/css”>
<!--
＃SecondParagraph {background-color : green;}
-->
</style>
</head>
5[/b]．3 class[/b]规则
[/b]
和id属性一样，class属性也是HTML核心属性之一，多数元素都有该属性。class属性定义了一个元素所属类的名称。class取值不要求唯一，同一类元素的多个实例、多个不同类的元素都可能属于同一个类。使用类可以显著地减少文档中必需的样式规则的数量。样式规则中有两种引用class的格式：
① 为所有该类的元素设置样式：.[/b]类名{样式规则;[/b]}
② 为属于该类的所有X元素设置样式：X.[/b]类名{样式规则;[/b]}
举例[/b]：class规则的使用。
<style type = “text/css”>
<!--
.[/b]main-item {font-size:150%;}
h1.[/b]veryimportant {background-color:orange;}
-->
</style>
5[/b]．4 [/b]伪类（pseudo[/b]－classes[/b]）和伪元素（pseudo[/b]－elements[/b]）
[/b]
[/b]
5[/b]．4[/b]．1[/b] 伪类[/b]
一组专门的预定义的类称为伪类，主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符＋样式规则来控制。伪类选择符包括：
① a:[/b]link：未访问链接
② a:[/b]visited：已访问链接
③ a:[/b]active：激活时（链接获得焦点时）链接的颜色
④ a:[/b]hover：鼠标移到链接上时
一般a:[/b]hover和a:[/b]visited链接的状态（颜色、下划线等）应该是相同的。前三者分别对应body元素的link、vlink、alink这三个属性。四个“状态”的先后过程是：a:link ->a:hover ->a:active ->a:visited。另外，a:active不能设置有无下划线（总是有的）。
[/b]
举例[/b]：伪类的常见状态值
<style type = “text/css”>
<!--
a:link {color: blue; text-decoration:none;} //未访问：蓝色、无下划线
a:active:{color: red; } //激活：红色
a:visited {color:purple;text-decoration:none;} //已访问：purple、无下划线
a:hover {color: red; text-decoration:underline;} //鼠标移近：红色、下划线
-->
</style>
5[/b]．4[/b]．2 [/b]伪元素
[/b]
两个伪元素：:[/b]first-letter和:[/b]first-letter。它们常常和像<p>这样的元素引导的一段文字一起使用，用来影响其中首字母或者首行的显示，如p:first-letter和p:first-line。
<style type = “text/css”>
<!--
p:first-line {background-color:yellow;}
p:first-letter{color:red;font-size:150%;}
-->
</style>
5[/b]．5 [/b]情景选择（contextual selection[/b]）
[/b]
情景选择允许对位于某嵌套层次内的某元素进行样式控制，该规则通过按照嵌套的顺序列出元素的名称，然后给出样式规则来创建。
举例：[/b]使所有出现在<p>元素内的<strong>元素都有黄色的背景颜色。
p strong {background-color : yellow;}
六．样式规则的继承与嵌套
该性质允许对元素的多种规则进行组合，既可以从父元素那里继承一些属性，也可以重写某些属性。层叠（CSS中的C）的一般思想有效地创建了一个系统以确定在有多个样式表的文档中哪些规则将被应用。例如，使用id属性为一个特定的<p>元素指定规则，这相对于通过class规则指定的规则具有优先权，而class规则相对于为<p>元素自身指定的规则有优先权。相对于应用于整个文档的样式或链接进来的外部样式，通过一个style属性指定的行内样式是更重要的。考虑究竟哪一个规则将最终生效的简单方法是：越专门的规则优先级越高，和标记位置越近的规则优先级越高。
[/b]
[/b]如果需要一个特定的规则永远不被后面的另一条规则重写，可以用!important声明。对希望绝不被忽略的规则，可以在这个规则的分号之前插入声明!important，它一定要放在规则的最后，分号之前的位置，否则将被忽略。另外，许多老版本的浏览器并不支持该声明。
举例：[/b]使用!important声明不被重写的规则。
P {color:red !important;font-size:12pt;}
<p style=“color:green;font-size:24pt;”}...</p>
<p>元素最终将以红色、24点大小显示。
继续：样式表（CSS：Cascading Style Sheets）简要教程[下]
来自：http://blog.csdn.net/tonywearme/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 样式表（CSS：Cascading Style Sheets）简要教程[下]
- 样式表（CSS：CascadingStyleSheets）[中]
- CSS 样式表小结 CSS （Cascading style sheets）学完就可以写样式了
- 样式表(CSS：CascadingStyleSheets)学习[上]
- HOWTO: Include Base-64 Encoded Binary Image Data (data URI scheme) in Inline Cascading Style Sheets (CSS)(转)
- div+css - CSS标准 - Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification:级联样式表第2级第1次修改(CSS 2.1)规范
- CSS Hacks and Filters: Making Cascading Stylesheets Work
- Web前端开发之CSS（层叠样式表、全称：Cascading Style Sheets）
- 常见的CSS属性和值CascadingStyleSheets
- CSS（Cascading Style Sheets）层叠样式表
- web之CSS(Cascading Style Sheets)
- 层叠样式表(Cascading Style Sheets，CSS)简介
- 传说中的CSS~让我来告诉你吧~Cascading Style Sheets
- CSS(Cascading Style Sheets)简介
- How to include cascading style sheets (CSS) in JSF
- CSS( Cascading Style Sheets )简书
- CSS(Cascading Style Sheets)背景属性
- CSS（Cascading Style Sheets）层叠样式表
- CSS (Cascading Style Sheets) 简介
- CSS(Cascading Style Sheets)背景属性