紧接着上一篇文章「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列表分为无序列表
- 和有序列表
- ，都可以为其列表更改列表标志类型。
1、列表类型(list-style-type)
例如：
- 昨天你们学习了吗？
- 今天你们学习了吗？
- 明天你们学习了吗？
效果如下：
标志类型为小方块
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样式中框模型，希望大家不要放弃学习哦！
