JSP设计与开发第3版：CSS规则定义

CSS样式表的核心是规则的制定，也就是样式的定义。CSS的规则由3部分构成:选择器、属性和值。其形式如下:

selector{property:value}

其中，选择器(selector)通常是要定义样式的HTML元素或标签，属性(property)是要改变的标签的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围。

例如，规则body{color:green}的作用是将body标签内的文字颜色定义为绿色。其中body是选择器，而包括在花括号内的color为属性，green为值。

CSS选择器共有以下3种基本类型。

(1)标签选择器:一个完整的HTML页面是由很多不同的标签组成的，标签选择器是用来说明对应标签采用的CSS样式。例如，p{color:red}表示页面中所有p标签文字颜色均为红色。

(2)id选择器:id选择器用于为标有特定id的HTML元素指定特定的样式，与标签选择器相比，id选择器更具有针对性。id选择器在定义时以“＃”进行说明，并且按照W3C标准，在一个HTML页面中id选择器只能使用一次。在使用id选择器设定样式时要先给HTML页面中的某个标签设置id属性，则该id选择器中设定的样式即可应用到该标签所修饰的内容中。

例如，在HTML代码中有如下语句:

<p id＝"red">红色</p>

<p id＝"green">绿色</p>

且定义了如下两个id选择器:

＃red{color:red}

＃green{color:green}

则id属性为red的p标签修饰的内容将显示为红色，而id属性为green的p标签修饰的内容将显示为绿色。(www.xing528.com)

(3)类选择器:使页面中的某些标签(可以是不同的标签)具有相同的样式，与id选择器相比，id选择器不能重复，只能使用一次，而类选择器的使用次数不受限制。类选择器在定义时以“.”进行说明，其用法和id选择器比较类似。在使用时，先给HTML页面中某个标签设置类属性class，则该类选择器中设定的样式即可应用到该标签所修饰的内容中。

例如，在HTML代码中有语句:

<p class＝"red">红色</p>

<h1 class＝"red">红色</h1>

且定义了类选择器:.red{color:red}

则在上面HTML代码中p标签和h1标签所修饰的文字都将显示为红色。

另外，如果要定义的属性不止一个，则需要用分号将每个属性分开。

例如，H1{text-align:center；color:red；}的作用是将所有＜H1>＜/H1>包围的文字颜色设置为红色，并居中显示。

同时，也可以对选择器进行分组，被分组的选择器就可以分享相同的规则，选择器之间用逗号分隔。

例如，h1，h2，h3，h4，h5，h6{color:green}的作用是设置所有标题元素的颜色为绿色。

CSS规则具有继承性，即子元素从父元素继承属性，换句话说，外部的元素样式会保留下来继承给这个元素所包含的其他元素，所有在元素中嵌套的元素都会继承外层元素指定的属性值。例如，为选择器body定义的属性会自动应用到其子元素p、h1、ul等上。除非子元素重新定义了其父元素中定义的属性，则以子元素自身定义的属性规则为准。

例如，B{color:red}规则应用在＜B>welcome＜I>China＜/I>＜/B>中，则“China”字符串被标签＜I>修饰为斜体，虽然＜I>标签并没有设定其他样式，但因为＜I>位于＜B>之中，所以它将继承父标签＜B>的设置，设置为红色加粗。但是，如果加上规则I{color:blue}，则“China”字符串颜色最终受＜I>标签自身样式修饰，显示为蓝色。