【前端基础】1 - 4 链接、列表与表格样式
§1-4 链接、列表与表格样式
1-4.1 链接样式
链接样式可以使用任何 CSS 属性（如颜色、字体、背景等）。链接可以在不同的状态具有不同的样式。
链接的四个状态有：
a:link：正常；a:visited：用户已访问过的链接；a:hover：用户鼠标放在链接上时；a:ative：链接被点击时；
示例：
a:link {color: black;} /* 未访问链接*/
a:visited {color: blueviolet;} /* 已访问链接 */
a:hover {color: cornflowerblue;} /* 鼠标移动到链接上 */
a:active {color: darkblue;} /* 鼠标点击时 */
/*
a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。
a:active 必须在 a:hover 之后。
*/
1-4.2 列表样式
CSS 列表属性作用有设置不同的列表项标记为有序或无序列表、设置列表项标记为图像。
| 属性 | 说明 |
|---|---|
list-style |
简写属性，把所有的列表属性设置在一个声明中 |
list-style-image |
将图像设置为列表项标志 |
list-style-position |
设置列表项标志位置 |
list-style-type |
设置列表项标志的类型 |
列表项标志为图像：list-style-image
| 值 | 说明 |
|---|---|
URL |
图像 URL |
none |
默认，不显示图像 |
inherit |
继承自父元素的值 |
/* 图像列表项标志示例 */
ul {
list-style-image: url('triangle.png');
}
列表项标志位置：list-style-position
| 值 | 说明 |
|---|---|
inside |
列表项标志位于文本内，环绕文本标志对齐 |
outside |
默认，保持标记在文本左侧，且放置在文本之外，环绕文本不根据标志对齐 |
inherit |
继承自父元素的值 |
列表项标志类型：list-style-type
| 值 | 说明 |
|---|---|
none |
无标记 |
disc |
默认，实心圆 |
circle |
空心圆 |
square |
实心方块 |
decimal |
数字 |
decimal-leading-zero |
以 0 开始的数字 |
lower-roman |
小写罗马数字 |
upper-roman |
大写罗马数字 |
lower-alpha |
小写英文字母 |
upper-alpha |
大写英文字母 |
lower-greek |
小写希腊字母 |
upper-greek |
大写希腊字母 |
lower-latin |
小写拉丁字母 |
upper-latin |
大写拉丁字母 |
hebrew |
希伯来编号 |
armenian |
亚美尼亚编号 |
georgian |
乔治亚编号 |
cjk-ideographic |
简单表意数字 |
hiragana |
平假名 |
katakana |
片假名 |
hiragana-iroha |
平假名序号 |
katakana-iroha |
片假名序号 |
1-4.3 表格样式
使用 CSS 可以使得表格更美观。
表格边框：使用 border 简写属性声明边框。
table, th, td {
/* border: 宽度 风格 颜色 */
border: 1px solid darkgray;
/*
风格有：
none - 默认，无边框
dashed - 虚线，大多数浏览器显示为实线
dotted - 点状边框，大多数浏览器显示为实线
double - 双线，宽度等于 border-width
groove - 3D 凹槽边框，效果取决于 border-color
ridge - 3D 垄状边框，效果取决于 border-color
solid - 实线
*/
}
注意到此时，表格具有双层边框，这是因为 th 和 td 元素有独立边界。若要显示单边框，使用 border-collapse 折叠边框：
/* 折叠边框 */
table {
border: 2px solid black;
border-collapse: collpase;
}
th td {
border: 1px solid darkgray;
}
表格宽高：使用 width 和 height 设置宽高。
table {
width: 100%;
}
th {
height: 50px;
}
表格文字对齐：使用 text-align 实现。
tfoot th {
text-align: right;
}
tbody > th {
text-align: center;
}
表格填充：使用 padding 控制边框与表格内容的间距。
th, td {
/*
padding 接受 1 ~ 4 个参数
padding 所有边;
padding 上下 左右;
padding 上 左右 下;
padding 上 右 下 左;
*/
padding: 8px 10px;
}
表格颜色：使用 background-color 设置表格颜色，color 设置文本颜色。
tbody > tr:nth-of-type(even) {
background-color: rgb(237 238 242);
}
