注释2：

Blue">“冶游生春露”，冶游、游冶即春游。

二、如何定义层叠样式表：

我们先来简单的说说层叠样式表的结构：

样式区块：

指的是标记和

---->注释标记所成的区块。

加上注释标记的原因是考虑到万一碰到不支持样式表的浏览器，那么样式表定义会被当成注释，而不会产生错误。

选择器（Selector）：

指的是html组件，也可以理解为html里的标记，例如：

P就是一个选择器，所代表的意义为段落。

声明（Declaration）：

指的是HTML组件的样式，例如颜色、字体、对体方式等。

例如P{color:

”blue”}的意义是声名段落文字为蓝色（Blue）。

请注意：

若设置由英文字母、数字（0~9）、减号（-）或小数点（.）所组成，那双引号可以省略。

类别（Class）：

指的是对HTML文件中某些组件所特别设计的样式定义，例如，P.green{color:

”blue”}的意义声名一个Class样式类别，这个样式类别会将段落的文字颜色设置为绿色（green）。

技巧1：

如果您所定义的选择器拥有一个以上的声明，那么这些声明放在{}之间，而且声明之间用分号“;”隔开，例如P{text-indent:

50;line-height:

150%}是声明一个选择器P，使段落的首行缩排50像素、行距1.5行。

技巧2：

如果您定义的选择器不止一个，那么建议您将每个选择器的定义放在不同的行中，以便阅读，例如：

P{text-indent:

50;line-height:

150%}

H1{color:

blue;background:

yellow}

Address{color:

green}

在前面的例子中，我们都使用颜色名称来设置颜色，事实上，您也可以使用#RRGGBB、rgb（RR,GG,BB）等方式来制定颜色。

举例如下：

H1{color:

green}

H1{color:

#00ff00}

H1{color:

rgb（0,255,0）}

H1{color:

rgb（0%,100%,0%）}

此外，我们使用了如像素点等度量单位，事实上，除了像素点之外，样式表还提供如表所示的度量单位。

单位

说明

Em

所使用的字体的大写英文字母M的宽度。

Ex

所使用的字体的小写英文字母x的高度

In

英寸

Cm

厘米

Mm

毫米

Px

像素点（pixel）

Pt

点（point），1点相当于1/72英寸

Pc

Pica,1Pica相当于1/6英寸

层叠样式表所提供的样式可以分成下列7种：

字体样式（FontProperty）、文字文本样式（TextProperty）、背景样式（BackgroundProperty）、区块样式（BoxProperty）、分类样式（ClassificationProperty）、滚动条样式（ScrollbarProperty）、鼠标样式（CursorProperty）。

1．设置字体样式（属性）：

用来设置字体、大小、行距、粗体、斜体等样式。

其中字体样式可分为：

（1）文字字体Font-Family

body{font-family:

宋体,黑体,仿宋体}

（2）文字样式Font-Style

这个样式的属性值有：

normal（正常）、oblique（粗体）、italic（斜体）等

（3）小型大写字样式Font-Variant

这个样式的属性值有：

normal（正常）、small-caps（小型大写字）等两种设置，例如：

H1{font-variant:

small-caps}

这个语句意义是令HTML文件的标题1文字显示为小型大写字（注：

小型大写字就是以较小的字体但大写的方式来显示小写的英文字母）。

（4）文字大小样式Font-Size

Font-Size样式指定文字大小

（5）文字粗细样式Font-Weight

（6）文字行距样式Line-Height

（7）Font样式

Font样式是Font-Family、Font-Style、Font-Variant、Font-Size、Font-Weight等样式的综合表示法。

看下面的实例：

临江仙

夜饮东坡复醉，归来仿佛三更。

家童鼻息已雷鸣，敲门都不应，倚杖听江声。

长恨此身非我有，何时忘却营营。

夜兰风静纹平，小舟从此逝，江海寄余生。

卜算子

缺月挂疏桐，漏断人初静。

眼见幽人独往来，飘渺孤鸿影。

惊起却回头，有恨无人醒。

捡尽寒枝不肯栖，寂寞沙洲冷。

蝶恋花

庭院深深深几许？

杨柳堆烟，帘幕无重数。

玉勒雕鞍游冶处，楼高不见章台路。

雨横风狂三月暮，门掩黄昏，无计留春住。

泪眼问花花不语，乱红飞过秋千去。

2．设置文本样式（属性）：

文本属性设置文本的一些显示特性，例如文本对齐、文本缩进、行间距、字间距等。

（1）文本对齐text-align

属性值：

left（左）,right（右）,center（居中）,justify（两端对齐）。

　　例：

h1{text-align:

center}

（2）文本缩进text-indent

　　该属性有效的控制了文本段落第一行的缩进，其值可以指定，是长度或段落宽度的百分比。

例：

　　p{text-indent:

1.0in}

（3）行高line-height

　　该属性设置行与行之间的间距，其值可以为数值、长度或百分比，百分比以行高为基础。

例：

　　body{line-height:

120%}

（4）字间距letter-spacing

　　字间距设置字与字之间的距离，同样可以用数值、长度或百分比来指定，百分比以字符大小为基础。

例：

　　body{letter-spacing:

0.5em}

　　顺便提一下，文本属性中还有一个单词间距（word-spacing），设置每个单词之间的距离，对于中文页面来讲，可能很少用到。

（5）文本装饰text-decoration

　　属性值：

underline（下划线）,overline（底线）,line-through（线穿过）,blink（闪烁）。

例：

　　h3{text-decoration:

underline}

（6）垂直对齐vertical-align

　　属性值：

baseline（基准线）,super（上标）,sub（下标）,top（顶部）,text-top（文本顶部）,middle（中）,bottom（底部）,text-bottom（文本底部）和百分比。

　　通过不同的值设某对象相对其他文本的位置，特别有用的是，上标、下标成为可能。

例：

平方值：

3

super">2

（7）文本变换text-transform

　　属性值：

capitalize（首字母大写）,uppercase（大写）,lowercase（小写）和none（无）。

缺省值为none。

例：

p{text-transform:

capitalize}

3．设置颜色和背景样式（属性）：

在很多时候，要用到颜色属性，指定文本段落、标题、背景等的颜色，背景属性则用于设定背景图像在浏览器中的显示方式。

（1）颜色属性：

color

属性值：

16种颜色名、数值（#RRGGBB或是r%,g%,b%）。

　　在、

、、