一个样式表一般由若干样式规则组成,每条样式规则都可以看作是一条CSS的基本语句,每条规则都包含一个选择器(例如:BODY,P等)和写在花括号里的声明,这些声明通常是由几组用分号分隔的属性和值组成。每个属性带一个值,共同描述整个选择器应该如何在浏览器中显示。一条CSS语句的结构如下:
选择器{属性1:值1;属性2:值2;……}
有6种合法的选择器类别,即:HTML标记、具有上下文关系的HTML标记、用户定义的类、用户定义的ID、虚类、虚元素。
1) HTML标记
例如:
H1{text-align:center;font-family:楷体-gb2312} H1,H2,H3{color:#ff0000} |
2) 具有上下文关系的HTML标记
例如:
这表示只有位于<H1>标记元素内的<B> 标记符说明的内容显示为红色,其它<B>标记符所说明的元素不具有该属性。这种上下文关系可以多层嵌套。
3) 用户定义的类
要想将一个类包括到样式定义中,可将一个句点和一个类名添加到选择器后,即:
选择器.类名{属性:值;……}
可以使用任何名称命名类,例如:若想在网页使用<H2>,并使每处文本具有不同的颜色,则可进行如下定义:
H2.color-red{color:red} H2.color-blue{color:blue} |
然后在网页中需要使用CLASS属性的地方引用这些类,例如:
<H2 class="color-red">第一章 HTML</H2> <H2 class="color-blue">第二章 CSS技术〈/H2〉 |
如果使用了<H2>标记符,但未使用CLASS属性,则不会应用所定义的样式。特别地,还可以定义应用于所有标记符的类,此时,直接用句点后跟类名即可,例如:
然后在所有需要引用该类的标记符中使用CLASS属性。例如:
<P class="red">可用于所有标记的类</P> <H2 class="red">二级标题为红色</P> |
4)用户定义的ID
所谓ID,就是相当于HTML文档中的样式的“身份证”,以保证其在一个HTML文档中具有唯一可用的值。这给使用JAVAScript等脚本编写语言的应用带来了方便。要将一个ID包括在样式定义中,需要“#”号作为ID名称的前缀,格式如下:
定义了ID样式后,则可通过在标记符内使用ID属性来引用该样式。
例如:有定义#red{color:red},则可在若干不同标记符中使用,例如:
<P ID="red">或<H2 ID="red"> |
5)虚类和虚元素
虚类也称伪类(Peeudo-class),它可以区别开不同种类的元素。虚元素(Pseudo-element)指元素的一部分,如段落的第一个字母和首行效果(first-letter和first-line)。虚类和虚元素只可以用在CSS的选择器中,而不能出现在HTML的源代码中,即不能用CLASS或ID来调用。它们只能在特定条件下被浏览器所识别。
伪类中最常见的就是锚伪类。锚伪类可以指定<A>标记符以不同方式显示链接,即访问过的(visited)、未访问过的(link)、激活的(active)和鼠标指向的(hover)几种链接状态。例如可以使用下列方式更改超链接的显示方式:
A:link {text-decoration:none;color:#800000} A:visited {text-decoration:none;color:#800000} A:active {text-decortion:none} A:hover {text-decoration:underline;color:blue} |