《CSS权威指南第三版》第六章-文本属性的读书笔记

第6章 文本属性

1. 缩进和水平对齐
   1. 缩进文本

text-indent的值有<length>、<percentage>、inherit。具有继承性。百分数针对的是父元素宽度。

p{text-indent:3em;}所有段落首行缩进3em。

用于块级元素，无法用于行内元素。

可以设置负值，建议针对负缩进设置边距。

p{text-indent:-4em;padding-left:4em;}

2. 水平对齐

text=align在CSS2.1的值有left、center、right、justify、inherit。具有继承性。应用于块级元素。

2. 垂直对齐
   1. 行高

line-height的值有<length>、<percentage>、<number>、normal、inherit。具有继承性。百分数是相对于元素的字体大小。

1. 构造文本行

文本行中的每个元素都会生成一个内容区，这由字体的大小确定。这个内容区则会生成一个行内框，如果无其他因素，行内框完全等于内容区。

确定给定元素的行间距，只需将line-height的计算值减去font-size的计算值。

2. 指定line-height值

line-height值默认通常是字体大小的1.2倍。em、ex和百分数值都相对于font-size计算。

3. 行高和继承

line-height值从父元素继承时，要从父元素计算而不是子元素。建议指定一个数，由它设置缩放因子：

body{font-size:10px;}

div{line-height:1;}

p{font-size:18px;}

缩放因子是继承值而不是计算值。

2. 垂直对齐文本

vertical-align的值有baseline（默认）、sub、super、top、text-top、middle、bottom、text-bottom、<percentage>、<length>、inherit。无继承性。应用于行内元素和表单元格。

1. 基线对齐

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

2. 上标和下标

vertical-align:sub声明会使一个元素变成下标。只降低元素的基线而不改变字体大小。super同理，升高元素的基线。

3. 底端对齐

vertical-align:bottom将元素行内框的底端与行框的底端对齐。vertical-align:text-bottom是指行内文本的底端。

4. 顶端对齐

vertical-align:top和vertical-align:text-top与底端对齐类似。

5. 居中对齐

vertical-align:middle往往应用于图像。会把行内元素框的中点与父元素基线上方0.5ex处的一个点对齐。

6. 百分数

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

7. 长度对齐

vertical-align会把一个元素升高或降低指定的距离。正长度值是升高，负长度值是降低。所有垂直对齐的元素都会影响行高。

3. 字间隔和字母间隔
   1. 字间隔

word-spacing的值有<length>、normal、inherit。用于描述字/单词之间的间隔，具有继承性。值分正负。

2. 字母间隔

letter-spacing的值有<length>、normal、inherit。用于描述字符或字母之间的间隔。具有继承性。

3. 间隔和对齐

word-spacing的值可能受到text-align属性值的影响。如果为letter-spacing指定长度值，字符间隔不会受text-align影响。

一般地，一个元素的子元素会继承该元素的计算值。

4. 文本转换

text-transform的值有uppercase、lowercase、capitalize、none、inherit。具有继承性。

capitalize只对每个单词的首字母大写。

5. 文本装饰

text-decoration的值：

1. none
2. underline下划线，overline上划线，line-through贯穿线，blink文本闪烁
3. inherit

注意，文本装饰没有继承性，这可能使得文本的装饰显得怪异。

6. 文本阴影

CSS2包含文本阴影的支持，CSS2.1因为浏览器的支持问题没有保留这个属性。

text-shadow无继承性。格式形如：

text-shadow:green 5px 0.5pm 5px;

首先描述阴影颜色，第一个数字是阴影向右偏移的长度（向左偏移是负数），第二个数字是阴影向下偏移的长度（向上偏移是负数），第三个数字可选，定义阴影的模糊半径。

1. 处理空白符

white-space属性可影响用户代理对源文档中的空格、换行和Tab字符的处理。

值有normal、nowrap、pre、pre-wrap、pre-line、inherit。无继承性。详细的属性行为：本书P.162； http://www.w3school.com.cn/cssref/pr_text_white-space.asp

2. 文本方向

direction属性的值有ltr、rtl、inherit。具有继承性。

ltr：left to right，rtl：right to left。

unicode-bidi属性的值有normal、embed、bidi-override、inherit。无继承性。 http://www.w3school.com.cn/cssref/pr_unicode-bidi.asp