CSS2学习笔记10

文本

系列文章

缩进和水平对齐

缩进

缩进文本有许多实现方法。最简单方便的方法是使用文本缩进属性 text-indent ：

text-indent
值：
LENGTH | PERCENTAGE | inherit
初始值：
0
应用于：
块级元素
继承性：
有
百分值：
相对于包含块的宽度
计算值：
对于百分数值，根据指定确定；对于长度值，则为绝对长度。

通过使用 text-indent 属性，所有元素的第一行都可以缩进一个长度（该长度甚至可以是负值）。

一般可以为所有块级元素应用 text-indent 。无法将这个属性应用到行内元素和图像之类的替换元素。

当 text-indent 设置为负值时，可以制造出悬挂缩进。但是注意首行元素可能会超过窗口的左边界。
当 text-indent 使用百分数时，是相对于缩进父元素的宽度而言。

即使插入了行分隔符，这种缩进也只应用于一个元素的第一行。

水平对齐

text-align 属性会影响一个元素中的文本行相互之间的对齐方式。

text-align
值：
left | center | right | justify | inherit
初始值：
用户代理特定的值，还可能取决于书写方向
应用于：
块级元素
继承性：
有
计算值：
根据指定确定

这几种对齐方式分别是左对齐、居中对齐、右对齐、两端对齐。

垂直对齐

行高

line-height 属性是指文本行基线之间的距离，而不是字体的大小。它确定了将各个元素框的高度增加或减少多少。
line-height 值和字体大小之差就是行间距。

text-indent
值：
LENGTH | PERCENTAGE | NUMBER | inherit
初始值：
normal
应用于：
所有元素
继承性：
有
百分值：
相对于元素的字体大小
计算值：
对于长度和百分数值是绝对值；否则，根据指定确定

在应用到块级元素时，line-height 定义了元素中文本基线之间的最小距离。

下图展示了行间距的定义：

当一个块级元素继承 line-height 时，会从父元素的 font-size 计算，而不是在子元素上计算。

垂直对齐文本

vertical-align 属性只应用于行内元素和替换元素，并且不能被继承。

text-align
值：
baseline | sub | super | top | text-top | middle | bottom | text-bottom | PERCENTAGE | LENGTH | inherit
初始值：
baseline
应用于：
行内元素和表单元格
继承性：
无
百分数：
相对于元素的 line-height 值
计算值：
对于长度和百分数值是绝对值；否则，根据指定确定
额外：
应用到表单元格时，只能识别部分值

它的一些关键字含义如下：

使用百分数设置垂直对齐时，会把元素的基线（替换元素的底边）相对于父元素的基线身高或降低指定的量（正值使元素升高，负值使元素降低）。
使用数值垂直对齐时，也是正值使元素升高指定的距离，负值使元素降低指定的距离。

除了常用的上下标外，一般来说垂直文本对齐适用于行内的图像对齐。

下图展示了 vertical-align 属性的效果：

不同vertical-align的对齐线位置
不同vertical-align的对齐效果（FireFox浏览器）

文本转换

可以使用 text-transform 属性处理文本的大小写。

text-indent
值：
uppercase | lowercase | captalize | none | inherit
初始值：
none
应用于：
所有元素
继承性：
有
计算值：
根据指定确定

默认值 none 对文本不做任何改动。uppercase 将文本中所有字母变成大写，lowercase 将文本中所有字母变成小写，capitalize 将每个单词的首字母大写。

文本装饰

text-decoration 提供了很多装饰文本的行为：

text-transform
值：
none |( underline || line-through || blink )| inherit
初始值：
none
应用于：
所有元素
继承性：
无
计算值：
根据指定确定

underline 会对元素加下划线，overline 会对元素加上划线，line-though 会加上删除线。blink 会对文本闪烁。

以下直接在HTML页面中加入了元素标签，具体显示效果取决于你的浏览器：

underline overline line-through blink

text-decoration 不能继承，没有继承性意味着文本上画的任何装饰器与父元素的颜色相同（即便后代元素本身有其它颜色）。这是因为这条装饰线是属于父元素的。
同理，父元素的装饰线可能会与垂直对齐过的子元素配合得不好。
要解决该问题，要显式声明子元素的文本装饰属性。

处理空白符

属性 white-space 会影响用户代理对源文档中的空白符的处理：

white-space
值：
normal | nowrap | pre | pre-wrap | pre-line | inherit
初始值：
normal
应用于：
块级元素
继承性：
无
计算值：
根据指定确定

浏览器处理HTML时，它已经默认将所有空白字符处理为一个空格。

下表总结了 white-space 属性的行为：

white-space属性
值 空白符 换行符 自动换行
pre-line 合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre 保留 保留 不允许
pre-wrap 保留 保留 允许

文本方向

由于存在许多从右向左读的语言，CSS2引入了一个属性来描述其方向性：

direction
值：
ltr | rtl | inherit
初始值：
ltr
应用于：
所有元素
继承性：
有
计算值：
根据指定确定

该属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向，以及两端对齐元素中最后一行的位置。
对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性（见下文）。

实际的浏览器会设置更多内部规则来兼容一些语言。

CSS还利用属性 unicode-bidi ，通过Unicode的某些功能来更好地处理这一点：

unicode-bidi
值：
normal | embed | bidi-override | inherit
初始值：
normal
应用于：
所有元素
继承性：
无
计算值：
根据指定确定

下面简要地介绍了这几个值的含义：

normal
元素不会对双向算法打开附加的一层嵌套。对于行内元素，顺序的隐式重排会跨元素边界进行。
embed
如果是一个行内元素，这个值对于双向算法会打开附加的一层嵌套。这个嵌套层的方向由 direction 属性指定。会在元素内部隐式地完成顺序重排。这对应于在元素开始处增加一个LRE（对于 direction: ltr ：U+202A）或RLE（对于 direction: rtl ：U+202B），并在元素的最后增加一个PDF（U+202C）。
bidi-override
这会为行内元素创建一个覆盖。对于块级元素，将为不在另一块中的行内后代创建一个覆盖。这说明，顺序重排在元素内部严格按 direction 属性进行；忽略了双向算法的隐式部分。这对应于在元素开始处增加一个LRO（对于 direction: ltr ：U+202D）或RL0（对于 direction: rtl ：U+202E），并在元素最后增加一个PDF（U+202C）。

文本阴影

可以使用 text-shadow 为文本加上阴影：

text-shadow
值：
none |( COLOR || LENGTH LENGTH LENGTH ?, )* ( COLOR )|| LENGTH LENGTH LENGTH ?) | inherit
初始值：
none
应用于：
所有元素
继承性：
无

默认情况是没有阴影。每个阴影都由一个颜色和3个长度值来定义，这个颜色设置了阴影的颜色。
前两个长度值确定了阴影与文本的偏移距离，第三个（可选的）长度值定义了阴影的模糊半径。负长度值会使阴影落在原始文本的左上方。
模糊半径定义为从阴影轮廓到模糊边界的距离。如果半径为2像素，模糊效果就会作用于阴影轮廓到模糊边界之间的空间。

以下是一些模糊样式及其显示效果：

#shadow1 {color: black; text-shadow: silver 2px 2px 2px;}
#shadow2 {color: white; text-shadow: 0 0 4px black;}
#shadow3 {color: black; text-shadow: 1em 1em 5px gray, -1em -1em silver;}
阴影显示效果