正文

CSS 基本知识

IP云
IP云V管理员/1 阅读
08/02
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

1、CSS 简介

CSS 指层叠样式表 (Cascading Style Sheets)，是一种用来表现 HTML 文档样式的语言，样式定义如何显示 HTML 元素，是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一。

HTML 标签被设计为用于定义文档内容，也就是文档结构，为了增强代码的可读性，实现网页结构与表现相分离的原则，万维网联盟（W3C），肩负起了 HTML 标准化的使命，并在 HTML4 之外创造出样式（Style）。CSS
目前最新版本是 CSS3，相对于传统 HTML 的表现而言，CSS
能够对网页中对象的位置排版进行像素级的精确控制，拥有对网页对象编辑的能力，易于维护和改版，提高页面浏览速度，使用 CSS 布局页面更符合 W3C
标准，他是目前基于文本展示最优秀的表现设计语言。

CSS 样式表极大地提高了工作效率：样式通常保存在外部的 .css 文件中，通过仅仅编辑一个简单的 CSS 文档，外部样式表有能力同时改变站点中所有页面的布局和外观。

2、CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。如下：

1 p{
2 color:red;
3 text-indent:2em;
4 }

选择器就是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成，属性是设置的样式属性（style attribute），每个属性都有一个值，属性和值用冒号分隔。CSS 声明总是以分号 ; 结束，声明组以大括号 {...} 括起来。为了让 CSS 可读性更强，可以每行只描述一个属性。

CSS 注释是用来解释代码，并且可以随意编辑，浏览器会忽略它。CSS注释以 "/*" 开始，以 "*/" 结束。如下：

1 p{
2 color:red;
3 text-indent:2em; /* 段落缩进2个字，即段落开头空2个汉字的位置。 */
4 }

3、创建 CSS

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。CSS 创建样式表有三种方法：内联样式、内部样式、外部样式。

(1)、内联样式

内联样式也叫行内样式或者行间样式，即在相关标签内使用样式（style）属性定义。如下：

<div style="width:200px;height:100px;border:1px solid black;"></div>

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。因此需要慎用这种方法，例如当样式仅需要在一个元素上应用一次时，可以使用内联样式。要使用内联样式，需要在相关的标签内使用样式属性定义，style 属性可以包含任何 CSS 属性。

(2)、内部样式

内部样式也叫内嵌样式，即在文档中创建内嵌的样式表，需要使用 <style> 标签在文档头部定义内部样式表，如下：

 

1 <head>
2 <style>
3 div{
4 width:200px;
5 height:100px;
6 border:1px solid black;
7 }
8 p{
9 color:blue;
10 font-size:14px;
11 }
12 span{
13 color:black;
14 font-weight:bold;
15 }
16 </style>
17 </head>

 

当单个文档需要特殊的样式时，就应该使用内部样式表。

(3)、外部样式

外部样式也叫做外联样式，即使用 <link> 标签链接到外部样式表，如下：

1 <head>
2 <link rel="stylesheet" type="text/css" href="css/style.css">
3 </head>

当样式需要应用于很多页面时，外部样式表将是理想的选择，在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表，浏览器会从文件 style.css 中读到样式声明，并根据它来格式化文档。注意：<link> 标签中 rel="stylesheet" type="text/css" 是固定代码格式，不可更改。

外部样式表可以在任何文本编辑器中进行编辑，样式文件不能包含任何的 HTML 标签，样式表以 .css 扩展名进行保存。注意：不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，那么它在不同的浏览器中可能无法正常工作，导致意向不到的结果。

(4)、样式优先级

样式优先级，也可以称为层叠次序，即同一个 HTML 元素不止被一个样式定义时，会优先使用哪个样式。一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中：

内联样式 > 内部样式 > 外部样式

内联样式（在 HTML 元素内部）拥有最高的优先权，即优先采用在元素内部定义的样式信息，然后是内部样式表（位于 <head> 标签内部），最后是外部样式表中的样式声明，浏览器中的样式声明（缺省值）同外部样式处于同一层次。

优先级的顺序是有一个前提的，即内联样式、内部样式、外部样式表中 CSS 样式是在的相同权值的情况下。

但是内部样式 > 外部式也有一个前提，即内部样式的位置一定在外部样式的后面。如下：

1 <link rel="stylesheet" type="text/css" href="css/style.css">
2 <style>
3 ...
4 </style>

(5)、多重样式

样式表允许以多种方式规定样式信息，样式可以规定在单个的 HTML 元素中，或在 HTML 页的 <head> 元素中，亦或在一个外部的 CSS 文件中，甚至可以在同一个 HTML 文档内部引用多个外部样式表，但是最终多重样式将被层叠为一个。那就意味着：如果你使用了外部文件的样式，在 <head> 中也定义了该样式，那么内部样式会取代外部文件中的样式。

4、id 和 class 选择器

如果要给 HTML 元素设置 CSS 样式，则需要在元素中设置 "id"  和 "class" 属性，该属性用作选择器。

(1)、id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 属性和身份证一样具有唯一性。HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 "#" 来定义。注意： id 属性不能以数字开头。

 

1 <head>
2 <style>
3 #heading{
4 color:red;
5 text-align:center;
6 }
7 </style>
8 </head>
9 <body>
10 <h1 id="heading">CSS 选择器</h1>
11 </body>

 

(2)、class 选择器

class 选择器用于描述一组元素的样式，也叫做类选择器，class 选择器有别于 id 选择器，class 可以在多个元素中使用，并且一个元素也可以指定多个类名。class 选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点 "." 号来定义。可以设置所有带有指定 class 的 HTML 元素，也可以指定特定的 HTML 元素使用 class。注意：类名的第一个字符也不能使用数字。

实例：所有拥有 center 类的 HTML 元素均为居中显示。

 

1 <head>
2 <style>
3 .center{
4 text-align:center;
5 }
6 .col{
7 color:red;
8 }
9 .font{
10 font-size:18px;
11 font-family:"Microsoft YaHei";
12 }
13 </style>
14 </head>
15 <body>
16 <h1 class="center">class 选择器</h1>
17 <p class="center col">我是一个段落。</p>
18 <p class="center font">我是另一个段落。</p>
19 </body>

 

实例：所有的 p 元素使用 class="center"，让该元素的文本居中。

 

1 <head>
2 <style>
3 .center{
4 color:blue;
5 }
6 p.center{
7 text-align:center;
8 }
9 p.col{
10 color:red;
11 }
12 .font{
13 font-size:18px;
14 font-weight:bold;
15 font-family:"Microsoft YaHei";
16 }
17 </style>
18 </head>
19 <body>
20 <h1 class="center col">class 选择器</h1>
21 <p class="center col">我是一个段落。</p>
22 <p class="center col font">我是另一个段落。</p>
23 <h2 class="center">h2 标题</h2>
24 </body>

 

(3)、ID 选择器和类（class）选择器的区别

相同点：可以应用于任何元素。

不同点：

①、ID 选择器只能在文档中使用一次。与类选择器不同，在一个 HTML 文档中，ID 选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

②、可以 使用类选择器词列表方法为一个元素同时设置多个样式。在一个 HTML 文档中，可以为一个元素同时设置多个样式，但只可以用类选择器的方法实现，ID 选择器是不可以的，不能使用 ID 词列表，即一个元素可以指定多个类名，如 <span class="one two three">文本</span>，而 ID 只能指定一个。

5、CSS 元素选择器

最常见的 CSS 选择器就是元素选择器，即标签选择器，也就是说 HTML 的元素就是最基本的选择器。

如果使用元素选择器设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 body、h1、p、a，也可以是 html 本身。

在 W3C 标准中，元素选择器也叫做类型选择器，类型选择器匹配文档中元素类型的名称，类型选择器匹配文档树中该元素类型的每一个实例，也就是如果使用元素选择器，比如 h1{color:red;}，他会匹配文档中所有的 h1 元素，即页面上所有的 h1 标题都显示为红色。

6、CSS 背景

background 属性用于定义 HTML 元素的背景。

定义元素背景效果的 CSS 属性有以下五种：

①：background-color

②：background-image

③：background-repeat

④：background-position

⑤：background-attachment

(1)、background-color：背景颜色

background-color 属性定义了元素的背景颜色。页面的背景颜色可以使用 body 元素选择器进行定义：

1 body{
2 background-color:gray;
3 }

CSS 中，颜色值通常使用以下方式定义：

①：十六进制，如："#ff0000"，类似这样的形式，可以缩写为："#f00"。

②：RGB，如："rgb(255,0,0)"。

③：颜色名称，如："red"。

(2)、background-image：背景图像

background-image 属性描述了元素的背景图像。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体，页面背景图片设置如下：

1 body{
2 background-image:url('images/wallpaper.jpg');
3 }

(3)、background-repeat：背景图像设置水平或垂直平铺或不平铺

默认情况下，background-image 属性会在页面的水平或者垂直方向平铺。一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些：background-repeat:repeat-x，定义垂直方向平铺语法：background-repeat:repeat-y。

在使用背景图像时，默认会平铺重复显示，这样不仅不具有美感，还会影响文本的排版。如果不想让图像平铺，并且只显示一次，那么就这样定义：background-repeat:no-repeat。

 

1 <head>
2 <style>
3 body{
4 background-image:url('images/wallpaper.jpg');
5 background-repeat:no-repeat;
6 }
7 </style>
8 </head>
9 <body>
10 <h1 class="center col">class 选择器</h1>
11 <p class="center col">我是一个段落。</p>
12 <p class="center col font">我是另一个段落。</p>
13 <h2 class="center">h2 标题</h2>
14 </body>

 

(4)、background-position：背景图像设置定位

在上面的例子中，背景图像与文本显示在同一个位置，这样不利于文本的阅读，为了让页面排版更加合理，可以利用 background-position 属性改变图像在背景中的位置：

1 body{
2 background-image:url('images/wallpaper.jpg');
3 background-repeat:no-repeat;
4 background-position:right top;
5 }

此时，背景图像会显示在页面的右上角。background-position 属性设置背景图像的位置，如果背景图像要重复，也将从这一点开始。

background-position 属性值可以使用关键字表示：left | right | center，如果仅指定一个关键字，其他值将会是 "center"。该方法可能的值的有：left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom。

background-position 属性值也可以使用百分比表示：x％y％，默认值为：0％0％，第一个值是水平位置，第二个值是垂直位置。左上角是 0％0％，右下角是 100％100％。如果仅指定了一个值，其他值将是 50％。

background-position 属性值还可以使用长度单位精确表示，单位可以是像素或任何其他 CSS 单位，通常都使用像素。第 一个值是水平位置，第二个值是垂直位置，左上角是 0 0，两个数值之间用空格隔开，例如：background-position:12px 24px; 表示背景图片距离该元素左上角的水平方向位置是 12px，垂直方向位置是 24px。该属性就是图像左上角相对于元素左上角的位置偏移，如果取负值，则向上向左偏移。该方法在制作 CSS 雪碧图（即 CSS Sprite，也叫做 CSS 精灵）时，将十分重要。

(5)、background-attachment：背景图像设置固定或滚动

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动，默认值是 scroll，背景图片随页面的其余部分滚动。如果需要设置图像不随着页面的其他部分滚动，那么属性值则使用 fixed，定义背景图像是固定的，如下：

 

1 <head>
2 <style>
3 body{
4 height:2000px;
5 background-image:url('images/fix.gif');
6 background-repeat:no-repeat;
7 background-attachment:fixed;
8 }
9 </style>
10 </head>
11 <body>
12 <p>我是一个段落,我是一个段落</p>
13 <p>我是一个段落,我是一个段落</p>
14 <p>我是一个段落,我是一个段落</p>
15 <p>我是一个段落,我是一个段落</p>
16 <p>我是一个段落,我是一个段落</p>
17 <p>我是一个段落,我是一个段落</p>
18 <p>我是一个段落,我是一个段落</p>
19 <p>我是一个段落,我是一个段落</p>
20 <p>我是一个段落,我是一个段落</p>
21 <p>我是一个段落,我是一个段落</p>
22 <p>我是一个段落,我是一个段落</p>
23 <p>我是一个段落,我是一个段落</p>
24 <p>我是一个段落,我是一个段落</p>
25 <p>我是一个段落,我是一个段落</p>
26 <p>我是一个段落,我是一个段落</p>
27 <p>我是一个段落,我是一个段落</p>
28 <p>我是一个段落,我是一个段落</p>
29 <p>我是一个段落,我是一个段落</p>
30 <p>我是一个段落,我是一个段落</p>
31 <p>我是一个段落,我是一个段落</p>
32 <p>我是一个段落,我是一个段落</p>
33 </body>

 

(6)、背景属性简写

在上面实例中，设置页面的背景效果时，通过很多的单个属性来进行定义，这样代码就显得很繁琐，为了简化这些属性的代码，可以将这些属性合并在同一个属性中，如下：

1 body{
2 background:green url('images/fix.gif') no-repeat fixed 12px 24px;
3 }

background 属于复合属性，也叫快捷属性，他可以简化代码，提高页面的运行效率，但 是在使用 JS 时却不能使用复合属性来获取元素的样式，需要使用单个属性精确获取，如果一个元素定义了多个背景样式，那么使用复合属性获取，浏览器并不知道你到底需要哪 个样式，就出错了。类似这样的复合属性还有：font、border、padding 和 margin 等。

当使用简写属性时，属性值的顺序依次为：

background-color --> background-image --> background-repeat --> background-attachment --> background-position

以上属性无需全部使用，可以按照页面的实际需要使用，比如只定义背景颜色，就可以这样设置：background:#90C;

7、CSS 文本格式

(1)、文本颜色

color 属性被用来设置文字的颜色，可以使用合理的背景颜色和文本颜色搭配，这样有利于提高文本的可读性。

 

1 <head>
2 <style>
3 body{
4 background-color:#d5f3f4;
5 }
6 h1{
7 color:#00c; /* color:#0000cc; */
8 }
9 </style>
10 </head>
11 <body>
12 <h1>文字颜色</h1>
13 <p>可以使用合理的背景颜色和文本颜色搭配，这样有利于提高文本的可读性。</p>
14 </body>

 

(2)、文本对齐方式

text-align 文本排列属性可以用来设置文本的水平对齐方式，文本可以居中或对齐到左或右，两端对齐。

该属性有4个值，默认值为 left，由浏览器决定，把文本排列到左边，即对齐到左。center 则为文本居中，right 为文本对齐到右边。

 

1 <head>
2 <style>
3 h1{
4 text-align:center;
5 }
6 h3{
7 text-align:right;
8 }
9 </style>
10 </head>
11 <body>
12 <h1>标题 1 居中显示</h1>
13 <h2>标题 2 居左默认显示</h2>
14 <h3>标题 3 居右显示</h3>
15 </body>

 

当 text-align 属性的值设置为 justify 时，则表示文本两端对齐，每一行将被展开为宽度相等，左、右外边距对齐，就像杂志和报纸那样，常应用于书刊杂志排版。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上，然后，调整单词和字母间的间隔，使各行的长度恰好相等。那就是说对于英文这样定义是可以的，但是对于中文两端对齐支持并不是很好。解决办法就是再定义 text-justify 属性，将其值设置为 inter-ideograph，用表意文本来对齐内容，他增加或减少表意字和词间的空格。表意字顾名思义，就是字形有一定表达意思性的文字，汉字属于表意文字，他是文字萌芽时期的产物，是汉语形成历史中最早的一种文字。该属性值的默认值为 auto，让浏览器决定两端对齐算法。实例：

 

1 <head>
2 <style>
3 .part{
4 color:red;
5 text-align:justify;
6 text-justify:inter-ideograph;
7 }
8 .p1{
9 width:300px;
10 }
11 .p2{
12 width:300px;
13 }
14 .p3{
15 width:400px;
16 }
17 .p4{
18 width:300px;
19 }
20 </style>
21 </head>
22 <body>
23 <h1>text-align 实例</h1>
24 <p class="part p1">当 text-align 属性的值设置为 justify 时，每一行将被展开为宽度相等，左、右外边距是对齐的，即文本两端对齐，如杂志和报纸那样。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。也就是说对于英文这样定义就可以了，但是对于中文这样定义是不行的。解决办法就是使用 text-justify 属性。</p>
25 <p class="part p2">当 text-align 属性的值设置为 justify 时,每一行将被展开为宽度相等,左,右外边距是对齐的,即文本两端对齐,如杂志和报纸那样.在两端对齐文本中,文本行的左右两端都放在父元素的内边界上.然后,调整单词和字母间的间隔,使各行的长度恰好相等.也就是说对于英文这样定义就可以了,但是对于中文这样定义是不行的.解决办法就是使用 text-justify 属性.</p>
26 <p class="part p3">当 text-align 属性的值设置为 justify 时，每一行将被展开为宽度相等，左、右外边距是对齐的，即文本两端对齐，如杂志和报纸那样。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。也就是说对于英文这样定义就可以了，但是对于中文这样定义是不行的。解决办法就是使用 text-justify 属性。</p>
27 <p class="part p4">当属性的值设置为时，每一行将被展开为宽度相等，左、右外边距是对齐的，即文本两端对齐，如杂志和报纸那样。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。也就是说对于英文这样定义就可以了，但是对于中文这样定义是不行的。解决办法就是使用属性。</p>
28 </body>

 

上面的实 例，有4段文本，都设置了两端对齐，前2段的宽度都为300像素，第一段使用全角的标点符号，而第二段使用了半角的标点符号，可以看到，标点符号会对布局 对齐造成影响，2段文本的显示长度不一样，在 IE 中第一段显示为9行，而在 Chrome 和 FireFox 中第一段显示为10行，第二段均显示为9行，并且第二段使用半角标点符号，布局显得非常紧凑，毫无美感，不易阅读，而且可以很明显看到，这2段文本的字间 距问题还是比较突出的，有的字之间相距很远，而有的字之间间隔很小，主要是因为使用了中英文混合文本，空格也会造成影响。默认情况下，大部分主流浏览器会避免让标点符号占据行首，这也是导致文本间间隔不均的原因，这些问题要想控制还是较为复杂的。第3段文本将宽度设置为400像素，文本两端对齐效果相对来说比较理想。最后一段文本宽度仍为300像素，但是将文本设置为纯中文，文本两端对齐效果很好。

综 上所述，如果文本是中文，文本两端的对齐效果十分理想。如果文本是中英文混合的，通过适当的调整宽度，文本两端对齐效果相对来说比较理想，但对于宽度的调 整可能会影响到整体布局，其实不调整宽度，显示效果也无伤大雅。如果文本的标点符号使用半角，或者半角和全角混合使用，那么文本两端对齐效果则相当糟糕。

text-justify 属性是 CSS3 版本中定义的属性，用于规定当 text-align 被设置为 justify 时的齐行方法，该属性指定如何对齐文本以及对齐间距，目前只有 IE 支持该属性，其他主流浏览器都不支持，如果不设置该属性，在 IE 中两端对齐则无效果，但是对于其他浏览器则无影响。该属性有多个值，除了上面提到的2个值之外，还有 none 禁用齐行。inter-word 通过增加/减少单词间的间隔对齐文本。inter-cluster 只对不包含内部单词间隔的内容进行排齐，比如亚洲语系。distribute 类似报纸版面，除了在东亚语系中最后一行是不齐行的。kashida 通过拉伸字符来排齐内容。

(3)、文本修饰

text-decoration 属性用来设置或删除文本的修饰。从设计角度来讲该属性主要是用来删除超链接的下划线，如下：

 

1 <head>
2 <style>
3 .a1{
4 text-decoration:none;
5 }
6 </style>
7 </head>
8 <body>
9 <a href="#" target="_blank">默认带有下划线的超链接</a><br/><br/>
10 <a class="a1" href="#" target="_blank">text-decoration:none; 删除超链接下划线</a>
11 </body>

 

也可以使用其他值来设置文本的修饰，text-decoration:overline; 设置文本上划线。text-decoration:line-through; 设置文本中间划线。text-decoration:underline; 设置文本下划线。该属性还有一个值为 blink 定义闪烁的文本，但是所有浏览器都不支持。

 

1 <head>
2 <style>
3 .p1{
4 text-decoration:overline;
5 }
6 .p2{
7 text-decoration:line-through;
8 }
9 .p3{
10 text-decoration:underline;
11 }
12 a{
13 color:black;
14 }
15 </style>
16 </head>
17 <body>
18 <p class="p1">text-decoration:overline; 定义文本上的一条线。</p>
19 <p class="p2">text-decoration:line-through; 定义穿过文本的一条线。</p>
20 <p class="p3">text-decoration:underline; 定义文本下的一条线。</p>
21
22 <br/><br/><br/>
23 <a href="#">设置文本下的一条线，会被混淆为超链接。</a>
24
25 <p>设置穿过文本 和 文本下的一条线，类似于 HTML 标签，<del> del 元素定义已删除的文本</del> 和 <ins> ins 元素定义新插入的文本</ins>！</p>
26 </body>

 

注意：给文本添加修饰，会给用户带来困扰，因此建议只将文本修饰属性用于清除超链接的下划线，其余值要慎用，特别是添加文本下的一条线，用户会误认为超链接，所以不要强调指出不是链接的文本，设置穿过文本和文本上的一条线，也常常会混淆用户，不明就里。

①、文本阴影

文本阴影是在 CSS3 中定义的一个文本修饰效果，text-shadow 属性应用于阴影文本。该属性有两个作用，产生阴影和模糊主体。

语法：text-shadow: x y shadow color;

该 属性可以有4个值，其中前2个是必需的值，用来指定阴影的延伸距离，值为长度值，并且允许负值，其中 x 是水平阴影的偏移值，y 是垂直阴影的偏移值。最后2个值都是可选的，shadow 用于指定阴影的模糊值，即模糊效果的作用距离，不允许负值。color 指定阴影的颜色。

 

1 <head>
2 <style>
3 body{
4 font-family:"Microsoft YaHei";
5 }
6 .demo1{
7 text-shadow:2px 2px #f00;
8 }
9 .demo2{
10 text-shadow:2px 2px;
11 }
12 .demo3{
13 text-shadow:2px 2px 10px #f00;
14 }
15 .demo4{
16 color:white;
17 text-shadow:2px 2px 4px #000;
18 }
19 .demo5{
20 text-shadow:0 0 4px #f00;
21 }
22 </style>
23 </head>
24 <body>
25 <p class="demo1">基本文字阴影效果</p>
26 <p class="demo2">只定义2个必需值</p>
27 <p class="demo3">文字阴影模糊效果</p>
28 <p class="demo4">白色文本上的阴影</p>
29 <p class="demo5">霓虹灯效果</p>
30 <p class="demo5 demo4">霓虹灯效果</p>
31 </body>

 

(4)、文本格式

①、文本缩进

文本缩进属性是用来指定文本的首行缩进，允许为负值，如果值是负数，第一行则向左缩进。从小学写作文写日记时，我们都知道每个段落的首行都必须空2个字的大小，也就是缩进2个字，那么在 CSS 中表示为：text-indent:2em，em 是相对文字大小的单位，1em 就是1个文字大小，2em 就是两个文字大小。也可以使用 % 定义基于父元素宽度的百分比的缩进，还可以以像素为单位设置缩进。

②、文本间距

文本间距即行高，就是文本行的高度。line-height 属性用于设置行高，不允许负值。属性值可以是长度单位，设置固定的行间距。也可以是数字，此数字会与当前的字体尺寸相乘来设置行间距。还可以用 % 设置基于当前字体尺寸的百分比行间距。

③、字间距

letter-spacing 和 word-spacing 这两个属性都可用来增加或减少文本间的空白，即字间距。不同的是：letter-spacing 属性设置字符间距，而 word-spacing 属性设置单词间距。属性值都为长度单位，定义文本间的固定间距，并允许负值。注意：word-spacing 属性对中文无效，因此在设置中文的字间距时请使用 letter-spacing 属性。

需要注意：letter-spacing 和 text-align:justify 是两个冲突的属性，不能同时使用，text-align:justify 是设置内容根据宽度自动调整字间距，使各行的长度恰好相等，实现文本两端对齐效果，而 letter-spacing 是指定一个固定的字间距，比如字与字之间相隔 8px，如果这两个属性同时使用，那么既要自动调整字间距，又要按指定的字间距排列，这就相互矛盾了，好比一个人既向左看的同时又向右看，那就神奇了，会出事的。

综合实例：

 

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>文本格式</title>
6 <style>
7 *{padding:0;margin:0;}
8 div{
9 width:500px;
10 margin:0 auto;
11 background-color:lightgray;
12 }
13 h1{
14 color:white;
15 text-align:center;
16 text-shadow:0 0 20px green;
17 }
18 h2{
19 color:blue;
20 text-align:right;
21 margin:0 50px 10px 0;
22 }
23 p{
24 text-indent:2em;
25 line-height:1.5;
26 letter-spacing:1px;
27 margin:0 10px;
28 }
29 </style>
30 </head>
31 <body>
32 <div id="" class="">
33 <h1>匆匆</h1>
34 <h2>作者: 朱自清</h2>
35 <p>燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢：现在又到了哪里呢？</p><br/>
36 <p>我不知道他们给了我多少日子；但我的手确乎是渐渐空虚了。在默默里算着，八千多日子已经从我手中溜去；像针尖上一滴水滴在大海里，我的日子滴在时间的流里，没有声音，也没有影子。我不禁头涔涔而泪潸潸了。</p><br/>
37 <p>去的尽管去了，来的尽管来着；去来的中间，又怎样地匆匆呢？早上我起来的时候，小屋里射进两三方斜斜的太阳。太阳他有脚啊，轻轻悄悄地挪移了；我也茫茫然跟着旋转。于是——洗手的时候，日子从水盆里过去；吃饭的时候，日子从饭碗里过去；默默时，便从凝然的双眼前过去。我觉察他去的匆匆了，伸出手遮挽时，他又从遮挽着的手边过去，天黑时，我躺在床上，他便伶伶俐俐地从我身上跨过，从我脚边飞去了。等我睁开眼和太阳再见，这算又溜走了一日。我掩着面叹息。但是新来的日子的影儿又开始在叹息里闪过了。</p><br/>
38 <p>在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊罢了，只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？我何曾留着像游丝样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸的回去罢？但不能平的，为什么偏要白白走这一遭啊？</p><br/>
39 <p>你聪明的，告诉我，我们的日子为什么一去不复返呢？</p>
40 </div>
41 </body>
42 </html>

 

④、文本空白处理

white-space 属性指定元素内的空白如何处理，默认值为 normal 空白会被浏览器忽略。该属性还有4个值，nowrap 文本不会换行，禁止换行，文本会在同一行上继续，直到遇到 <br> 标签为止。pre 空白会被浏览器保留，这种方式类似 HTML 中的 <pre> 标签，用于定义预格式文本。pre-wrap 指定保留空白符序列，但是正常地进行换行。pre-line 指定合并空白符序列，但是保留换行符，并允许自动换行。

 

1 <head>
2 <style>
3 .p1{
4 white-space:nowrap;
5 }
6 .p2{
7 white-space:pre;
8 }
9 .p3{
10 white-space:pre-wrap;
11 }
12 </style>
13 </head>
14 <body>
15 <p class="p1">white-space:nowrap 指定文本不换行，直到遇到 &lt;br&gt; 标签。。<mark>1——</mark> 指定文本不换行，直到遇到 &lt;br&gt; 标签。。<mark>2——</mark> 指定文本不换行，直到遇到 &lt;br&gt; 标签。。<mark>3——</mark> 指定文本不换行，直到遇到 &lt;br&gt; 标签。。<mark>4——</mark> 指定文本不换行，直到遇到 &lt;br&gt; 标签。。<br/><mark>5——</mark> 指定文本不换行，直到遇到 &lt;br&gt; 标签。。
16 </p>
17
18 <p class="p2">
19 white-space:pre
20 空白会被浏览器保留，该方式类似 HTML 中的 &lt;pre&gt; 标签。
21 white-space:pre 空白会被浏览器保留，该方式
22 类似 HTML 中的 &lt;pre&gt; 标签。
23 </p>
24
25 <p class="p3">
26 white-space:pre-wrap 保留空白符序列，但是正常地进行换行。<mark>1——</mark> 保 留 空 白 符 序 列，但 是 正 常 地 进 行 换 行。<mark>2——</mark> 保留 空白 符序列，但是 正常地 进行换行。<mark>3——</mark> 保 留 空 白 符 序 列，但 是 正 常 地 进行换行。
27 </p>
28 </body>

 

(5)、文本转换

text-transform 属性控制文本中的字母。文本转换属性是用来指定在一个文本中的大写和小写字母，可用于将所有字句变成大写或小写字母，或每个单词的首字母大写。

text-transform:capitalize; 定义文本中的每个单词以大写字母开头。text-transform:uppercase; 定义文本仅有大写字母。text-transform:lowercase; 定义文本仅有小写字母。

 

1 <head>
2 <style>
3 .p1{
4 text-transform:capitalize;
5 }
6 .p2{
7 text-transform:uppercase;
8 }
9 .p3{
10 text-transform:lowercase;
11 }
12 </style>
13 </head>
14 <body>
15 <p class="p1">this is some text. 单词以大写字母开头。</p>
16 <p class="p2">this is some text. 仅有大写字母。</p>
17 <p class="p3">This IS SOme Text. 仅有小写字母。</p>
18 </body>

 

8、CSS 字体

font 属性可用于设置文本字体，定义样式，如加粗，大小等，属于复合属性，也叫做简写属性，可以在一个声明中设置所有字体属性。

当使用简写属性时，属性值的顺序依次为：

font-style --> font-variant --> font-weight --> font-size/line-height --> font-family

注意，font-size 和 font-family 的值是必需的，否则无效。如果缺少了其他值，浏览器将使用默认值。如下：

font:12px/1.5 Tahoma,Arial,Helvetica,"宋体",sans-serif;
font:bold 14px/1.5 "Microsoft YaHei",Arial,Tahoma,sans-serif;

font:12px/1.5 表示：font-size:12px，line-height:1.5，即行高为 12px 的 1.5 倍，也就是 150%。

(1)、CSS 字体系列

font-family 属性设置文本的字体系列。应该始终为 font-family 属性设置多个字体名称作为一种 "后备" 机制，如果浏览器不支持第一种字体，则会尝试下一种字体。注意：如 果字体系列的名称超过一个字，他必须用引号，如 font-family:"黑体"，中文是也需要加引号，如 font-family:"微软雅黑" font-family:"宋体"，英文字体名称可以不用加，如 font-family:Arial，但是如果字体名称为多个单词组合，避免浏览器解析时候把它解析成多个词汇，因此也需要加引号，如 font- family:"Microsoft YaHei"。引号可以是单引号，也可以是双引号。如下：

font-family:Arial,"Microsoft YaHei","黑体","宋体",sans-serif;
font-family:Helvetica,'Microsoft Yahei','微软雅黑',Arial,sans-serif;

(2)、字体大小

font-size 属性用于设置文本的大小。文字的大小在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。因此必须规范使 HTML 标签，如 <h1> - <h6> 表示标题，<p> 表示段落。如果不指定一个字体的大小，那么默认大小和普通文本段落一样，是 16 像素，即 1个汉字 = 16px = 1em。

字体大小的值可以是绝对或相对的大小：

绝对大小：①：指定文字大小。②：不允许用户在所有浏览器中改变文字大小。③：确定了输出的物理尺寸时绝对大小很有用。

相对大小：①：相对于周围的元素来设置大小。②：允许用户在浏览器中改变文字大小。

字体的大小可以使用 px、em，% 和 em 组合来设置。

①、使用 px 设置字体大小

通过像素设置文本大小，可以对字体大小进行完全控制，虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本。

②、使用 em 设置字体大小

em 是 W3C 推荐使用的尺寸单位，可以使用 em 代替 px。1em 等于当前的字体尺寸，在浏览器中默认的文字大小是 16px，因此，1em 的默认大小是 16px。可以通过下面这个公式将像素转换为 em：px/16=em

实例：

 

1 <head>
2 <style>
3 .p1{
4 font-size:2.5em; /* 40px/16=2.5em */
5 }
6 .p2{
7 font-size:1.25em; /* 20px/16=1.25em */
8 }
9 .p3{
10 font-size:0.875em; /* 14px/16=0.875em */
11 }
12 </style>
13 </head>
14 <body>
15 <p class="p1">我是第一个段落</p>
16 <p class="p2">我是第二个段落</p>
17 <p class="p3">我是最后一个段落</p>
18 </p>
19 </body>

 

上面的例子，文字大小设置为 em， 注释中是像素的转换，使用 em 单位，可以在所有浏览器中调整文本大小。

③、使用 % 和 em 组合设置字体大小

在所有浏览器的解决方案中，设置 <body> 元素的默认字体大小是 100%，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

 

1 <head>
2 <style>
3 body{
4 font-size:100%;
5 }
6 .p1{
7 font-size:2.5em; /* 40px/16=2.5em */
8 }
9 .p2{
10 font-size:1.25em; /* 20px/16=1.25em */
11 }
12 .p3{
13 font-size:0.875em; /* 14px/16=0.875em */
14 }
15 </style>
16 </head>
17 <body>
18 <p class="p1">我是第一个段落</p>
19 <p class="p2">我是第二个段落</p>
20 <p class="p3">我是最后一个段落</p>
21 </p>
22 </body>

 

(3)、字体样式

CSS 的 font-style 属性主要用于指定斜体文字。

这个属性有三个值：

①：font-style:normal; 该值是默认值，浏览器显示一个标准的字体样式，正常正常显示文本。

②：font-style:italic; 定义斜体，浏览器斜体的字体样式。

③：font-style:oblique; 定义倾斜的文字，和斜体非常类似。

italic 和 oblique 区别：

这 两个值都可以设置文本向右倾斜显示。一种字体有粗体、斜体、划线等多种字体属性，但是一些字体，或许只有正常体，并没有斜体，这时候就可以 用 oblique 定义，他可以让没有斜体属性的文字倾斜，从 CSS 规范中就可以看出，italic 定义的是斜体，而 oblique 定义的是倾斜的文字，注意是倾斜的文字，而不是斜体字，这就是他们的区别。那么，如果一种字库中没有提供斜体字，当使用 italic 时，浏览器实际上是按 oblique 显示的。

(4)、字体加粗

font-weight 属性可用来设置字体的粗细，默认值为 normal 定义标准的字体。最常用的的值是 bold 定义粗体字体。bolder 定义更粗的字体。lighter 定义更细的字体。也可以使用数值指定，从 100 - 900 定义由细到粗的字体，100 对应最细的字体，900 对应最粗的字体，数值 400 等同于 normal，而 700 等同于 bold。

(5)、字体变形

font-variant 属性设置以小型大写字体或者正常字体显示文本。这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更 小。该属性主要用于定义小型大写字母文本。默认值为 normal 浏览器会显示一个标准的字体。small-caps 浏览器会显示小型大写字母的字体。

 

1 <head>
2 <style>
3 .p1{
4 font-variant:normal;
5 }
6 .p2{
7 font-variant:small-caps;
8 }
9 </style>
10 </head>
11 <body>
12 <p class="p1">Why are you so diao ?</p>
13 <p class="p2">Why are you so diao ?</p>
14 <p>Why are you so diao ?</p>
15 </body>

 

9、CSS 链接

不同的链接可以设置不同的样式，设置链接样式可以用任何 CSS 属性（如 color，background，font 等），链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

在所有浏览器中，链接的默认外观如下：

①：未被访问的链接带有下划线而且是蓝色的。

②：已被访问的链接带有下划线而且是紫色的。

③：活动链接带有下划线而且是红色的。

文本修饰属性 text-decoration:none 可用于删除链接中的下划线。

链接的四种状态是：

①：a:link - 正常，未访问过的链接。

②：a:visited - 已访问过的链接。

③：a:hover - 当鼠标滑动到链接上时。

④：a:active - 链接被点击的那一刻。

当为链接的不同状态设置样式时，必须遵循以下顺序规则：

①：a:hover 必须跟在 a:link 和 a:visited 后面。

②：a:active 必须跟在 a:hover后面。

在 这四种状态中，最常被应用到的状态是 a:hover，:hvoer 是一个 CSS 伪类，在鼠标移动到元素上时添加的特殊样式，可用于所有元素，不只是链接，常被用来做鼠标滑过动画。当应用到链接上时，可以使用列表布局导航栏菜单，也叫 选项卡，当鼠标移动到链接菜单上时，可以显示特殊的样式。

实例创建链接框：

 

1 <head>
2 <style>
3 *{padding:0;margin:0;font:bold 18px '微软雅黑';}
4 a{
5 color:black;
6 background-color:green;
7 text-decoration:none;
8 display:block;
9 width:120px;
10 padding:10px;
11 margin:20px;
12 text-align:center;
13 }
14 a:hover{
15 color:white;
16 background-color:lightgray;
17 text-shadow:0 0 4px red;
18 }
19 </style>
20 </head>
21 <body>
22 <a href="#" >CSS 基础知识</a>
23 </body>

 

10、CSS 列表

从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表，比如家谱、人口普查、太阳系，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。由于列表如此多样，这使得列表相当重要，在 HTML 中，有两种类型的列表：①：无序列表 - 列表项标记用特殊图形，默认以小黑点样式显示。②：有序列表 - 列表项的标记默认以数字样式显示。

CSS 列表属性作用如下：①：设置不同的列表项标记。②：设置列表项标记为图像。

通过 CSS，可以列出进一步的样式，并可用图像作列表项标记。修改列表项标记使用 list-style-type，使用图像作为标记可以利用 list-style-image 属性完成。

(1)、无序列表项标记

无序列表可被用来做导航栏菜单，通常都需要隐藏无序列表项的标记，那么就使用 list-style-type:none，表示无标记。list-style-type 属性的默认值为 disc 实心圆，即小黑点。

 

1 <head>
2 <style>
3 ul{
4 list-style-type:none;
5 }
6 </style>
7 </head>
8 <body>
9 <ul>
10 <li>HTML 超文本标记语言</li>
11 <li>CSS 层叠样式表</li>
12 <li>JavaScript 赋予 HTML 动态交互</li>
13 <li>jQuery 最好用的JS库</li>
14 <li>Bootstrap 前端开发框架</li>
15 </ul>
16 </body>

 

无序列表除了可以无标记之外，还可以修改标记类型，如 circle 空心圆，square 实心方块。实例：

 

1 <head>
2 <style>
3 .ul1{
4 list-style-type:circle;
5 }
6 .ul2{
7 list-style-type:square;
8 }
9 </style>
10 </head>
11 <body>
12 <ul class="ul1">
13 <li>HTML 超文本标记语言</li>
14 <li>CSS 层叠样式表</li>
15 <li>JavaScript 赋予 HTML 动态交互</li>
16 </ul>
17 <ul class="ul2">
18 <li>jQuery 最好用的JS库</li>
19 <li>Zepto 兼容 jQuery 语法的移动端JS库</li>
20 <li>Bootstrap 前端开发框架</li>
21 </ul>
22 </body>

 

(2)、有序列表项标记

有序列表项标记默认使用数字样式显示，即 list-style-type:decimal，也可以将标记项修改为其他类型，cjk- ideographic 则指定汉语数字(表意数字)作为标记。decimal-leading-zero 指定以0开头的数字作为标记，如 01, 02, 03, 等。lower-roman 指定以小写罗马数字作为标记，如 i, ii, iii, iv, v, 等。upper-roman 指定以大写罗马数字作为标记，如 I, II, III, IV, V, 等。lower-alpha 指定以小写英文字母作为标记。upper-alpha 指定以大写英文字母作为标记。

(3)、图像作为列表项标记

要指定列表项标记的图像，可以使用 list-style-image 属性，只需要简单地设置一个 url() 值，就可以将图像作为标记类型。

 

1 <head>
2 <style>
3 ul{
4 list-style-image:url('images/ul-icon.jpg');
5 }
6 </style>
7 </head>
8 <body>
9 <ul>
10 <li>HTML 超文本标记语言</li>
11 <li>CSS 层叠样式表</li>
12 <li>JavaScript 赋予 HTML 动态交互</li>
13 <li>jQuery 最好用的JS库</li>
14 <li>Bootstrap 前端开发框架</li>
15 </ul>
16 </body>

 

(4)、列表项标记的位置

list-style-position 属性可以设置列表中列表项标记的位置。默认值为 outside 保持标记位于文本的左侧，列表项标记放置在文本以外，且环绕文本不根据标记对齐。inside 则指定列表项目标记放置在文本以内，且环绕文本根据标记对齐。如下：

 

1 <head>
2 <style>
3 .ul1{
4 list-style-position:outside;
5 }
6 .ul2{
7 list-style-position:inside;
8 }
9 li{
10 margin:5px;
11 border:2px solid red;
12 }
13 </style>
14 </head>
15 <body>
16 <ul class="ul1">
17 <li>HTML 超文本标记语言</li>
18 <li>CSS 层叠样式表</li>
19 <li>JavaScript 赋予 HTML 动态交互</li>
20 <li>jQuery 最好用的JS库</li>
21 <li>Bootstrap 前端开发框架</li>
22 </ul>
23 <ul class="ul2">
24 <li>HTML 超文本标记语言</li>
25 <li>CSS 层叠样式表</li>
26 <li>JavaScript 赋予 HTML 动态交互</li>
27 <li>jQuery 最好用的JS库</li>
28 <li>Bootstrap 前端开发框架</li>
29 </ul>
30 </body>

 

在上面例子中，使用了2个无序列表，第一个列表项标记位置为默认，第二个列表项标记被放置在文本以内，为了增强演示效果，给每个列表项都设置外边距和边框，在浏览器中可以很直观的看到二者的不同，默认值的标记在边框外，而 inside 则在边框内，还有一点需要注意：在 Chrome 和 Firefox 中这两个值的标记位置与列表项之间的空白都是相等的，而在 IE 中可以很明显的看到，使用 inside 值后，标记位置与列表项之间的空白比默认值宽。

(5)、列表属性简写

在单个属性中可以指定所有的列表属性，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style。

当使用简写属性时，属性值的顺序依次为：

list-style-type --> list-style-position --> list-style-image

可以不设置其中的某个值，比如 list-style:square inside 也是允许的，未设置的属性将使用默认值。

无序列表项的标记在隐藏时，使用简写属性，且考虑到浏览器的兼容性，可以定义为：list-style:none outside none; 或者不设置第三个值也好。

11、CSS 表格

使用 CSS 可以大大的提高 HTML 表格的外观。

(1)、表格边框

给表格设置边框，可以使用 CSS 的 border 属性定义，也可以使用表格标签的 border 属性定义。如下：

 

1 <head>
2 <style>
3 table,th,td{
4 border:1px solid black;
5 }
6 </style>
7 </head>
8 <body>
9 <table>
10 <tr>
11 <th>粗粮</th>
12 <th>蔬菜</th>
13 <th>水果</th>
14 </tr>
15 <tr>
16 <td>大豆</td>
17 <td>黄瓜</td>
18 <td>香蕉</td>
19 </tr>
20 <tr>
21 <td>高粱</td>
22 <td>菠菜</td>
23 <td>柠檬</td>
24 </tr>
25 </table>
26 </body>

 

注意，这样设置的表格具有双线条边框，这是由于 table、th 以及 td 元素都有独立的边框。为了显示一个单线条边框的表格，就使用 border-collapse 属性。

(2)、折叠边框

border-collapse 属性设置是否将表格边框合并为单一线条的边框。该属性的默认值为 separate 边框会分开显示，不会忽略 border-spacing 和 empty-cells 属性。collapse 如果可能，边框会合并为一个单一的边框，该值会忽略 border-spacing 和 empty-cells 属性，即设置这两个属性无效。如下：

 

1 <head>
2 <style>
3 table{
4 border-collapse:collapse;
5 }
6 table,th,td{
7 border:1px solid black;
8 }
9 </style>
10 </head>
11 <body>
12 <table>
13 <tr>
14 <th>粗粮</th>
15 <th>蔬菜</th>
16 <th>水果</th>
17 </tr>
18 <tr>
19 <td>大豆</td>
20 <td>黄瓜</td>
21 <td>香蕉</td>
22 </tr>
23 <tr>
24 <td>高粱</td>
25 <td>菠菜</td>
26 <td>柠檬</td>
27 </tr>
28 </table>
29 </body>

 

border-spacing 属性用于设置相邻单元格的边框间的距离，仅用于边框分离模式，即双线条边框表格。使用 px、cm 等单位指定距离，不允许使用负值。如果定义一个参数，那么定义的是水平和垂直间距。如果定义两个参数，那么第一个设置水平间距，而第二个设置垂直间距。

empty-cells 属性设置是否显示表格中的空单元格，仅用于边框分离模式，即双线条边框表格。该属性用于定义不包含任何内容的表格单元格如何显示，如果显示，就会绘制出单元格的边框和背景。该属性的默认值为 show 在单元格周围绘制边框，hide 不在单元格周围绘制边框。

除非表格的边框显示为双线条边框，否则这两个属性都无效。

 

1 <head>
2 <style>
3 .tab1{
4 empty-cells:hide;
5 border-spacing:10px;
6 }
7 .tab2{
8 border-spacing:20px 50px;
9 margin-top:20px;
10 }
11 </style>
12 </head>
13 <body>
14 <table border="1" class="tab1">
15 <tr>
16 <th>粗粮</th>
17 <th>蔬菜</th>
18 <th>水果</th>
19 </tr>
20 <tr>
21 <td></td>
22 <td>黄瓜</td>
23 <td></td>
24 </tr>
25 <tr>
26 <td>高粱</td>
27 <td></td>
28 <td>柠檬</td>
29 </tr>
30 </table>
31 <table border="1" class="tab2">
32 <tr>
33 <th>粗粮</th>
34 <th>蔬菜</th>
35 <th>水果</th>
36 </tr>
37 <tr>
38 <td></td>
39 <td>黄瓜</td>
40 <td></td>
41 </tr>
42 <tr>
43 <td>高粱</td>
44 <td></td>
45 <td>柠檬</td>
46 </tr>
47 </table>
48 </body>

 

(3)、表格宽度和高度

width 和 height 属性定义表格的宽度和高度。

(4)、表格对齐

text-align 和 vertical-align 属性用于设置表格中文本的对齐方式。

①、text-align 属性设置水平对齐方式，比如左对齐，右对齐和居中。

②、vertical-align属性设置垂直对齐方式，比如顶部对齐，底部对齐或中间对齐。

vertical-align:top; 顶部对齐。vertical-align:middle; 中间对齐。vertical-align:bottom; 底部对齐。

caption-side 属性可以设置表格标题的位置，默认值为 top 将标题定位在表格之上，bottom 可以把表格标题定位在表格之下。

(5)、表格内边距

如果需要控制表格中内容与边框的距离，就应该增加内容的内边距，即为 td 和 th 元素设置 padding 属性。

(6)、表格颜色

可以为表格的边框指定边颜色，也可以为表头以及单元格指定背景颜色，还可以设置文本的颜色。

综合实例：

 

1 <head>
2 <style>
3 #tab{
4 width:50%;
5 font-family:"微软雅黑";
6 border-collapse:collapse;
7 }
8 #tab th,#tab td{
9 border:1px solid #7AC942;
10 padding:5px 10px;
11 }
12 #tab th{
13 color:white;
14 background-color:#9C3;
15 font-size:1.125em;
16 text-align:left;
17 padding-top:4px;
18 padding-bottom:8px;
19 }
20 #tab .list td{
21 color:#000;
22 background-color:#FFC;
23 }
24 caption{
25 margin-bottom:10px;
26 font-weight:bold;
27 font-size:1.5em;
28 }
29 </style>
30 </head>
31 <body>
32 <table id="tab">
33 <caption>食物类别</caption>
34 <thead>
35 <tr class="list">
36 <th>粗粮</th>
37 <th>蔬菜</th>
38 <th>水果</th>
39 </tr>
40 </thead>
41 <tbody>
42 <tr>
43 <td>大豆</td>
44 <td>黄瓜</td>
45 <td>香蕉</td>
46 </tr>
47 <tr class="list">
48 <td>高粱</td>
49 <td>菠菜</td>
50 <td>柠檬</td>
51 </tr>
52 <tr>
53 <td>玉米</td>
54 <td>辣椒</td>
55 <td>芒果</td>
56 </tr>
57 <tr class="list">
58 <td>燕麦片</td>
59 <td>白菜</td>
60 <td>西瓜</td>
61 </tr>
62 </tbody>
63 </table>
64 </body>

 

12、CSS 分组和嵌套选择器

(1)、分组选择器

在样式表中有很多具有相同样式的元素，比如标题和段落的文字都显示为灰色，如下：

h1{color:gray;}
p{color:gray;}

为了尽量减少代码，让样式表更加简洁，就可以使用分组选择器，每个选择器用逗号分隔，这样就定义了一个规则，如下：

h1, p{color:gray;}

上 面代码中，右边的样式属性将会应用到这两个选择器指定的元素，逗号是在告诉浏览器，规则中包含两个不同的选择器，如果没有这个逗号，那么规则的含义将完全 不同，为后代选择器，也叫包含选择器，这时候选择的就是作为某元素后代的元素，即包含在某元素中的所有指定的后代元素，且包括子元素、孙元素、曾孙元素等 等。

可以将任意多个选择器分组在一起，如下：

h1, h2, h3, h4, h5, h6 ,p{color:red;}

(2)、通配符选择器

通配符选择器是在 CSS2 中定义的一种简单选择器，用 * 表示，该选择器可以与任何元素匹配，通常在做页面测试时可用于初始化页面样式，如下：

1 *{
2 padding:0;
3 margin:0;
4 }

还可以加入其他需要初始化的样式，这个样式声明等同于列出了页面中所有元素的一个分组选择器，利用通配符选择器，只需要一个 * 就能将文档中所有元素的样式设置为自定义。

(3)、嵌套选择器

使用嵌套选择器，他能够应用于选择器内部的选择器的样式。如下：

 

1 <head>
2 <style>
3 p{
4 color:blue;
5 text-align:center;
6 }
7 .div1{
8 background-color:red;
9 }
10 .div1 p{
11 color:white;
12 }
13 .div1 p a{
14 color:yellow;
15 font-weight:bold;
16 }
17 </style>
18 </head>
19 <body>
20 <p>元素选择器</p>
21 <div class="div1">
22 <p>嵌套选择器
23 <a href="#">深层嵌套选择器</a>
24 </p>
25 </div>
26 <p>元素选择器</p>
27 </body>

 

在 上面的例子，创建了4个 CSS 样式规则，所有 p 元素的字体设置为蓝色并居中显示。再将所有 class 为 "div1" 的元素背景设置为红色。第三项声明是把这个 class 类中的 p 元素字体设置为白色，并且还拥有两个样式，一个是为所有 p 元素设置的居中显示，另一个是父元素 div 设置的红色背景。最后一项声明，是为类中 p 元素的子元素设置字体为黄色且加粗显示，并拥有祖先元素的红色背景样式。

使用嵌套选择器的好处就是不需要单独给 class 为 div1 的元素内的 p 元素内的 a 元素单独定义 class 选择器或者 ID 选择器，这样代码就少了，并达到了优化代码的目的。嵌套选择器也可以叫做后代选择器。

13、CSS 属性选择器

属性选择器可以为具有特定属性的 HTML 元素样式，而不仅仅是 class 和 id。

(1)、属性选择器

属性选择器使用：[attr] 

下面的例子是把所有带有 title 属性的元素的字体设置为红色：

 

1 <head>
2 <style>
3 [title]{
4 color:red;
5 }
6 </style>
7 </head>
8 <body>
9 <h1>h1 标题不带有 title 属性</h1>
10 <h2 title="标题">h2 可以设置样式</h2>
11 <a href="#" title="链接">超链接可以设置样式</a>
12 </body>

 

(2)、属性和值选择器

属性选择器使用：[attr=value]

下面的例子是把所有 title='Hello' 的元素的字体设置为蓝色：

 

1 <head>
2 <style>
3 [title=Hello]{
4 color:blue;
5 }
6 </style>
7 </head>
8 <body>
9 <h1 title="Hello world">h1 标题 title="Hello world"</h1>
10 <h2 title="Hello">h2 可以设置样式</h2>
11 <a href="#" title="Hello">超链接可以设置样式</a>
12 </body>

 

(3)、属性和多个值的选择器

属性和多个值的选择使用有两种情况：

属性值用空格分隔使用：[attr~=value]

属性值用连字符分隔则使用：[attr|=value]

下面的例子是把包含 title='Hello' 的元素的字体设置为绿色，使用 ~ 分隔属性和值：

 

1 <head>
2 <style>
3 [title~=Hello]{
4 color:green;
5 }
6 </style>
7 </head>
8 <body>
9 <h1 title="world">h1 标题 title="world"</h1>
10 <h2 title="Hello">h2 可以设置样式</h2>
11 <h3 title="Hello Web">h3 可以设置样式</h2>
12 <a href="#" title="Hello world">超链接可以设置样式</a>
13 </body>

 

下面的例子是把包含 lang=zh 属性的元素的字体设置为灰色，使用 | 分隔属性和值：

 

1 <head>
2 <style>
3 [lang|=zh]{
4 color:gray;
5 }
6 </style>
7 </head>
8 <body>
9 <h1 lang="en">h1 语言属性 lang="en"</h1>
10 <h2 lang="zh-CN">h2 可以设置样式</h2>
11 <h3 lang="zh-HK">h3 可以设置样式</h3>
12 <a href="#" lang="zh-TW">超链接可以设置样式</a>
13 </body>

 

(4)、表单样式

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用。如下：

 

1 <head>
2 <style>
3 input[type="text"]{
4 width:150px;
5 display:block;
6 margin-bottom:5px;
7 background-color:yellow;
8 }
9 input[type="button"]{
10 width:120px;
11 margin-top:5px;
12 background-color:green;
13 }
14 </style>
15 </head>
16 <body>
17 <form name="input" action="demo.php" method="get">
18 用户名：<input type="text" name="user" placeholder="请输入登录名">
19 昵称：<input type="text" name="name" placeholder="请输入角色名">
20 <input type="button" value="查询">
21 </form>
22 </body>

 

14、CSS 组合选择符

CSS 组合选择符是包括各种简单选择器的组合方式，组合选择符说明了两个选择器直接的关系。

在 CSS3 中包含了四种组合方式：

①：后代选取器，以空格分隔。

②：子元素选择器，以 > 分隔。

③：相邻兄弟选择器，以 + 分隔。

④：普通兄弟选择器，以 ~ 分隔。

(1)、后代选则器

后代选则器又称为包含选择器，可以选择作为某元素后代的元素，并且包括子元素、孙元素、曾孙元素等等。

下面的实例是把所有包含在 div 元素内的 a 元素的字体设置为红色：div a

 

1 <head>
2 <style>
3 div a{
4 color:red;
5 }
6 </style>
7 </head>
8 <body>
9 <a href="">链接不在 div 中</a>
10 <div>
11 <a href="">div 中第一个子元素 a，显示为红色</a>
12 <p>div 中第二个子元素 p<br/>
13 <a>p 元素的子元素 a，该元素是 div 元素的孙元素，显示为红色</a>
14 </p>
15 <a href="">div 中第三个子元素 a，显示为红色</a>
16 </div>
17 <a href="">链接不在 div 中</a>
18 </body>

 

(2)、子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素，不包括孙元素、曾孙元素等等。如果不希望选择任意的后代元素，而是只选择某个元素的子元素，那么就使用子元素选择器。

下面的实例是把 div 元素中所有直接子元素 a 的字体设置为红色：div>a

 

1 <head>
2 <style>
3 div>a{
4 color:red;
5 }
6 </style>
7 </head>
8 <body>
9 <div>
10 <a href="">div 中第一个子元素 a，显示为红色</a>
11 <p>div 中第二个子元素 p<br/>
12 <a>p 元素的子元素 a，该元素是 div 元素的孙元素</a>
13 </p>
14 <a href="">div 中第三个子元素 a，显示为红色</a>
15 </div>
16 </body>

 

(3)、相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，就可以使用相邻兄弟选择器。

下面的实例选取了所有位于 div 元素后的第一个 p 元素：div+p

 

1 <head>
2 <style>
3 div+p{
4 background-color:red;
5 }
6 </style>
7 </head>
8 <body>
9 <p>body 的第一个子元素 p</p>
10 <div>body 的第二个子元素 div
11 <p>div 中第一个子元素 p</p>
12 <div>
13 <p>div 中第二个子元素 div 的子元素 p</p>
14 </div>
15 <p>div 中第三个子元素 p，是 div 的相邻兄弟元素，相同父级 div</p>
16 </div>
17 <p>body 的第三个子元素 p，是 div 的相邻兄弟元素，相同父级 body</p>
18 <p>body 的第四个子元素 p，是 div 的普通兄弟元素</p>
19 </div>
20 </body>

 

(4)、普通相邻兄弟选择器

普通兄弟选择器选取所有指定元素的相邻兄弟元素。

下面的实例选取了所有 div 元素的所有相邻兄弟元素 p : div~p

 

1 <head>
2 <style>
3 div~p{
4 background-color:red;
5 }
6 </style>
7 </head>
8 <body>
9 <p>body 的第一个子元素 p</p>
10 <div>body 的第二个子元素 div
11 <div>div 元素下的第一个子元素 div</div>
12 <p>div 的相邻兄弟元素</p>
13 <p>div 的普通兄弟元素</p>
14 <p>div 的普通兄弟元素</p>
15 </div>
16 <p>body 下 div 的相邻兄弟元素</p>
17 <p>body 下 div 的普通兄弟元素</p>
18 <p>body 下 div 的普通兄弟元素</p>
19 </body>

 

(5)、选择器组合

多种选择器可以结合起来使用，如下：

1 html>body div+p{
2 color:gray;
3 }

这个选择器解释为：选择紧接在 div 元素后出现的所有兄弟 p 元素，该 div 元素包含在一个 body 元素中，即是 body 元素的子元素，body 元素本身属于 html 元素的子元素。

1 div.list p>a{
2 color:red;
3 }

这 个选择器解释为：选择作为 p 元素的所有子元素 a，这个 p 元素本身是 div 元素的后代，该 div 元素包含一个 class 为 list 的属性。简单说就是选择包含在 class 为 list 的 div 元素内的所有后代 p 元素内的所有直接子元素 a。

 

15、CSS 伪类

CSS 伪类是用来向一些选择器添加特殊的效果。

伪类的语法：选择器:伪类{attr:value;}

CSS 类也可以使用伪类：选择器.class:伪类{attr:value;}

注意：伪类的名称不区分大小写。

(1)、超链接伪类

在浏览器中，链接的不同状态都可以以不同的方式显示：

1 a:link{color:#FF0000;} /* 未访问的链接显示为红色 */
2 a:visited{color:#00FF00;} /* 已访问的链接显示为绿色 */
3 a:hover{color:#FF00FF;} /* 鼠标划过链接显示为紫红色 */
4 a:active{color:#0000FF;} /* 已选中的链接显示为蓝色 */

注意： 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后，才是有效的。

链接的默认样式为：未访问过的显示为蓝色，已访问的显示为紫色，已选中的链接显示为红色。

(2)、伪类和 CSS 类

伪类可以与 CSS 类配合使用，下面的实例，设置已访问过的链接为红色：

 

1 <head>
2 <style>
3 a.tint:visited{
4 color:red;
5 }
6
7 </style>
8 </head>
9 <body>
10 <a href="#">超链接</a>
11 <a class="tint" href="#">超链接</a>
12 </body>

 

(3)、CSS2 - :first - child 伪类

可以使用 :first-child 伪类来选择元素的第一个子元素。

①、选择作为任何元素的第一个子元素 p。选择器使用 p:first-child

 

1 <head>
2 <style>
3 p:first-child{
4 font-weight:bold;
5 color:blue;
6 }
7 </style>
8 </head>
9 <body>
10 <p>第一个 p 元素</p>
11 <p>第二个 p 元素</p>
12 <p>第三个 p 元素</p>
13 </body>

 

②、选择所有 p 元素中的第一个子元素 b。选择器使用 p>b:first-child

 

1 <head>
2 <style>
3 p>b:first-child{
4 color:red;
5 }
6 </style>
7 </head>
8 <body>
9 <p>第<b>一个</b> p <b>元素</b></p>
10 <p>第<b>二个</b> p <b>元素</b></p>
11 <p>第<b>三个</b> p <b>元素</b></p>
12 </body>

 

③、选择所有作为第一个子元素 p 中的所有 b 元素。选择器使用 p:first-child b

 

1 <head>
2 <style>
3 p:first-child b{
4 color:red;
5 }
6 </style>
7 </head>
8 <body>
9 <p>第<b>一个</b> p <b>元素</b></p>
10 <p>第<b>二个</b> p <b>元素</b></p>
11 <p>第<b>三个</b> p <b>元素</b></p>
12 </body>

 

(4)、CSS2 - :lang 伪类

使用 :lang 伪类可以为不同的语言定义特殊的规则。如下：

 

1 html:lang(zh-CN){
2 color:blue;
3 }
4
5 :lang(en)>p{
6 color:gray;
7 }

 

上面例子中的 :lang 伪类，定义了 HTML 文档为 zh-CN 的语言的文字样式，以及任何元素的 p 元素内为 en 的语言的样式。

16、CSS 伪元素

CSS 伪元素是用来为一些选择器添加特殊的效果。

伪元素的语法：选择器:伪元素{attr:value;}

CSS 类也可以使用伪元素：选择器.class:伪元素{attr:value;}

(1)、CSS2 - :before 伪元素

:before 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个 h1 元素前面插入一幅图片：

1 h1:before{
2 content:url(images/logo.gif);
3 }

(2)、CSS2 - :after 伪元素

:after 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个 h1 元素后面插入一幅图片：

1 h1:after{
2 content:url(images/logo.gif);
3 }

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容，该属性用于定义元素之前或之后放置的生成内容。默认的，这往往是行内内容，不过该内容创建的框类型可以用 display 属性控制。content 的内容一般可以为以下四种：

①、content:none 该值是默认值，不插入内容。

②、content:"string" 插入文本。

③、content:attr(属性) 插入标签属性值。

④、content:url(路径) 使用指定的绝对或相对地址插入一个外部资源，可以是图像，音频，视频或浏览器支持的其他任何资源。

实例：

①、插入文本：

 

1 <head>
2 <style>
3 h1:after{
4 content:"我是 h1 标题";
5 }
6 h2:after{
7 content:"(我是 h2 标题)";
8 }
9 </style>
10 </head>
11 <body>
12 <h1>插入文本</h1>
13 <h2>插入文本</h2>
14 </body>

 

注意：在插入文本时，可以给插入的内容带上括号。

②、插入属性值：

 

1 <head>
2 <style>
3 a:after{
4 content:"("attr(href)")";
5 }
6 h1:after{
7 content:attr(title);
8 }
9 </style>
10 </head>
11 <body>
12 <a href="https://www.demo.com">插入属性值</a>
13 <h1 title="h1 标题">插入属性值</h1>
14 </body>

 

注意：在插入属性值时，可以给插入的内容带上括号。

使用插入属性值，还可以实现图片滑过展示属性值的动画效果：

 

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>图片动画效果</title>
6 <style>
7 #demo li{
8 float:left;
9 overflow:hidden;
10 list-style:none outside;
11 margin-right:20px;
12 position:relative;
13 }
14 #demo li a:after{
15 content:attr(title);
16 position:absolute;
17 top:0;
18 left:0;
19 width:100%;
20 line-height:30px;
21 text-align:center;
22 color:white;
23 background-color:rgba(0,0,0,0.3); /* rgba 前三个参数为颜色值，最后一个值 a 代表透明度值。背景色为黑色，透明度值为 0.3 */
24 text-shadow:0 0 2px red; /* 文字阴影效果 */
25 opacity:0; /* 初始透明度为 0 */
26 transition:all 0.5s ease; /* 过渡效果 */
27 }
28 #demo li a:hover:after{
29 top:50%;
30 margin-top:-20px;
31 opacity:1;
32 }
33 </style>
34 </head>
35 <body>
36 <ul id="demo">
37 <li><a href="#" title="彼岸流年"><img src="data:images/one.jpg" alt="12"></a></li>
38 <li><a href="#" title="时光清浅"><img src="data:images/two.jpg" alt="22"></a></li>
39 </ul>
40 </body>
41 </html>

 

③、可以使用 content 属性的 open-quote 属性值和 close-quote 属性值在字符串两边添加如括号、单引号、双引号之类的嵌套文字符号。

open-quote 用于添加开始的文字符号，close-quote 用于添加结束的文字符号。

no-open-quote 如果指定该属性值，则移除内容的开始符号，no-close-quote 如果指定该属性值，则移除内容的结束符号。

 

1 <head>
2 <style>
3 h1{
4 quotes:"(" ")"; /* 利用 quotes 属性指定文字符号 */
5 }
6 h1:before{
7 content:open-quote;
8 }
9 h1:after{
10 content:close-quote;
11 }
12
13 h2{
14 quotes:"\"" "\""; /* 添加双引号需要转义 */
15 }
16 h2:before{
17 content:open-quote;
18 }
19 h2:after{
20 content:close-quote;
21 }
22 </style>
23 </head>
24 <body>
25 <h1>插入文本</h1>
26 <h2>插入文本</h2>
27 </body>

 

④、利用 content 的 counter 属性值可以设定计数内容，针对多个项目追加连续编号。

 

1 <head>
2 <style>
3 h1:before{
4 content:counter(num)"."; /* 设置计数器内容 */
5 }
6 h1{
7 counter-increment:num; /* 设置计数内容每次出现的计数器增量，默认增量是 1 */
8 }
9 </style>
10 </head>
11 <body>
12 <h1>h1 标题</h1>
13 <p>段落</p>
14 <h1>h1 标题</h1>
15 <p>段落</p>
16 <h1>h1 标题</h1>
17 <p>段落</p>
18 <h1>h1 标题</h1>
19 <p>段落</p>
20 <h1>h1 标题</h1>
21 <p>段落</p>
22 </body>

 

默认插入的项目编号是数字型：1,2,3... 自动递增，也可以给项目编号设置文字和样式：

 

1 h1:before{
2 content:"我是第" counter(num) "节内容："; /* 设置计数器内容 */
3 color:red;
4 }
5 h1{
6 counter-increment:num; /* 设置计数内容每次出现的计数器增量，默认增量是 1 */
7 }

 

也可以指定编号类型，语法：content:counter(name, list-style-type);

 

1 h1:before{
2 content:counter(num,upper-roman)'、'; /* 设置计数器编号为大写罗马数字 */
3 color:red;
4 }
5 h1{
6 counter-increment:num; /* 设置计数器每次出现的计数器增量，默认增量是 1 */
7 }

 

⑤、编号还可以实现嵌套，即大编号中嵌套中编号，中编号中嵌套小编号。

 

1 <head>
2 <style>
3 h1:before{
4 content:counter(h)'.'; /* 设置计数器编号为大写罗马数字 */
5 color:red;
6 }
7 h1{
8 counter-increment:h; /* 设置计数器每次出现的计数器增量，默认增量是 1 */
9 }
10 p:before{
11 content:counter(p)'.';
12 }
13 p{
14 counter-increment:p;
15 margin-left:20px;
16 }
17 </style>
18 </head>
19 <body>
20 <h1>h1 标题</h1>
21 <p>段落</p>
22 <p>段落</p>
23 <p>段落</p>
24 <h1>h1 标题</h1>
25 <p>段落</p>
26 <p>段落</p>
27 <p>段落</p>
28 <h1>h1 标题</h1>
29 <p>段落</p>
30 <p>段落</p>
31 <p>段落</p>
32 <h1>h1 标题</h1>
33 <p>段落</p>
34 <p>段落</p>
35 <p>段落</p>
36 <h1>h1 标题</h1>
37 <p>段落</p>
38 <p>段落</p>
39 <p>段落</p>
40 </body>

 

注意，在上面的实例中，所有段落的编号是连续的，这样的显示效果并不理想，对每一个标题都的段落重新编号可以使用 counter-reset 属性重置，该属性用于设置计数器出现次数的计数器的值，默认为 0。

 

1 h1:before{
2 content:counter(h)'.'; /* 设置计数器编号为大写罗马数字 */
3 color:red;
4 }
5 h1{
6 counter-increment:h; /* 设置计数器每次出现的计数器增量，默认增量是 1 */
7 counter-reset:p; /* 设置计数器出现次数，默认为 0 */
8 }
9 p:before{
10 content:counter(p)'.';
11 }
12 p{
13 counter-increment:p;
14 margin-left:20px;
15 }

 

还可以实现更复杂的嵌套，如下面的例子，三层嵌套编号：

 

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>计数器深层嵌套</title>
6 <style>
7 h1:before{
8 content:counter(h1) '、';
9 color:blue;
10 }
11 h1{
12 counter-increment:h1;
13 counter-reset:h2;
14 }
15 h2:before{
16 content:counter(h1) '.' counter(h2) '、';
17 color:gray;
18 }
19 h2{
20 counter-increment:h2;
21 counter-reset:h3;
22 margin-left:20px;
23 }
24 h3::before{
25 content:counter(h1) '.' counter(h2) '-' counter(h3) '、';
26 color:red;
27 }
28 h3{
29 counter-increment:h3;
30 counter-reset:p;
31 margin-left:60px;
32 }
33 p:before{
34 content:counter(p) '.';
35 font-weight:bold;
36 }
37 p{
38 counter-increment:p;
39 margin-left:80px;
40 }
41 </style>
42 </head>
43 <body>
44 <h1>h1 标题</h1>
45 <h2>h2 标题</h2>
46 <h3>h3 标题</h3>
47 <p>段落</p>
48 <p>段落</p>
49 <p>段落</p>
50 <h1>h1 标题</h1>
51 <h2>h2 标题</h2>
52 <h3>h3 标题</h3>
53 <p>段落</p>
54 <p>段落</p>
55 <p>段落</p>
56 <h1>h1 标题</h1>
57 <h2>h2 标题</h2>
58 <h3>h3 标题</h3>
59 <p>段落</p>
60 <p>段落</p>
61 <p>段落</p>
62 <h1>h1 标题</h1>
63 <h2>h2 标题</h2>
64 <h3>h3 标题</h3>
65 <p>段落</p>
66 <p>段落</p>
67 <p>段落</p>
68 <h1>h1 标题</h1>
69 <h2>h2 标题</h2>
70 <h3>h3 标题</h3>
71 <p>段落</p>
72 <p>段落</p>
73 <p>段落</p>
74 </body>
75 </html>

 

(3)、:first-line 伪元素

:first-line 伪元素用于向文本的首行设置特殊样式。

下面的例子，浏览器会根据 :first-line 伪元素中的样式对 p 元素的第一行文本进行格式化：

1 p:first-line{
2 color:white;
3 background-color:green;
4 font:18px '宋体';
5 }

注意：:first-line 伪元素只能用于块级元素，下面的属性可应用于 :first-line 伪元素：

①、font

②、color

③、background

④、line-height

⑤、clear

⑥、vertical-align

⑦：text-decoration

⑧：text-transform

⑨、letter-spacing

⑩、word-spacing

(4)、:first-letter 伪元素

:first-letter 伪元素用于向文本的首字母设置特殊样式。

1 p:first-letter{
2 color:red;
3 font-size:18px;
4 text-transform:uppercase;
5 }

注意：:first-letter 伪元素只能用于块级元素，下面的属性可应用于 "first-letter" 伪元素：

①、font、color、background、line-height、clear、vertical-align (only if "float" is "none")、text-decoration、text-transform

以上8个属性和 :first-line 伪元素相同，除了 letter-spacing 和 word-spacing 之外。

②、float

③、margin

④：padding

⑤：border

(5)、伪元素和 CSS 类

伪元素可以与 CSS 类配合使用。

下面的例子，会对所有 class 为 active 的段落的首行进行格式化：

1 p.active:first-line{
2 color:red;
3 font-size:18px;
4 }

(6)、多伪元素

多重伪元素即可以结合多个伪元素来使用。

下面的例子，段落的第一个字母将显示为红色，其字体大小为 20px。第一行中的其余文本将为蓝色，并带有下划线装饰效果。段落中的其余文本将以默认字体大小和颜色显示：

 

1 <head>
2 <style>
3 p:first-letter{
4 color:red;
5 font-size:20px;
6 }
7 p:first-line{
8 color:blue;
9 text-decoration:underline;
10 }
11 </style>
12 </head>
13 <body>
14 <h1>The best things in life are free, like hugs, smiles, friends, kisses, family, love and good memories.</h1>
15 <p>The moon belongs to everyone，best things in life they're free，stars belong to everyone，they cling there for you and for me.Love can come to everyone，best things in life they're free，all of the good things，every one of the better things.</p>
16 <p>The best things in life are free, and the second best things are very, very expensive.</p>
17 </body>