CSS知识点梳理(6)-文本属性

缩进

首先确定本章用的block direction,inline direction两个术语。

• 块方向(block direction): 是当前写入模式中默认放置块元素的方向，在英语中，从上到下
• 内联方向（inline direction）：在一个块中吸入内联元素的方向，在英语中，从左到右。

text-indent

values:             <length> | <percentage>
Initial value:      0
Applies to:         块元素
Precentages:        相对于包含块的宽度
Computed value:     百分百的值，如所指定，也是百分百;长度单位，则是绝对长度
Inherited：         Yes
Animatable：        Yes

• 通常，可以text-index应用于生成块框的任何元素，并且在内联方向上缩进。不能将其应用于内联元素或替换元素，例如img,然而，如果在块级元素的第一行中有图像，则该图像与该行中的其余文本一起缩进。
• 如果想要‘缩进’ 内联元素的第一行，则可以是使用padding-left或margin-left来创建效果。
• text-indent仅应用于元素的第一行，即使插入了换行符。

text-align

Values:             start|end|left|right|center|justify|match-parent
Initial value:      CSS3: start. CSS2.1: 用户代理指定
Applies to:         Block-level elements
Computed value:     给定的值
Inherited：         Yes

• 在 CSS3 中，left,right分别映射到start，end的边缘。
• text-align不控制元素的对齐，它仅是控制块级元素内的内联内容.且是在水平方向上的。

内联对齐（Inline Alignment），“垂直对齐”

上面我们介绍了沿内联方向（inline direction）的对齐方式，现在要介绍沿块级方向（block direction）进行内联元素的垂直对齐方式。

line-height

Values:         <number>|<lenght>|<percentage>|normal
Initial Value:  normal
Allies to:      All elements(常见于块级元素或替换元素的文本)
Percentages:    相对于元素的字体大小
Inherited：     Yes
Animatable；    Yes

• line-height属性是指文本行的基线之间的距离（the distance between the baselines of lines of text），而不是字体的大小。它确定增加或减少每个元素框（element’s box）的高度的数值。
• line-height控制着行间距（leading）.行距是超出字体大小的文本行之间多余的空间。换句话讲，就是line-height值和字体大小之间的差距。
• line-height当应用于块级元素时，它指定了该元素内 文本基线之间的最小距离。文本基线是可变的。

行的组成

• 一行文字中的每一个元素都会生成一个内容区域（content area），它是由字体大小决定。 反过来，此内容区域会生成一个行内框（inline box）。行内框在没有任何其他因素的情况下，与内容区域完全相同。行间距（leading)是由line-height增加或减少了行内框的高度所产生的。
• 确定元素的行间距: line-height计算值 减去 font-size计算值。这个值可以是负数。然后将行间距一分为二，加在内容区域的顶部和底部,就是该元素的行内框了。
• 每一行都有一个隐藏的行框，行框的高度由行内框决定，行框的高度需要将最高行内框的底部和最低行内框的底部刚好包裹起来。
• 一些术语基本定义
  1. line-height： 文本行基线之间的距离，而不是字体大小
  2. content area(内容区): 非替换行内元素，内容区是由元素中字符生成的框；替换元素中，内容区的高度是元素的高度+内外边距+边框值
  3. leading(行间距)：line-height与font-size值之差。这个值一分为二，分别添加到内容区的顶部和底部。行间距只应用于非替换元素。
  4. inline box(行内框): 行内框是通过向内容区域增加行间距来描述的。非替换行内元素，行内框的高度刚好等于line-height的值；替换元素，元素的行内框高度恰好等于内容区的高度，因为行间距不应用到替换元素。

vertical-align

相对于行框的“垂直”对齐方式，即沿块/垂直方向如何放置它们。在 CSS 中，vertical-align属性仅应用于行内元素和可替换元素（如，images, form inputs）. vertiacl-align是不可继承属性

Values:         baseline|sub|supper|top|text-top|
                middle|bottom|text-bottom|<length>|<percentage>
Initial value:  baseline
Applies to:     inline elelents, table cells, replaced elements
Percentages:    相对于该元素的`line-height`
Inherited:      No
Animatable:     <length>,<percentage>

• baseline: 元素基线与其父元素的基线对齐。如果元素没有基线，比如可替换元素 images，fomr input，那么该元素的底部与父元素的基线对齐。
• sub/supper: 元素的基线（或底，如果是替换元素）位于父元素的基线下面/上面。
• bottom: 将元素的底部与行框的底部对齐
• bootom-text: 将元素的底部与文本框（text box：父元素的字体大小）的底部对齐
• middle: 通常用于images。是内联元素的中间比父元素的基线高出0.5ex。ex：字母x的高度。
• <percentage>: 元素的基线（或替换元素的底部）同父元素基线相比，升高/降低的百分百。该百分百是相对于元素的line-height，而不是父元素。
• <length>: 将元素上移或下移声明的距离。
  重要点： 垂直对齐的文本不会成为另一行的一部分，也不会与其他行中的文本重叠。任何垂直对齐的元素都会影响到行框的高度，因为他是最高行内框的顶部与最低行内框的底部之间的间距

单词间距（word Spacing）/ 字母间距（Leter Spacing）

            word-spacing / letter-spacing

Values:         <length>|normal
Initial value:  normal (0)
Applies to:     All elements
Inherited:      Yes
Animatable:     Yes

间距和对齐 （Spacing and Alignment）

需要注意的，-spacing空间的计算值是继承的，因此具有较大或较小文本的子元素和其父元素的间距一致，看起来很不协调

text-transform

Values:         uppercase|lowercase|capitalize|none
Initial value:  none
Applies to:     All elements
Computed value: As specified
Inherited:      Yes
Animatable:     No

capitalize,CSS 仅要求浏览器确保每个单词的首字母大写，忽略单词其余部分。

text-decoration

Values:             none|[underline||overline||line-through||blink]
Initial value:      none
Applies to:         All elements
Inherited:          No
Animatable:         No

一些怪异情况：

• text-decoration是不可继承的。文本的装饰线与父元素具有相同的颜色，即使子元素设置了不同的颜色。所以也要在子元素设置text-decoration: none来清除。
• text-decoration与vertical-align一起使用时，也经常出现怪异情况。例如，sup 元素本身没有装饰线，但由于在有上划线的元素升高，因此上划线也’切入‘了 sup 元素中间。

text-shadow

values:         h-showdow v-showdow blur-radius color | none
Initial vlaue:  none
Applies to:     All elements
Inherited:      No
Animatable:     Yes

• 默认情况下文本没有阴影。但可以定义一个或多个阴影。阴影定义：水平阴影位置，垂直阴影位置，模糊半径，阴影颜色。前 2 个必须，后 2 个可选。模糊半径默认值为 0，阴影颜色默认值为文本颜色。
• **注意：大量的文本阴影或具有非常大的模糊半径的文本，会导致性能下降，特别是在低功耗和 CPU 受限的情况下（如移动设备）。

white-space

Values:         normal|nowrap|pre|pre-wrap|pre-line
Initial value:  normal
Applies to:     All elements
Inherited:      No
Animatble:      No

white-space属性，影响浏览器如何处理单词和文本行之间的空白。

• normal: 丢弃额外的空格。换行符被转换为空格，多个空格被转换为单个空格。
• nowrap: 阻止文本在元素中换行，除非使用<br>。
• pre：同在pre元素中一样，保留空格和换行符。
• pre-wrap: 保留空白符序列，但正常的进行换行。
• pre-line： 合并空白符序列，但是保留换行符。

Value	Whitespace(空白符序列)	Line feeds(换行符)	Auto line wrapping(自动换行)
normal	Collapsed	Ignored	Allowed
nowrap	Collapsed	Ignored	Prevented
pre	Preserved	Honored	Prevented
pre-wrap	Preserved	Honored	Allowed
pre-line	Collapsed	Honored	Allowed

换行与连字符

hyphens

Values:         manual|auto|none
Initial value:  manual
Applies to:     All elements
Inherited:      Yes
Animatabale:    No

hyphens告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符，也可以控制浏览器如何使用。

word-break

Values:         normal|break-all|keep-all
Initial value:  normal
Applies to:     All elements
Inherited:      Yes
Animatable:     Yes

当文本太长而不能放在一行时，会自动换行（soft warpped）。换行符、<br>则是硬换行（hard wraps）。

• normal: 文本正常换行，在单词之间（英文中，有空格）断行。
• break-all: 在任何 2 个字符之间都可以断行，即使在一个单词中间
• keep-all： 阻止换行。同white-space:pre类似.对于 CJK(中文、日文、韩文)文本不断行。Non-CJK 文本表现同normal。

Value	Non-CJK	CJK	Hyphenation permitted
normal	As usual	As usual	Yes
break-all	After any character	After any character	No
keep-all	As usual	Around sequences	Yes

line-break

overflow-wrap

writing Modes

writing-mode

text-orientation

direction / unicode-bidi

direction,inicode-bidi这一对属性可以通过改变内联基线的方向来改变文本的方向。
CSS 规范警告在 HTML 文档中不要使用direction，unicode-bidi属性，因为用户可以关闭 CSS 样式，建议使用 HTML<bdo>标签，dir属性。

<!-- bod  stands fo Bi-Directional Override -->
<bdo dir="rtl">This text will go right-to-left</bdo>