紧接着上一篇文章「Web前端开发进阶篇」CSS样式（下），我们来写下一篇文章哈，小伙伴们跟上我的节奏，动起来，Let's go！

【引言】

讲解之前呢，咱们还是有必要复习一下的，俗话说“温故而知新，可以为师矣”嘛，上一篇文章说了CSS样式中的背景，包括背景图像、重复、定位、大小、还有关联，还有CSS文本，包括文本字间隔、字母间隔、字符转化、文本修饰、空白符、方向、阴影等CSS文本处理，内容有点多，希望小白们多多练习，早日练成切页面神功（低调哈）。下面我们就直奔今日主题了。

CSS字体

在CSS中，有两种不同类型的字体系列名称：

通用字体系列~拥有相似外观的字体系统组合（比如“serif”或“Monospace”）
特定字体系列~具体的字体系列（比如“Times”或“Courier”）

除了特定的字体系列外，CSS定义了5种通用字体系列：

serif字体
Sans-serif字体
Monospace字体
Cursive字体
Fantasy字体

1、指定字体系列（font-family）

我们使用font-family属性来指定字体系列，如果你希望指定h1为微软雅黑字体系列，就可以这样：

h1{font-family: "微软雅黑";}

注意：font-family是可以被继承的，这种字体选择将会应用到body元素中包含的所有元素，除非给指定的元素指定特定的选择器将其覆盖。

在我们实际开发中，字体的使用是有版权的，特别是我们的切页面的途中，不要使用那些有版权的字体，会被告的哈。

2、字体风格（font-style）

由font-style属性来完成，该属性有三个值：

normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示

例如：

h1 {font-style:normal;}
h2 {font-style:italic;}
h3 {font-style:oblique;}

这里就会有人注意到italic和oblique表现得效果形式是一样的，那他们有啥区别呢？

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观，与此不同，倾斜（oblique）文本则是则是正常竖直文本的一个倾斜版本。

3、字体变形（font-variant）

此属性可以设定小型大写字母。（不常用）

小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。例如：

4、字体加粗（font-weight）

此属性可以设置字体的粗细，属性值100-900为字体指定了9级加粗的程度，由细到粗，例如：

.p0{font-weight: normal;}
.p1{font-weight: 400;}
.p2{font-weight: bold;}
.p3{font-weight: bolder;}

效果如下：

5、字体大小（font-size ）

字体大小在前端领域是非常重要的，也很有讲究的，font-size的值可以是绝对值或相对值。

绝对值：

将文本设置为指定的大小
不允许用户在所有浏览器中改变文本大小（不利于可用性）
绝对大小在确定了输出的物理尺寸时很有用

相对值：

相对于周围的元素来设置大小
允许用户在浏览器改变文本大小

注意：如果你没有规定值，普通文本的默认大小为16px。

但是虽然可以通过浏览器的缩放工具来调整文本大小，不过这实际上是对于整个页面的调整比例，而不限于文本。

使用em来设置字体大小

如果避免在IE浏览器中无法调整字体大小，开发中我们就要用em代替px。（1em=16px）例如：

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;} /* 40px/16=2.5em */
h3 {font-size:0.875em;} /* 14px/16=0.875em */

效果如下：

结合使用百分比和em

在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值，例如：

body {font-size:100%;}
h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;} /* 40px/16=2.5em */
h3 {font-size:0.875em;} /* 14px/16=0.875em */

这样一来，在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

设置链接的样式

能够设置连接样式的CSS属性有很多种（例如color、font-family、background等等），但是链接的特殊性在于能够根据他们所处的状态来设置他们的样式。

a链接四种状态：

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

例如：

a:link {color:#FF0000;}		/* 未被访问的链接 */
a:visited {color:#00FF00;}	/* 已被访问的链接 */
a:hover {color:#FF00FF;}	/* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}	/* 正在被点击的链接 */

注意：当为链接的不同状态设置样式时，请按照以下次序规则：

a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

CSS 列表

CSS列表分为无序列表<ul>和有序列表<ol>，都可以为其列表更改列表标志类型。

1、列表类型（list-style-type）

例如：

<ul style="list-style-type : square">
			<li>昨天你们学习了吗？</li>
			<li>今天你们学习了吗？</li>
			<li>明天你们学习了吗？</li>
</ul>

效果如下：

2、列表项图像（list-style-image）

简单说，就是把列表项前面的标志改成自己的图片。例如：

ul li {list-style-image : url(xxx.jpg)}

3、列表标志位置

简单说，可以确定标志出现在列表项内容之外还是内容内部。例如：

li {list-style : url(example.gif) square inside}

CSS表格

表哥属性可以帮助我们极大地改善表格的外观，看起来更美观，更整洁。

1、表格边框

就是利用border属性给表格添加一个边框，例如：

table , th , td{border: 1px solid red;}

注意：这样会导致表格具有双线条边框，这是因为table、th、td都具有独立的边框。如果设置为单线条边框，请使用border-collapse 属性。

2、折叠边框

border-collapse 属性设置是否将表格边框折叠为单一边框，例如：

table , th , td{border: 1px solid red;}
table{border-collapse:collapse;}

3、表格文本对齐

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

text-align 属性设置水平对齐方式
vertical-align 属性设置垂直对齐方式

例如：

td
 {
 height:50px;
 vertical-align:bottom;
 }

4、表格内边距

如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性，例如：

td{padding:15px;}

5、表格颜色

可设置边框的颜色，以及 th 元素的文本和背景颜色，例如：

table, td, th{border:1px solid green;}
th{background-color:green;}

6、其他属性

border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。

CSS 轮廓

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

1、在元素周围画线

例如：

p {
				border: red solid thin;
				outline: #00ff00 dotted thick;
			}

效果：

2、设置轮廓的颜色（outline-color）

该属性可以设置轮廓的颜色。跟设置边框的颜色一样，例如：

outline-color:#00ff00;

3、设置轮廓的样式

该属性设置轮廓的样式。例如：

.p1{outline-style: dotted}
.p2{outline-style: dashed}
.p3{outline-style: solid}
.p4{outline-style: double}
.p5{outline-style: groove}
.p6{outline-style: ridge}
.p7{outline-style: inset}
.p8{outline-style: outset}

效果：

4、设置轮廓的宽度

该属性设置轮廓的宽度。例如：

.p1{
				border:red solid thin;
				outline-style:dotted;
				outline-width:3px;
			}

效果：

CSS样式中的字体、链接、列表、表格、轮廓样式今天就讲解到这里了，下一篇讲解CSS样式中框模型，希望大家不要放弃学习哦！

PS：

本文为‘Web前端进阶指南’原创，手动码字不易，小伙伴们别忘了顺手点个赞加个关注哈，有什么不懂得下方留言评论或私信。谢谢大家哈！

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

「Web前端开发进阶篇」CSS样式(下)

CSS字体

设置链接的样式

CSS 列表

CSS表格

CSS 轮廓