CSS 基本知识
一、CSS 简介
CSS 指层叠样式表 (Cascading Style Sheets)，是一种用来表现 HTML 文档样式的语言，样式定义如何显示 HTML 元素，是可以真正作到网页表现与结构分离的一种样式设计语言。样式一般存储在样式表中，外部样式表一般存储在 CSS 文件中，多个样式定义可层叠为一。php
HTML 标签被设计为用于定义文档内容，也就是文档结构，为了加强代码的可读性，实现网页结构与表现相分离的原则，万维网联盟（W3C），肩负起了 HTML 标准化的使命，并在 HTML4 以外创造出样式（Style）。CSS 目前最新版本是 CSS3，相对于传统 HTML 的表现而言，CSS 可以对网页中对象的位置排版进行像素级的精确控制，拥有对网页对象编辑的能力，易于维护和改版，提升页面浏览速度，使用 CSS 布局页面更符合 W3C 标准，他是目前基于文本展现最优秀的表现设计语言。css
CSS 样式表极大地提升了工做效率：样式一般保存在外部的 .css 文件中，经过仅仅编辑一个简单的 CSS 文档，外部样式表有能力同时改变站点中全部页面的布局和外观。html
二、CSS 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。以下：前端
1 p{ 2 color:red; 3 text-indent:2em; 4 }
选择器就是须要改变样式的 HTML 元素。每条声明由一个属性和一个值组成，属性是设置的样式属性（style attribute），每一个属性都有一个值，属性和值用冒号分隔。CSS 声明老是以分号 ; 结束，声明组以大括号 {...} 括起来。为了让 CSS 可读性更强，能够每行只描述一个属性。算法
CSS 注释是用来解释代码，而且能够随意编辑，浏览器会忽略它。CSS注释以 "/*" 开始，以 "*/" 结束。以下：api
1 p{ 2 color:red; 3 text-indent:2em; /* 段落缩进2个字，即段落开头空2个汉字的位置。 */ 4 }
三、建立 CSS
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。CSS 建立样式表有三种方法：内联样式、内部样式、外部样式。浏览器
(1)、内联样式框架
内联样式也叫行内样式或者行间样式，即在相关标签内使用样式（style）属性定义。以下：编辑器
<div style="width:200px;height:100px;border:1px solid black;"></div>
因为要将表现和内容混杂在一块儿，内联样式会损失掉样式表的许多优点。所以须要慎用这种方法，例如当样式仅须要在一个元素上应用一次时，可使用内联样式。要使用内联样式，须要在相关的标签内使用样式属性定义，style 属性能够包含任何 CSS 属性。ide
(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> 中也定义了该样式，那么内部样式会取代外部文件中的样式。
四、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 只能指定一个。
五、CSS 元素选择器
最多见的 CSS 选择器就是元素选择器，即标签选择器，也就是说 HTML 的元素就是最基本的选择器。
若是使用元素选择器设置 HTML 的样式，选择器一般将是某个 HTML 元素，好比 body、h一、p、a，也能够是 html 自己。
在 W3C 标准中，元素选择器也叫作类型选择器，类型选择器匹配文档中元素类型的名称，类型选择器匹配文档树中该元素类型的每个实例，也就是若是使用元素选择器，好比 h1{color:red;}，他会匹配文档中全部的 h1 元素，即页面上全部的 h1 标题都显示为红色。
六、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;
七、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 指定文本不换行，直到遇到 <br> 标签。。<mark>1——</mark> 指定文本不换行，直到遇到 <br> 标签。。<mark>2——</mark> 指定文本不换行，直到遇到 <br> 标签。。<mark>3——</mark> 指定文本不换行，直到遇到 <br> 标签。。<mark>4——</mark> 指定文本不换行，直到遇到 <br> 标签。。<br/><mark>5——</mark> 指定文本不换行，直到遇到 <br> 标签。。 16 </p> 17 18 <p class="p2"> 19 white-space:pre 20 空白会被浏览器保留，该方式相似 HTML 中的 <pre> 标签。 21 white-space:pre 空白会被浏览器保留，该方式 22 相似 HTML 中的 <pre> 标签。 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>
八、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>
九、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>
十、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; 或者不设置第三个值也好。
十一、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>
十二、CSS 分组和嵌套选择器
(1)、分组选择器
在样式表中有不少具备相一样式的元素，好比标题和段落的文字都显示为灰色，以下：
h1{color:gray;} p{color:gray;}
为了尽可能减小代码，让样式表更加简洁，就可使用分组选择器，每一个选择器用逗号分隔，这样就定义了一个规则，以下：
h1, p{color:gray;}
上面代码中，右边的样式属性将会应用到这两个选择器指定的元素，逗号是在告诉浏览器，规则中包含两个不一样的选择器，若是没有这个逗号，那么规则的含义将彻底不一样，为后代选择器，也叫包含选择器，这时候选择的就是做为某元素后代的元素，即包含在某元素中的全部指定的后代元素，且包括子元素、孙元素、曾孙元素等等。
能够将任意多个选择器分组在一块儿，以下：
h1, h2, h3, h4, h5, h6, p{color:red;}
若是须要为 HTML 中多个标签元素设置同一个样式时，就可使用分组选择符（,）。
(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 选择器，这样代码就少了，并达到了优化代码的目的。嵌套选择器也能够叫作后代选择器。
1三、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>
1四、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。
1五、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 的语言的样式。
1六、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="images/one.jpg" alt="12"></a></li> 38 <li><a href="#" title="时光清浅"><img src="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>
- 1. CSS基本知识介绍
- 2. CSS样式基本知识
- 3. css布局基本知识
- 4. CSS Tutorial(一)：基本知识
- 5. CSS基本知识3-CSS盒模型
- 6. CSS基本知识5-CSS对齐
- 7. CSS基本知识2-CSS选择
- 8. CSS基本知识8-CSS定位
- 9. CSS基本知识4-CSS行模型
- 10. CSS基本知识6-CSS字体
- 更多相关文章...
- • 与传输层有关的基本知识 - TCP/IP教程
- • Lua 基本语法 - Lua 教程
- • Kotlin学习（二）基本类型
- • Kotlin学习（一）基本语法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS基本知识介绍
- 2. CSS样式基本知识
- 3. css布局基本知识
- 4. CSS Tutorial(一)：基本知识
- 5. CSS基本知识3-CSS盒模型
- 6. CSS基本知识5-CSS对齐
- 7. CSS基本知识2-CSS选择
- 8. CSS基本知识8-CSS定位
- 9. CSS基本知识4-CSS行模型
- 10. CSS基本知识6-CSS字体