CSS字体
1.font-family:设置字体，可以设置多个备选字体，逗号隔开，只有字体名带有空格或特殊符号才使用单引号
font-family:"Times New Roman",Georgia,Serif
2.font-style:
该属性有三个值：
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
italic 和 oblique 的区别
font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。
斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。
3.字体变形
font-variant: small-caps;
这种字母采用不同大小的大写字母
4.字体加粗
font-weight属性
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。
5.字体大小
font-size属性
绝对值：
- 将文本设置为指定的大小
- 不允许用户在所有浏览器中改变文本大小（不利于可用性）
- 绝对大小在确定了输出的物理尺寸时很有用
相对大小：
- 相对于周围的元素来设置大小
- 允许用户在浏览器改变文本大小
注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
结合使用百分比和 EM
在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：
6.所有声明一起
font:italic bold 12px/30px arial,sans-serif;
CSS链接
1.链接的四种状态：
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
当为链接的不同状态设置样式时，请按照以下次序规则：
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
2.常见的链接样式
文本修饰:text-decoration:none/underline下划线去掉/保留
背景色background-color
一个例子：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
a:link,a:visited{
display: block;
font-weight: bold;
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: white;
background-color: lightseagreen;
120px;
text-align: center;
padding: 4px;
text-decoration: none;
}
a:hover,a:active{
background-color: #7A991A;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">W3School
</a>
</body>
</html>
CSS列表
1.列表类型 list-style-type
无序值:circle,square,disc,none分别是空心圆，方形，实心圆，无标志
有序值:decimal,lower-roman,upper-roman,lower-alpha,upper-alpha
<style type="text/css">
ul.none {list-style-type: none}
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.decimal {list-style-type: decimal}
ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
ul.lower-roman {list-style-type: lower-roman}
ul.upper-roman {list-style-type: upper-roman}
ul.lower-alpha {list-style-type: lower-alpha}
ul.upper-alpha {list-style-type: upper-alpha}
ul.lower-greek {list-style-type: lower-greek}
ul.lower-latin {list-style-type: lower-latin}
ul.upper-latin {list-style-type: upper-latin}
ul.hebrew {list-style-type: hebrew}
ul.armenian {list-style-type: armenian}
ul.georgian {list-style-type: georgian}
ul.cjk-ideographic {list-style-type: cjk-ideographic}
ul.hiragana {list-style-type: hiragana}
ul.katakana {list-style-type: katakana}
ul.hiragana-iroha {list-style-type: hiragana-iroha}
ul.katakana-iroha {list-style-type: katakana-iroha}
</style>
2.列表项图像 list-style-image
值:url(路径)
3.列表项位置 list-style-position
inside/outside inside有缩进
确定标志出现在列表项内容之外还是内容内部
CSS表格
1.表格边框
border属性
border: 1px solid lightseagreen;
table,td,th
2.折叠边框
table 设置border-collapse:collapse
table{
border-collapse: collapse;
}
td,th{
border: 1px solid lightseagreen;
}
3.表格宽度和高度
table{
border-collapse: collapse;
100%;
}
td,th{
border: 1px solid lightseagreen;
height: 50px;
}
其中百分比为占浏览器长宽的百分比
4.表格文本对齐
text-align:right,left,center
vertical-align:top,center,bottom-----只在td,th中生效
5.表格内边距
padding
6.表格颜色
border中设置边框颜色
background-color设置背景色
empty-cells: hide;隐藏空单元格
border-spacing: 10px 50px;表格边距宽度
caption-side:bottom：标题位置
CSS轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度
1.outline-style
2.outline-color
3.outline-width
outline-width 属性设置元素整个轮廓的宽度，只有当轮廓样式不是 none 时，这个宽度才会起作用。如果样式为 none，宽度实际上会重置为 0。不允许设置负长度值。