文本
CSS文本属性可以定义文本的外端,可以改变文本的颜色、字符间距,对齐文本、装饰文本、对文本进行缩进等。
缩进文本
text-indent属性可以实现文本缩进。
通过使用text-indent属性,所有元素的第一行都可以所见一个给定的长度,甚至可以是负值。最常用的是将段落的首行缩进。
p {text-indent: 5em;}
注意:所有块级元素都可应用text-indent属性,行级元素的第一行缩进可用左内边距或外边框。
- 使用负值
p {text-indent: -5em}
- 使用百分比值
百分数要相对于缩进元素负元素的宽度。
如下缩进值是父元素的20%,即100个像素。
div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragraph</p>
</div>
- 继承
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragraph.</p>
</div>
</div>
以上标记的段落也会缩进50像素,这是因为这个段落继承了id为inner的div元素的缩进值。
水平对齐
text-align属性影响元素中文本对齐方式。
- left 左对齐
- right 右对齐
- center 居中
提示:块级元素或表元素居中,要适当设置左、右边距。 - CENTER 不仅影响文本,还会把整个元素居中。
- justify 两端对齐
字间隔
word-spacing属性可以改变字(单词)之间的标准距离。默认normal值为0.
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
This is a paragraph. The space between words will be increased.
</p>
<p class="tight">
This is a paragraph. The space between words will be decreased.
</p>
字母间隔
letter-spacing属性修改字符或字母间隔。
h1 {letter-sapcing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>
字符转换
text-transform属性处理文本大小写。
- none 对文本不做任何改动
- uppercase 全大写
- lowercase 全小写
- capitalize 首字母大写
文本装饰
text-decoration属性:
- none 关闭所有装饰
- underline 下划线
- overline 上划线
- line-through 贯穿线
- blink 文本闪烁
如果两个装饰都与同一元素匹配,胜出规则的值会取代另一个值。
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}
如上所有class为stricken的h2元素都只有一个贯穿线,而没有上划线与下划线。
处理空白符
white-space属性影响用户代理对源文档的空格、换行和tab字符的处理。
文本方向
direction属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
- ltr 从左往右
- rtr 从右往左