层叠样式表（CSS）全接触之二

网络整理 - 07-28

二、样式表的语法

　　一个样式表由样式语法组成, 以告诉浏览器怎样去呈现一个文档. 有很多将样式语法加入到你的HTML文档中的方法, 但最简单的启动方法是使用HTML的STYLE组件.这个元素放置于文档的HEAD部分, 包含网页的样式规则。

　　1、选择符

　　每个规则的组成包括一个选择符--通常是一个HTML的元素, 例如BODY, P, 或EM和该选择符所接受的样式.有很多的属性可以用于定义一个元素. 每个属性带一个值, 共同地描述选择符应该如何呈现.样式规则组成如下:

　　选择符 { 属性: 值 }

　　单一选择符的复合样式声明应该用分号隔开:

　　选择符 { 属性1: 值1; 属性2: 值2 }

　　以下是一段定义了H1和H2元素的颜色和字体大小属性:

<HEAD>
<TITLE>CSS例子</TITLE>
<STYLE TYPE="text/css">
ＥＭ { font-size: 150%; color: blue }
</STYLE>
</HEAD>

　　上述的样式表告诉浏览器用1.5倍的蓝色字体去显示网页中强调的部分。

　　2、类选择符

　　单一个选择符能有不同的CLASS(类)，因而允许同一元素有不同样式。例如，一个网页制作者也许希望视其语言而定，用不同的颜色显示代码 :

code.html { color: #191970 }
code.css { color: #4b0082 }

　　以上的例子建立了两个类，css和html，供网页的CODE元素使用。CLASS属性是用来在网页中以指明元素的类，例如，<P CLASS=css>，每个选择符只允许有一个类。一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观。上述例子中的css类也可以命名为effect。

　　3、ID 选择符

　　ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用，因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如，ID选择符可以指定如下:

　　4、关联选择符

　　关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大。例如，以下的上下文选择符

P EM { background: yellow }

　　这个值表示段落中的强调文本会是黄色背景；而标题的强调文本则不受影响。

　　5、伪类和伪元素

　　伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如，visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。

　　伪类或伪元素规则的形式如：选择符:伪类 { 属性: 值 }或选择符:伪元素 { 属性: 值 }

　　伪类和伪元素不用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下:

　　选择符.类: 伪类 { 属性: 值 }

　　或

　　选择符.类: 伪元素 { 属性: 值 }

　　6、定位锚伪类

　　　伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激　活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示，甚至不同字体大小和风格。一个有趣的效果是使当前(或"可激活")连接以不同颜色、更大的字体显示。然后，当网页的已访问连接被重选时，又以不同颜色、更小字体显示。这个样式表的示例如下:

A:link { color: red }
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }

　　7、首行伪元素

　　通常在报纸上的文章，例如"据新华社报道"中的，文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能，将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子:

P:first-line {