CSS文本设置

CSS文本设置

---

CSS文本属性可定义文本的外观
通过文本属性，我们可以改变文本的颜色，字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

---

缩进文本

• 最常见的方式是把web界面上的段落的第一行缩进
• css提供text-indent属性，可以方便的地实现文本的缩进
• 使用text-indent属性，可以使所有元素的第一行进行缩进一个给定的长度，该长度可以是负值（比如“悬挂缩进”的效果）。

使用负值的时候要格外当心文本超出浏览器窗口左边界的问题。为了避免这种显示问题，建议针对负缩进再设置一个外边距或一个内边距👇

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

• 一般来说可以为所有块级元素应用text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用text-indent属性。

如果想把一个行内元素进行“缩进”，可以用左内边距或外边距创建这种效果。

不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

• text-indent属性可以使用所有的长度单位，包括百分比值。百分数要相对于缩进元素父元素的宽度。

text-indent

JavaScript语法👇

	object.style.textIndent="50px"

值	描述
length	定义固定的缩进。默认值：0
%	定义基于父元素宽度的百分比的缩进
inherit	规定应该从父元素继承text-indent属性的值

---

水平对齐

• 影响一个元素的文本行互相之间的对齐方式的属性是text-algin。
• text-algin有四个值，分别是left、right、center和justify。
  1. left：左对齐
  2. right：右对齐
  3. center：居中对齐
  4. justify：两端对齐

text-align:center与<center>

• <center>不仅影响文本，还会把整个元素居中
• text-align不会控制元素的对齐，只影响内部的内容

提示将块级元素居中的方法是通过在这些元素上适当的设置左、右外边距

justify

• justify 的功能是两端对齐，即左右两端多放在父元素的边界上，然后调整单词和字母间的间隔，使各行的长度恰好相等。这种方法在打印领域很常见。但这在css中会有一些自己的问题

1. 如何确定两端对齐后文本的拉伸方式。例如，有些浏览器可能只在单词之间增加额外的空间，而另一些浏览器可能会把额外的空间平均分配到每个字母之间，CSS规范指出，指出如果letter-spacing属性指定为一个长度值，“用户代理不能进一步增加或减少字符间的空间”。还有一些可能会减少某些行的空间，使文本挤的更紧密。所有这些做法都会影响元素的外观，甚至改变元素的高度，这取决于用户设置的对齐选则影响了多少文本行。

letter-spacing属性增加或减少字符间的空白（字符间距）。
该属性定义了在文本字符框之间插入多少空间。

2. CSS也没有指定应当如何处理连字符。大多数两端对齐文本都使用连字符将长单词分开放在两行上，从而缩小单词之间的间隔，改善文本行的外观。不过，由于CSS没有定义连字符行为，我们也不太可能自动加连字符。因此，在CSS中，两端对齐文本看上去没有打印出来的好看。

css中没有说明如何处理连字符，因为不同的语言有不同的连字符规则

text-align

direction的属性	默认值
ltr	left
rtl	right

JavaScript语法👇

object.style.textAlign="right"

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

---

字间隔

• word-spacing属性可以改变字（单词）之间的标准间隔。其默认值normal于设置值为0是一样的。
• word-spacing属性接受一个正长度值或负长度值。前者可以使字之间的间隔增加，后者可以使字间隔拉近。

word-spacing

• 该属性定义元素中字之间插入多少空白符。、
• “字”定义为任何非空白符字符组成的串，并且由某种空白字符包围。如果指定长度值，会调整字之间的通常间隔；所以，normal就等同于设置值为0。
  JavaScript语法👇

object.style.wordSpacing="10px"

值	描述
normal	默认。定义单词间的标准空间
length	定义单词的固定空间
inherit	规定应该从父元素继承word-spacing属性的值

---

字母间隔

• letter-spacing属性与word-spacing属性的区别在于，字母间隔修改的是字符或字母之间的间隔。
• 与word-spacing属性一样，letter-spacing属性的值可取值包括所有长度。

letter-spacing

• 默认关键字是normal，相当于值是0
• JavaScript语法👇

object.style.letterSpacing="3px"

值	描述
normal	默认。定义字符间没有额外的空间
length	定义字符间的固定空间（可以使用负值）
inherit	规定应该从父元素继承letter-spacing属性的值

---

字符转换

text-transform属性处理文本的大小写。
-这个属性会改变元素中字母的大小写，而不论原文档中文本的大小写。
JavaScript语法👇

object.style.textTransform="uppercase"

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

---

文本装饰

• text-decoration属性提供了一些有意思的行为。👇

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

• JavaScript语法👇

object.style.textDecoration="overline"

-text-decoration属性规定添加到文本的修饰，颜色由“color”属性设置。

underline类似于HTML中的<u>元素
line-through类似于HTML中的<s>元素和<strike>元素

none会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观。但也不总是这样。比如链接默认会有下划线。使用none会去掉超链接的下划线。

a {
	text-decoration: none;
}

• 当多个不同装饰都与同一元素匹配，“胜出”规则会替换另一规则。

---

处理空白符

• white-space属性会影响文档中的空格、换行和tab字符的处理。
• 实际上默认的XHTML已经对空白符做了处理：把所有的空白符合并为一个空格。
• 默认值normal也是丢弃多余的空白符。使用XHTML对空白符的处理。
• JavaScript语法👇

object.style.whiteSpace="pre"

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

nowrap

• 在css中使用nowrap非常类似于HTML中用<td nowrap>将一个表单格式设置为不能换行，不过white-space值可以应用到任何元素。

总结

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

---

文本方向

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

direction

• JavaScript语法

object.style.direction="rtl"

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

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）。