CSS文本:
属性 |
描述 |
color |
设置文本颜色 |
direction |
设置文本方向。 |
line-height |
设置行高。 |
letter-spacing |
设置字符间距。 |
text-align |
对齐元素中的文本。 |
text-decoration |
向文本添加修饰。 |
text-indent |
缩进元素中文本的首行。 |
text-shadow |
设置文本阴影。 |
text-transform |
控制元素中的字母。 |
unicode-bidi |
设置文本方向。 |
white-space |
设置元素中空白的处理方式。 |
word-spacing |
设置字间距。 |
1.缩进文本:text-indent属性;
(1)用法:text-indent 属性规定文本块中(块级元素)首行文本的缩进。允许使用负值。如果使用负值,那么首行会被缩进到左边(悬挂缩进)。
(2)可能的值:
值 |
描述 |
length |
定义固定的缩进。默认值:0。 |
% |
定义基于父元素宽度的百分比的缩进。 |
inherit |
规定应该从父元素继承 text-indent 属性的值。 |
Ps: text-indent 属性可以继承
2.水平对齐:text-align属性
(1)用法:text-align 属性规定元素中的文本的水平对齐方式。
(2)可能的值:
值 |
描述 |
left |
把文本排列到左边。默认值:由浏览器决定。 |
right |
把文本排列到右边。 |
center |
把文本排列到中间。 |
justify |
实现两端对齐文本效果。 |
inherit |
规定应该从父元素继承 text-align 属性的值。 |
ps:将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现。
3.字间隔:word-spacing 属性
(1)用法:word-spacing 属性增加或减少单词间的空白(即字间隔);
(2)关于“字”的定义:
CSS 把“字(word)”定义为任何非空白符字符组成的串,并由某种空白字符包围。这个定义没有实际的语义,它只是假设一个文档包含由一个或多个空白字符包围的字。
(3)可能的值:(允许使用负值)
值 |
描述 |
normal |
默认。定义单词间的标准空间。 |
length |
定义单词间的固定空间。 |
inherit |
规定应该从父元素继承 word-spacing 属性的值。 |
Ps: 如果指定为长度值,会调整字之间的通常间隔;所以,normal 就等同于设置为 0。允许指定负长度值,这会让字之间挤得更紧。
4.字母间隔:letter-spacing 属性
(1)用法:字母间隔修改的是字符或字母之间的间隔;
(2)可能的值:(允许使用负值)
值 |
描述 |
normal |
默认。规定字符间没有额外的空间。 |
length |
定义字符间的固定空间(允许使用负值)。 |
inherit |
规定应该从父元素继承 letter-spacing 属性的值。 |
5. 字符转换:text-transform属性
(1)用法:处理文本的大小写;
(2)可能的值:
值 |
描述 |
none |
默认。定义带有小写字母和大写字母的标准的文本。 |
capitalize |
文本中的每个单词以大写字母开头。 |
uppercase |
定义仅有大写字母。 |
lowercase |
定义无大写字母,仅有小写字母。 |
inherit |
规定应该从父元素继承 text-transform 属性的值。 |
6.文本装饰:text-decoration属性
(1)用法:text-decoration 属性规定添加到文本的修饰;
(2)可能的值:
值 |
描述 |
none |
默认。定义标准的文本。 |
underline |
定义文本下的一条线。 |
overline |
定义文本上的一条线。 |
line-through |
定义穿过文本下的一条线。 |
blink |
定义闪烁的文本。 |
inherit |
规定应该从父元素继承 text-decoration 属性的值。 |
Ps: IE、Chrome 或 Safari 不支持 "blink" 属性值。且text-decoration 值会替换而不是累积起来。
7.处理空白符:white-space属性:
(1)用法:white-space 属性设置如何处理元素内的空白。
(2)可能的值:
值 |
描述 |
normal |
默认。空白会被浏览器忽略。 |
pre |
空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
nowrap |
文本不会换行,直到遇到 <br> 标签为止。 |
pre-wrap |
保留空白符序列,但是正常地进行换行。 |
pre-line |
合并空白符序列,但是保留换行符。 |
inherit |
规定应该从父元素继承 white-space 属性的值。 |
(3)小结:
值 |
空白符 |
换行符 |
自动换行 |
pre-line |
合并 |
保留 |
允许 |
normal |
合并 |
忽略 |
允许 |
nowrap |
合并 |
忽略 |
不允许 |
pre |
保留 |
保留 |
不允许 |
pre-wrap |
保留 |
保留 |
允许 |
8.文本方向:direction属性:
(1)用法:direction 属性规定文本的方向 / 书写方向,影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
(2)可能的值:
值 |
描述 |
ltr |
默认。文本方向从左到右。 |
rtl |
文本方向从右到左。 |
inherit |
规定应该从父元素继承 direction 属性的值。 |
Ps: 对于行内元素,只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。