首页 > > 网页制作 > css >

样式表(CSS：Cascading Style Sheets)学习[上]

2008-02-23 08:29:53来源：互联网阅读 ()

　　一．样式表基础

　　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>

</head>

　　三．应用于整个文档的样式表

　　3．1 嵌入样式表

嵌入样式表的使用方式是直接写在head区的style元素内，从而形成应用与整个文档的样式表。这种情况下只需要用到style元素的type属性。

　　举例：嵌入样式表的使用。

<head>

<!--

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>

<!--

@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>

<!--

＃SecondParagraph {background-color : green;}

-->

</style>

</head>

　　5．3 class规则

　　和id属性一样，class属性也是HTML核心属性之一，多数元素都有该属性。class属性定义了一个元素所属类的名称。class取值不要求唯一，同一类元素的多个实例、多个不同类的元素都可能属于同一个类。使用类可以显著地减少文档中必需的样式规则的数量。样式规则中有两种引用class的格式：

　　① 为所有该类的元素设置样式：.类名{样式规则;}