CSS样式二

1，字体样式

1-1，字体系列

有两种不同类型的字体系列名称：

1】通用字体系列 - 拥有相似外观的字体系统组合

使用一种sans-serif字体，但是不关心是哪一种字体，用户代理会从 sans-serif 字体系列中选择一个字体（如 Helvetica），并将其应用

2】特定字体系列 - 具体的字体系列

使用 font-family 属性 定义文本的具体字体。

.p1 { font-family: serif }

.p2 { font-family: sans-serif }

.p3 { font-family: monospace }

.p4 { font-family: cursive }

.p5 { font-family: fantasy }

运行效果：

1-2，字体风格

font-style 属性最常用于规定斜体文本。

.p1 { font-style: normal }/*正常显示*/

.p2 { font-style: italic }/*斜体显示*/

.p3 { font-style: oblique }/*倾斜显示*/

运行效果：

1-3，字体大小

1】绝对值

用像素设置文本大小，对文本大小进行完全控制

span { font-size: 30px }

运行效果：

2】相对大小

用 em 和百分比设置文本大小，文本相对于周围的元素来设置大小

p { font-size: 3em }

span { font-size: 50% }

运行效果：

1-4，字体变形

font-variant 属性可以设定小型大写字母。

小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。

span { font-variant: small-caps }

运行效果：

1-5，字体加粗

font-weight 属性设置文本的粗细。使用 bold 关键字可以将文本设置为粗体。数字 100 ~ 900 为字体指定了 9 级加粗度，数字 400 等价于 normal，而 700 等价于 bold。

.p4 { font-weight: bold }

.p5 { font-weight: 900 }

运行效果：

2，链接样式

a:link {color: #F00} /* 未访问 */

a:visited {color: #0F0;} /* 已访问*/

a:hover {color: #F0F;} /* 鼠标悬浮 */

a:active {color:#00F;} /* 正在点击 */

运行效果：

为链接的不同状态设置样式时，要按照以下次序规则：

1】a:hover 必须位于 a:link 和 a:visited 之后

2】a:active 必须位于 a:hover 之后

3，轮廓样式

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

h1 {

  border: 1px solid red;/*边框样式*/

  outline-color: #ff0;/*轮廓颜色*/

  outline-style: dotted;/*轮廓样式*/

  outline-width: 10px/*轮廓宽度*/

}

或缩写为：

h1 {

  border: 1px solid red;/*边框样式*/

  outline: #ff0 dotted 10px  /*轮廓样式*/

}

运行效果：