目录
CSS 列表
列表
作为列表项标记的图像
列表 - 简写属性
移除默认设置
所有的CSS列表属性
CSS 表格
表格边框
折叠边框（border-collapse）
表格宽度和高度
表格文字对齐
表格填充
表格颜色
CSS 列表
CSS 列表属性作用如下：
设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像
列表
在 HTML中，有两种类型的列表：
无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 ol - 列表项的标记有数字或字母
使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。
示例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>
ul.a{list-style-type: circle;
}ul.a1{list-style-type: square;
}ol.b{list-style-type: upper-roman;
}ol.b1{list-style-type: lower-alpha;
}</style>
</head><body><h1>无序列表</h1><ul class="a"><li>第一项</li><li>第二项</li><li>第三项</li></ul><ul class="a1"><li>第一项</li><li>第二项</li><li>第三项</li></ul><h1>有序列表</h1><ol class="b"><li>第一项</li><li>第二项</li><li>第三项</li></ol><ol class="b1"><li>第一项</li><li>第二项</li><li>第三项</li></ol></body></html>运行结果：
作为列表项标记的图像
要指定列表项标记的图像，使用列表样式图像属性
比如：
ul
{list-style-image: url('sqpurple.gif');
}这样就会在列表的前面显示图像，把图像作为前面的小圆点，比如这样：
列表 - 简写属性
在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。
为列表使用简写属性，列表样式属性设置如下：
ul
{list-style: square url("sqpurple.gif");
}可以按顺序设置如下属性：
list-style-type
list-style-position
list-style-image 如果上述值丢失一个，其余仍在指定的顺序，就没关系。
移除默认设置
list-style-type:none 属性可以用于移除小标记。默认情况下列表 <ul> 或 <ol> 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除
ul {list-style-type: none;margin: 0;padding: 0;
}所有的CSS列表属性
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
| list-style-image | 将图像设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
CSS 表格
使用 CSS 可以使 HTML 表格更美观
表格边框
指定CSS表格边框，使用border属性。
比如：border: 1px solid black;
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>
table,th,td{border: 1px solid black;text-align: center;
}</style>
</head><body><table><tr><th>字母1</th><th>字母2</th></tr><tr><td>a</td><td>b</td></tr></table></body></html>运行结果：
在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。
为了显示一个表的单个边框，使用 border-collapse属性。
折叠边框（border-collapse）
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
border-collapse:collapse;
示例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>table {border-collapse: collapse;}table,th,td {border: 1px solid black;text-align: center;}</style>
</head><body><table><tr><th>字母1</th><th>字母2</th></tr><tr><td>a</td><td>b</td></tr></table></body></html>运行结果：
表格宽度和高度
Width和height属性定义表格的宽度和高度。
示例:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>table {width:100%;}table,th,td {border: 1px solid black;text-align: center;}th{height: 50px;}</style>
</head><body><table><tr><th>字母1</th><th>字母2</th></tr><tr><td>a</td><td>b</td></tr></table></body></html>运行结果：
表格文字对齐
表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式，向左 text-align:left;
，右 text-align:right;
，或中心 text-align:center;
垂直对齐属性设置垂直对齐，比如顶部 vertical-align:top;
，底部 vertical-align:bottom;
或中间 vertical-align:medium;
表格填充
如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性 padding: XXpx;
示例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>table {width: 100%;}table,th,td {border: 1px solid black;text-align: center;}th {height: 50px;}td {padding: 20px;}</style>
</head><body><table><tr><th>字母1</th><th>字母2</th></tr><tr><td>a</td><td>b</td></tr></table></body></html>运行结果：
表格颜色
可以指定边框的颜色，和th元素的文本和背景颜色
示例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>table {width: 100%;}table,th,td {border: 1px solid green;text-align: center;}th {background-color: green;color: red}</style>
</head><body><table><tr><th>字母1</th><th>字母2</th></tr><tr><td>a</td><td>b</td></tr></table></body></html>运行结果：
如果想给表格设置一个标题：
需要： <caption>name</caption>
使用示例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>table {width: 100%;}table,th,td {border: 1px solid green;text-align: center;}th {background-color: green;color: red}</style>
</head><body><table><caption>Table1</caption><tr><th>字母1</th><th>字母2</th></tr><tr><td>a</td><td>b</td></tr></table></body></html>运行结果：
还可以修改标题所在的位置：
caption-side:;属性
比如caption-side:bottom; 标题在下方
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>table {width: 100%;}table,th,td {border: 1px solid green;text-align: center;}th {background-color: green;color: red}caption {caption-side: bottom;}</style>
</head><body><table><caption>Table1</caption><tr><th>字母1</th><th>字母2</th></tr><tr><td>a</td><td>b</td></tr></table></body></html>运行结果：
