《CSS权威指南》读书笔记2

第五章 字体

---

1.字体系列

字体系列

Serif
Sans-serif
Monospace
Cursive
Fantasy

使用通用字体系列

指定字体系列

当一个字体名中有空格，或者字体名包括“#”之类的符号，才需要在font-family声明中加引号。
通用字体系列名在指示具体的通用系列是就不能加引号。

---

2.字体加粗

font-weight
400对应normal
700对应bold

---

3.字体大小

font-size
其作用是为给定字体的em框提供一个大小，而不能保证实际显示的字符就是这种大小。

绝对大小

相对大小

百分数与大小

百分数值总是根据从父元素继承的大小来计算。

---

4.字体大小与继承

font-size是可以继承的，不过继承的是计算值而非百分数。
也可以使用长度值来设置font-size（但是有兼容性问题），其他方法（如关键字和百分数）都更为用户友好。

---

5.风格和变形

有风格的字体

font-style:
normal/italic/oblique/inherit
（italic）斜体是一种单独的字体风格，对每个字母的结构有一点小改动。
（oblique）倾斜则是正常竖直文本的一个倾斜版本。

字体变形

font-variant：
normal/small-caps/inherit
small-caps：小型大写字母

---

6.拉伸和调整字体

font-stretch

font-size-adjust

---

7.font属性

规则

*font-style，font-weight，font-variant可以按任何顺序来写，如果其中某个属性的值为normal，则可以忽略。
*font-size，font-family不仅要按此顺序作为声明中的最后两个值，而且font声明中必须有这两个值。

增加行高

这个line-height值是可选的，且一定要在font-size后，总要一个斜线分隔。

适当使用简写

简写font属性时，所有被忽略的值都会重置为其默认值。

使用系统字体

其只能整体设置。

---

8.字体匹配

---

第六章 文本属性

---

1.缩进与水平对齐

缩进文本

*一般，可以为块级元素应用text-indent，而无法将这个属性应用到行内元素，图像之类的替换元素上也无法应用此属性。如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
*还可以设置为负值，实现“悬挂缩进”效果。
*这个属性可以继承。

水平对齐

text-align（只应用于块级元素）

---

2.垂直对齐

行高

line-height属性是指文本行基线之间的距离，而非字体的大小。

①构造文本行

②指定line-height值
em,ex和百分数值都是相对于元素的font-size值计算。

③行高和继承
line-height值从父元素继承时，要从父元素计算，而不是在子元素上计算。
举例：

垂直对齐文本

vertical-align属性只应用与行内元素和替换元素，如图像和表单输入元素，且不能继承。

*vertical-align不影响块级元素中内容的对齐，但是可以用它来影响表单元格中元素的的垂直对齐。

①基线对齐
vertical-align：baseline要求一个元素的基线与其父元素的基线对齐。

②上标和下标
vertical-align：sub
vertical-align：super
这两个值不改变元素的字体大小。

③底端对齐
vertical-align：bottom将元素行内框的底端与行框的底端对齐。

vertical-align：text-bottom是指行内文本的底端。

④顶端对齐
vertical-align：top
vertical-align：text-top

⑤居中对齐

⑥百分数
若为vertical-align设置一个百分数，会把元素的基线（或替换元素的底边）相对于父元素的基线升高或降低指定的量（你指定的百分数要计算为该元素line-height的百分数，而不是相对于其父元素的line-height）

⑦长度对齐
例如 vertical-align：5px；会把一个元素与对齐前相比上升5像素。并且所有垂直对齐的元素都会影响行高。
行框描述：其高度要足以包括最高行内框的顶端和最低行内框的底端，这也包括因垂直对齐上升或下降的行内框。

---

3.字间隔和字母间隔

字间隔

word-spacing（正负值均可，可继承）

字母间隔

letter-spacing（正负值均可，可继承）

间隔和对齐

---

4.文本转换

text-transform

---

5.文本装饰

text-decoration

怪异的装饰

改变装饰颜色的另一种方法（合乎规范）

---

6.文本阴影

text-shadow
（CSS2.1中没有）

---

7.处理空白符

---

8.文本方向

---