CSS（2）
字体和文本样式
先来看看基础文本和字体样式，其实大多数我们都在作业或者线下体验课中用过，先列出来一些重要的属性吧
font
| 值 | 描述 |
|---|---|
| font-style | 规定字体样式 |
| font-variant | 规定字体异体 |
| font-weight | 规定字体粗细 |
| font-size/line-height | 规定字体尺寸和行高 |
| font-family | 规定字体系列 |
| caption | 定义被标题控件（例如按钮，下拉列表等）使用的字体 |
| icon | 定义被图标标记使用的字体 |
| menu | 定义被下拉列表使用的字体 |
| message-box | 定义被对话框使用的字体 |
| small-caption | caption字体的小型版本 |
| status-bar | 定义被窗口状态栏使用的字体 |
font是一个简写属性，用于一次设置字体的两个或更多方面。
使用icon等关键字可以适当地设置元素的字体，使之与用户计算机环境中的某个方面一致。如果没有使用这些关键词，至少要指定字体大小和字体系列。
可以按顺序设置如下属性：
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
可以不设置其中的某个值，未设置的属性会使用其默认值。
font-family
| 值 | 描述 |
|---|---|
| family-name ,generic-family | 用于某个元素的字体族名称或/及类族名称的一个优先表。默认值取决于浏览器。 |
| inherit | 规定应该从父元素继承字体系列。 |
在使用font-family时，可以一次规定多个系列，当前一个字体系列不可使用时，系统会自动降级为后一个系列，以此类推直到找到可用的系列。
font-size
| 值 | 描述 |
|---|---|
| xx-small x-small small medium large x-large xx-large | 将字体的尺寸设置为不同的尺寸，从xx-small到xx-large |
| smaller | 将font-size设置为比父元素更小的尺寸 |
| larger | 将font-size设置为比父元素更大的尺寸 |
| length | 将font-size设置为一个固定值 |
| % | 将font-size设置为基于父元素font-size大小的一个百分比的值 |
| inherit | 规定从父元素继承字体尺寸 |
font-style
| 值 | 描述 |
|---|---|
| normal | 默认值 |
| italic | 斜体字体样式 |
| oblique | 倾斜的字体样式 |
| inherit | 从父元素继承字体样式 |
对于italic和oblique，都是倾斜字体，但是oblique是使原本没有倾斜的字体变得倾斜，而italic本就指的是斜体字。（对于某些不常用的字体没有italic效果，这时就要用到oblique了~）
color
这个不用多讲，就是字体的颜色。
font-weight
| 值 | 描述 |
|---|---|
| normal | 标准的字符，默认值 |
| bold | 粗体字符 |
| bolder | 更粗的字符 |
| lighter | 更细的字符。 |
| 100 200 300 400 500 600 700 800 900 | 定义由粗到细的字符，400等同于normal，700等同于bold |
| inherit | 规定从父元素继承字体的粗细。 |
这个也蛮好理解的，不多解释了。
letter-spacing（字符间距）
| 值 | 描述 |
|---|---|
| normal | 默认值，规定字符间没有额外的空间。 |
| length | 定义字符间的固定空间（可以使用负值） |
| inherit | 从父元素继承字符间距属性值 |
这个用的时候知道length可以设置为负的，靠的更近就好了。
word-spacing（字间距）
字符和字到底有什么区别？
CSS 把“字（word）”定义为任何非空白符字符组成的串，并由某种空白字符包围。
如何理解？
this is some text.
在这段文字中，每个空格就是分隔字（word）的分隔符。
但是呢，对于中文，例如以下
今天天气真好，你吃饭了吗？
你会发现，word-spacing属性对它一点用都没有。因为它没有空白来分开。
| 值 | 描述 |
|---|---|
| normal | 默认值。 |
| length | 定义字之间的固定空间（也可以是负的） |
| inherit | 从父元素继承字间距属性值 |
line-height（行高）
| 值 | 描述 |
|---|---|
| normal | 默认值 |
| number | 设置数字，该数字会与当前字体尺寸相乘来设置行间距 |
| length | 设置固定的行间距 |
| % | 基于当前字体尺寸的百分比行间距 |
| inherit | 从父元素继承行高属性值 |
行高其实也没什么好说的。主要是记得number和百分比的属性值是根据当前字体尺寸的倍数或者百分比设置的就好。
text-align（文本对齐）
| 值 | 描述 |
|---|---|
| left | 文本居左对齐 |
| right | 文本居右对齐 |
| center | 文本居中对齐 |
| justify | 文本两端对齐 |
| inherit | 从父元素继承文本对齐属性值 |
- justify的一些问题
值 justify 可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。不过在 CSS 中，还需要多做些考虑。
要由用户代理（而不是 CSS）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。例如，有些浏览器可能只在单词之间增加额外的空间，而另外一些浏览器可能会平均分布字母间的额外空间（不过 CSS 规范特别指出，如果 letter-spacing 属性指定为一个长度值，“用户代理不能进一步增加或减少字符间的空间”）。还有一些用户代理可能会减少某些行的空间，使文本挤得更紧密。所有这些做法都会影响元素的外观，甚至改变其高度，这取决于用户代理的对齐选择影响了多少文本行。
CSS 也没有指定应当如何处理连字符（注1）。大多数两端对齐文本都使用连字符将长单词分开放在两行上，从而缩小单词之间的间隔，改善文本行的外观。不过，由于 CSS 没有定义连字符行为，用户代理不太可能自动加连字符。因此，在 CSS 中，两端对齐文本看上去没有打印出来好看，特别是元素可能太窄，以至于每行只能放下几个单词。当然，使用窄设计元素是可以的，不过要当心相应的缺点。
注1：CSS 中没有说明如何处理连字符，因为不同的语言有不同的连字符规则。规范没有尝试去调和这样一些很可能不完备的规则，而是干脆不提这个问题。
text-shadow
先说说text-shadow语法，因为它是CSS3的新属性
text-shadow: h-shadow v-shadow blur color；
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置。允许负值。 |
| v-shadow | 必需，垂直阴影的位置。允许负值。 |
| blur | 可选，模糊的距离。 |
| color | 可选，阴影的颜色。 |
使用时，可以叠加多个text-shadow，以实现一些艺术字的效果。
text-decoration（文本装饰效果）
| 值 | 描述 |
|---|---|
| none | 默认，定义标准文本 |
| underline | 规定文本下划线 |
| overline | 定义文本上划线 |
| line-through | 定义穿过文本的一条线（删除线） |
| blink | 定义闪烁的文本 |
| inherit | 定义从父元素继承文本装饰效果属性值 |
这个删除线，在HTML中是使用<del></del>来实现的~。
行⑧，今天就总结这么多。明天再来总结后面的知识。
