WEB基础之：CSS文本属性

文本属性

• • 1. 缩进和水平对齐
  • • 1.1 缩进文本
  • 2. 水平对齐
  • • 2.1 justify
    • 2.2 text-align:center 与 ` `
  • 3. 垂直对齐
  • • 3.1 行高
    • 3.2 构造文本行
    • 3.3 指定line-height 值
  • 4. 垂直对齐文本
  • • 4.1 基线对齐
    • 4.2 上标与下标
    • 4.3 底端对齐与顶 端对齐
    • 4.4 居中对齐
    • 4.5 百分数
    • 4.6 垂直对齐中的长度对齐
  • 5. 字间隔和字母间隔
  • • 5.1 字间隔word-spacing
    • 5.2 字母间隔letter-spacing
    • 5.3 间隔和对齐
  • 6. 文本转换Text Transformation
  • 7. 文本装饰Text Decoration
  • • 7.1 怪异的装饰
  • 8. 文本渲染Text Rendering
  • 9. 文本阴影Text Shadows
  • 10 处理空白符Handling Whitespace
  • 11. 换行和断字Wrapping and Hyphenation
  • • 11.1 Hyphenation
    • 11.2 换行Wrapping Text
  • 12. 写入模式Writing Modes
  • • 12.1 CSS书写模式
    • 12.2 文本方向direction
    • 12.3 unicode-bidi

文本属性可定义文本的外观。可以控制文本相对于该行余下内容的位置、使其作为上标、加下划线、以及改变大小写等。甚至还可以有限地模拟打字机的Tab键的使用。

1. 缩进和水平对齐

1.1 缩进文本

将Web 页面上的段落的第一行缩进。通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 3 em：

p {text-indent: 3em;}

一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

**注意：**如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

• 设置负值

为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：

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

• 设置百分数

如果将缩进值设置为10%，所影响的第一行会缩进其父元素宽度的10%。

div {width: 400px;}
p {text-indent: 10%}

• 继承

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}

<div id="outer">
<div id="inner">This first line of the DIV is indented by 50 pixels.
<p>this paragraph is 200px wide, and the first line of the paragraph is indented 50px. This is because computed values for 'text-indent' are inherited, instead of the declared values.</p>
</div>
</div>

2. 水平对齐

text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

西方语言都是从左向右读，所有 text-align 的默认值是 left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。对于希伯来语和阿拉伯语之类的的语言，text-align 则默认为 right，因为这些语言从右向左读。

属性值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

**提示：**将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。

2.1 justify

justify
justify 是水平对齐属性，它会带来自己的一些问题。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。

但需要做以下考虑：
要由用户代理（而不是 CSS）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。例如，有些浏览器可能只在单词之间增加额外的空间，而另外一些浏览器可能会平均分布字母间的额外空间（不过 CSS 规范特别指出，如果 letter-spacing 属性指定为一个长度值，“用户代理不能进一步增加或减少字符间的空间”）。还有一些用户代理可能会减少某些行的空间，使文本挤得更紧密。所有这些做法都会影响元素的外观，甚至改变其高度，这取决于用户代理的对齐选择影响了多少文本行。

​ CSS 也没有指定应当如何处理连字符（注1）。大多数两端对齐文本都使用连字符将长单词分开放在两行上，从而缩小单词之间的间隔，改善文本行的外观。不过，由于 CSS 没有定义连字符行为，用户代理不太可能自动加连字符。因此，在 CSS 中，两端对齐文本看上去没有打印出来好看，特别是元素可能太窄，以至于每行只能放下几个单词。当然，使用窄设计元素是可以的，不过要当心相应的缺点。

注1：CSS 中没有说明如何处理连字符，因为不同的语言有不同的连字符规则。规范没有尝试去调和这样一些很可能不完备的规则，而是干脆不提这个问题。

2.2 text-align:center 与 <CENTER>

您可能会认为 text-align:center 与 <CENTER> 元素的作用一样，但实际上二者大不相同。<CENTER>不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。

3. 垂直对齐

3.1 行高

line-height 定义了该元素中基线之间的最小距离。不允许使用负值。

3.2 构造文本行

文本行中的每个元素都会生成一个内容区，这由字体的大小确定。这个内容区则会生成一个行内框(inline box)，如果不存在其他因素，这个行内框就完全等于该元素的内容区。line-height设置的行间距就是增加或减少各行内框高度的因素之一。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3GMrHlfP-1608194796762)(C:\Users\63291\AppData\Roaming\Typora\typora-user-images\image-20201106080458116.png)]

3.3 指定line-height 值

line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

line-height 值从父元素继承时，要从父元素计算，而不是在子元素上计算，结果可能是line-height 小，font-size大，造成文本不可读问题。解决办法是：原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。

4. 垂直对齐文本

vertical-align属性只适用于内联(行内)元素和替换元素，如图像和表单输入。vertical-align属性不能继承。

4.1 基线对齐

vertical-align: baseline要求一个元素的基线与其父元素的基线对齐。这个对齐规则很重要，因为它会导致某些 web 浏览器总是将替换后的元素的底边放在基线上，即使该行中没有其他文本。

4.2 上标与下标

vertical-align: sub会使一个元素变成下标，这意味着其基线(如果它是一个替换元素，则是其底端)相对于其父元素的基线降低。

vertical-align: super 将元素的基线(或替换元素的底端)相对于父元素的基线升高。

4.3 底端对齐与顶 端对齐

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

vertical-align: text-bottom 指行内文本的底端。替换元素或任何其他类型的非文本元素会忽略这个值。

vertical-align: top: 与bottom效果相反。

4.4 居中对齐

middle会把行内元素框的中点与父元素基线上方0.5ex处的一个点对齐。下面的1ex相对于父元素的font-size定义。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kxoBcovp-1608194796767)(C:\Users\63291\AppData\Roaming\Typora\typora-user-images\image-20201106082901542.png)]

由于大多数用户代理将“1ex”视为 1 / 2 em，所以“middle”通常将元素的垂直中点与父元素基线之上的 1 / 4 em 处的一个点对齐，

4.5 百分数

vertical-align 设置为一个百分数，会把元素的基线(或替换元素的底端)相对地父元素的基线升高或降低指定的量。正百分数值会使元素升高，负值则会使其降低。

4.6 垂直对齐中的长度对齐

它把一个元素升高或降低指定的距离。

p {vertical-align: 5px;}

5. 字间隔和字母间隔

5.1 字间隔word-spacing

word-spacing: 用于修改字间隔。默认值normal = 0。正值增加字间隔，负值减小字间隔。

p.spread {
    word-spacing: 0.5em;
}

p.tight {
    word-spacing: -0.5em;
}

p.base {
    word-spacing: normal;
}

p.norm {
    word-spacing: 0;
}

<p class="spread">
    The spaces between words in this paragraph will be increased by 0.5em.
</p>
<p class="tight">
    The spaces between words in this paragraph will be decreased by 0.5em.
</p>
<p class="base">The spaces between words in this paragraph will be normal.</p>
<p class="norm">The spaces between words in this paragraph will be normal.</p>

5.2 字母间隔letter-spacing

letter-spacing属性修改的是字符或字母之间的间隔。

p.letter_spacious {
    letter-spacing: 0.5em;
}
p.letter_tight {
    letter-spacing: -0.2em;
}

<p class="letter_spacious">
    The letters in this paragraph are spread out a bit.
</p>
<p class="letter_tight">
    The letters in this paragraph are a bit smashed together.
</p>

5.3 间隔和对齐

word-spacing的值可能受text-align影响，如果一个元素是对齐的，字母和单词之间的空格可以改变，以使文本两端对齐。

letter-spacing的会值不会受到text-align影响，如果letter-spacing的值是normal，字符间的间隔就可能改变以文本两端对齐。

p {
    letter-spacing: 0.25em;
}
small {
    font-size: 50%;
    letter-spacing: 0.25em;
}

<p>
    This spacious paragraph features
    <small>tiny text that is just as spacious</small>, even though the author
    probably wanted the spacing to be in proportion to the size of the text.
</p>

如果字母间隔与文本大小成比例，得到字母间隔的路径一办法是显式地设置如下：

p {
    letter-spacing: 0.25em;
}
small {
    font-size: 50%;
    letter-spacing: 0.25em;
}

6. 文本转换Text Transformation

text-transform 属性用于处理文本的大小写。

属性值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 text-transform 属性的值。

**注：**不同的用户代理可能会用不同的方法来确定单词从哪里开始，相应地确定哪些字母要大写。例如，文本 “w3-school” 可以用两种方式显示：“Heading-one” 和 “Heading-One”。CSS 并没有规定哪一种是正确的，所以这两种都是可以的。

在应用text-transform: capitalize 时，CSS只要求用户代理确保每个单词的首字母大写，并忽略余下部分。

7. 文本装饰Text Decoration

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

none值会关闭原应用到一个元素上的所有装饰。

将一个元素结合多种装饰。

p.topper {
    text-decoration: overline underline;
    /*text-decoration: underline; 如果写成这个，则underline装饰会胜出，并完全取代另一个值。*/
}

7.1 怪异的装饰

<p>
  This paragraph, which is black and has a black underline, also contains
  <strong>strongly emphasized text</strong> which has the black underline
  beneath it as well.
</p>

1. text-decoration不是继承而来的。没有继承意味着文本上画的任何装饰线与父元素的颜色相同，即使后代元素本身有其他颜色也是如此。

p {
  text-decoration: underline;
  color: black;
}
strong {
  color: gray;
}

2. 当text-decoration和vertical-align结合使用时， 会出现因为strong元素没有自己的装饰，但是它在一个有上划线的元素中这个上划线穿过了strong元素。

p {
  text-decoration: overline;
  font-size: 12pt;
}
strong {
  vertical-align: 50%;
  font-size: 12pt;
}

3. 尝试在strong元素上禁用文本装饰

p {
  text-decoration: underline;
  color: black;
}
strong {
  color: silver;
  text-decoration: none;
}

在火狐与IE浏览器上测试发现，text-decoration: none并不生效。

4. 不违反规范改变装饰的颜色

p {
    text-decoration: underline;
    color: black;
}
strong {
    color: silver;
    text-decoration: underline;
}

8. 文本渲染Text Rendering

text-rendering告诉渲染引擎工作时如何优化显示文本。 浏览器会在渲染速度、易读性（清晰度）和几何精度方面做一个权衡。目前只有Firefox和google支持此属性；而且它是一个SVG（可缩放矢量图形）属性，它不被定义在任何CSS标准里，但是支持用户代理的人却将其视为 CSS。。

属性值	描述
auto	浏览器将根据情况来优化文本速度、可读性、精度。实际中，Gecko内核浏览器比如FF下如果字体大小是20px或者更大，将采用optimizel Legibility属性，否则使用optimizeSpeed属性。
optimizeSpeed	Gecko内核的浏览器将强调可读性和几何精度，同时绘制文本渲染速度，禁用字距和连写。
optimizeLegibility	Gecko内核的浏览器将强调可读性和几何精度，同时绘制文本渲染速度，启用字距和连写。
geometricPrecision	目前这个属性的意义和optimizelegibility一样

9. 文本阴影Text Shadows

默认情况下，文本没有投影。否则理论上可以定义一个或多个阴影。每个阴影都由一个颜色和三个长度值定义。

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

负长度值会使阴影落在原文本的左上方。

• 语法规则如下：

text-shadow: h-shadow v-shadow blur color;	

p.cl1 {
    color: black;
    text-shadow: 2px 2px 4px gray;
}
p.cl2 {
    color: white;
    text-shadow: 0 0 4px black;
}
p.cl3 {
    color: black;
    text-shadow: 1em 0.5em 5px #ff0000, -0.5em -1em hsla(100, 75%, 25%, 0.33);
}

10 处理空白符Handling Whitespace

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

使用white-space可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行；

属性值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的<pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到<br/> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

p.white_space {
	white-space: normal;
}

<p class="white_space">This    paragraph          has
    many            spaces    in           it.
</p>

• 总结

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

• 设置Tab大小Setting Tab Sizes

white-space 中默认每个Tab等于4个空格。

tab-size: 10px

请注意，当“white-space”的值导致空格折叠时，“tab-size”实际上被忽略(参见表 6-1)。在这种情况下，值仍然会被计算，但是无论源中出现多少个选项卡，都不会有可见的效果。

11. 换行和断字Wrapping and Hyphenation

11.1 Hyphenation

属性值	描述
none	即使文字中的字符表示换行符，文字也不会在换行符处断开。行将只包含在空白处。
manual	只有在单词内部的字符表示换行的情况下，单词才会被断开。有关详细信息，请参阅下面的建建议的换行时机。
auto	只要遵循它所选择使用的任何规则，浏览器就可以自由地在合适的连字点处自动分词。但是，建议的换行时机（请参阅下面的建议换行时机）将覆盖自动断点选择。

注：该auto设置的行为取决于语言被正确标记，以便可以选择相应的断字规则。您必须使用lang这个HTML属性指定一种语言，以确保自动连字符应用于您所选择的语言。

• 建议换行时机

有两个Unicode字符可用于在文本中手动指定潜在的换行点：

U + 2010（HYPHEN）：该“硬”连字符表示可见的换行时机。即使该行实际上没有被断开，连字符仍然呈现。

U + 00AD（SHY）：一个不可见的“软”连字符。这个字符不是可见的，它只是标志着浏览器应该断行的位置。在HTML中，您可以使用­插入一个软连字符。

.cl01 {
  hyphens: auto;
}
.cl02 {
  hyphens: manual;
}
.cl03 {
  hyphens: none;
}

<p class="cl01">
  Supercalifragilisticexpialidocious antidisestablishmentarian ism.
</p>
<p class="cl02">
  Supercalifragilisticexpialidocious antidisestablishmentarian ism.
</p>
<p class="cl02">
  Super&#xad;cali&#xad;fragi&#xad;listic&#xad;expi&#xad;ali&#xad; docious
  anti&#xad;dis&#xad;establish&#xad;ment&#xad;arian&#xad;ism.
</p>
<p class="cl03">
  Super&#xad;cali&#xad;fragi&#xad;listic&#xad;expi&#xad;ali&#xad; docious
  anti&#xad;dis&#xad;establish&#xad;ment&#xad;arian&#xad;ism.
</p>

11.2 换行Wrapping Text

“overflow-wrap”的复杂之处在于它的历史和实现。从前有一个叫做“word-wrap”的属性，它的功能与“overflow-wrap”完全相同。两者是如此相似，以至于规范明确规定用户代理“必须将‘word-wrap’作为‘overflow-wrap’属性的替代名称，就好像它是‘overflow-wrap’的缩写一样。”

遗憾的是，浏览器并不总是这样做，“自动换行”得到了更好的支持。出于这个原因，在向后兼容性中，这两种方法都很常见:

pre {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

• 不同之处

“overflow-wrap”只有在内容确实溢出时才会出现;因此，当有机会在源代码中使用空白来换行时，“overflow-wrap”将接受它。

“word-break: break-all”将在内容到达换行边缘时进行换行，而不考虑行前面的任何空格。

12. 写入模式Writing Modes

12.1 CSS书写模式

CSS书写模式_CSS, writing-modes 教程_w3cplus

12.2 文本方向direction

direction 属性规定文本的方向 / 书写方向。该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。不支持双向文本的用户代理可以忽略这个属性。

属性值	描述
ltr	默认。文本方向从左到右。
rtl	文本方向从右到左。
inherit	规定应该从父元素继承 direction 属性的值。

*:lang(ar),*:lang(he) {
	direction: rtl;
}

**注释：**对于行内元素，只有当unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。

12.3 unicode-bidi

• normal

元素不会对双向算法打开附加的一层嵌套。对于行内元素，顺序的隐式重排会跨元素边界进行。

• embed

如果是一个行内元素，这个值对于双向算法会打开附件的一层嵌套。这个嵌套层的方向由 direction 属性指定。会在元素内部隐式地完成顺序重排。这对应于在元素开始处增加一个 LRE（对于 direction:ltr ：U+202A）或 RLE（对于 direction:rtl ：U+202B），并在元素的最后增加一个 PDF（U+202C）。

• bidi-override

这会为行内元素创建一个覆盖。对于块级元素，将为不在另一块中的行内后代创建一个覆盖。这说明，顺序重排在元素内部严格按照 direction 属性进行；忽略了双向算法的隐式部分。这对应于在元素开始处增加一个 LRO（对于 direction:ltr ：U+202D）或 RLO（对于 direction:rtl ：U+202E），并在元素最后增加一个 PDF（U+202C）。