1.CSS链接
1.1 设置链接样式
能够设置链接样式的CSS属性有很多种（例如color，font-family，background等等)。链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种样式：
a:link-普通的、未被访问的链接
a:visited-用户已访问的链接
a:hover-鼠标指针位于链接的上方（鼠标滑过链接）
a:active-链接被点击的时刻说明：
当为链接的不同状态设置样式时，请按照以下次序规则：
1）a:hover必须位于a:link和a:visited之后。2）a:active必须位于a:hover之后。
1.2 链接样式的属性
color:设置链接内容颜色
text-decoration:设置链接是否有下划线（值为none，去掉下划线；值为underline，不去掉下划线。）
background-color:规定链接的背景色。如：
<html>
<head>
<style type="text/css">
a:link{color:#FF0000;text-decoration:none;background-color:#B2FF99;}/*未被访问的链接*/
a:visited{color:#yellow;text-decoration:none;background-color:#FFFF85;}/*已被访问的链接*/
a:hover{color:#FF00FF;text-decoration:underline;background-color:#FF704D;}/*鼠标指针移动到链接上*/
a:active{color:#0000FF;text-decoration:underline;background-color:#FF704D;}/*正在被点击的链接*/
</style>
</head>
<body>
<a href="https://www.baidu.com/" target="_blank">链接标签</a>
</body>
</html>说明：text-decoration属性大多用于去掉链接中的下划线，上述代码表明在a:link和a:visited状态时，去掉链接中的下划线；在a:hover和a:active状态时，添加链接下划线。
2.CSS列表
列表属性允许放置、改变列表项标志，或者将图像作为列表项标志。
要影响列表的格式，最简单（同时支持最充分）的办法就是改变其标志类型。
例如在一个无序列表中，列表项的标志是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或者另外某种计数体系的一个符号。要改变列表项的标志类型，可以使用属性list-style-type：
ul{list-style-type:square} /*将无序列表中的列表项标志设置为方块*/
设置不同的列表样式：
ul.circle{list-style-type:circle;}
ul.square{list-style-type:square;}
ol.upper-roman{list-style-type:upper-roman;}
ol.lower-alpha{list-style-type:lower-alpha;}还可以使用图像作为标志：
ul li{list-style-image:url(xxx.gif)}CSS的列表属性：
list-style：简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image：将图像设置为列表项标志。
list-style-position：设置列表中列表项标志的位置。
list-style-type：设置列表项标志的类型。如：
<html>
<head>
<style type="text/css">
ul.square{list-style-type:square;}
ul li{list-style-image:url(7.gif);list-style-position:center;}
</style>
</head>
<body>
无序列表：<br/>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
有序列表：
<br/>
</body>
</html>效果为：
3.CSS表格
3.1 表格边框
如需在css中设置表格边框，使用border属性。
为table，th，td设置蓝色边框：
table,th,td{
border:1px solid blue;
}3.2 折叠边框
border-collapse属性设置是否将表格边框折叠为单一边框：
table{
border-collapse:collapse;/*将表格边框折叠为单一边框*/
}3.3 表格宽度和高度
通过width和height属性定义表格的宽度和高度。
下面的例子将表格宽度设置为100%，同时将th元素的高度设置为50px：
table{
width:100%;
}
th{
height:50px;
}3.4 表格文本对齐
text-align和vertical-align属性设置表格中文本的对齐方式。
text-align属性设置水平对齐方式，比如左对齐、右对齐或者居中。
vertical-align属性设置垂直对齐方式，比如顶部对齐、底部对齐或者居中对齐。
td{
text-align:right/center/left;
height:50px;
vertical-align:bottom;
}3.5 表格内边距
如需控制表格中内容与边框的距离，请为td和th元素设置padding属性：
td{
padding:15px;
}3.6 表格颜色
下面的例子设置边框的颜色为蓝色，以及th元素的文本和背景颜色：
table,td,th{
border:1px solid blue;
}
th{
background-color:green;
color:white;
}3.7 CSS Table的其它属性
border-collapse：设置是否把表格边框合并为单一的边框。
border-spacing：设置分隔单元格边框的距离。
caption-side：设置表格标题的位置。
empty-cells：设置是否显示表格中的空单元格。
table-layout：设置显示单元、行和列的算法。例子：
<html>
<head>
<style type="text/css">
table,th,td{
border:1px solid blue;
}
table{
border-collapse:collapse;
width:100%;
}
td{
text-align:center;
height:50px;
vertical-align:bottom;
padding:10px;
background-color:green;
color:white;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>李华</td>
<td>女</td>
</tr>
<tr>
<td>刘云</td>
<td>男</td>
</tr>
</table>
</body>
</html>
4. CSS轮廓
轮廓(outline)是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。CSS Outline属性规定元素轮廓的样式、颜色和宽度。边框属性：
| 属性 | 描述 |
| outline | 在一个声明中设置所有的轮廓属性。 |
| outline-color | 设置轮廓的颜色。 |
| outline-style | 设置轮廓的样式。 |
| outline-width | 设置轮廓的宽度。 |
例子：
<html>
<head>
<style type="text/css">
p{
border:black solid thin;
outline:blue dotted thick;
}
</style>
</head>
<body>
<p>段落</p>
</body>
</html>
