缩进文本
把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化效果。
通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
例:将段落的首行缩进5 em: p {text-indent: 5em;}
注意:无法将该属性应用于行内元素,图像之类的替换元素。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。
使用负值
text-indent 还可以设置为负值。即第一行悬挂在元素中余下部分的左边:p {text-indent: -5em;}如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。
使用百分比值
text-indent 可以使用所有长度单位,包括百分比值。如果将缩进值设置为 20%,所影响元素的第一行会缩进其父元素宽度的 20%。
在下例中,缩进值是父元素的 20%,即 100 个像素:
div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>
继承
text-indent 属性可以继承
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div>
<div>some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>
以上标记中的段落也会缩进 50 像素,因为这个段落继承了 id 为 inner 的 div 元素的缩进值。
水平对齐
text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式。
值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
text-align:center 与 <CENTER>
<CENTER> 不仅影响文本,还会把整个元素居中。text-align 不会控制元素的对齐,而只影响内部内容。元素本身不会从一段移到另一端,只是其中的文本受影响。
最后一个水平对齐属性是 justify。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。
字间隔
word-spacing 属性可以改变字之间的间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近:
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p>
This is a paragraph. The spaces between words will be decreased.
</p>
<p>
This is a paragraph. The spaces between words will be increased.
</p>
字母间隔
letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。
与 word-spacing 属性一样,letter-spacing 属性的可取值包括所有长度。默认关键字是 normal。输入的长度值会使字母之间的间隔增加或减少指定的量:
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>
字符转换
text-transform 属性处理文本的大小写。这个属性有 4 个值:
none:使用源文档中的原有大小写
uppercase :将文本转换为全大写
lowercase :将文本转换为全小写
capitalize :只对单词的首字母大写
文本装饰
text-decoration 属性有 5 个值:
none :不做修改
underline: 加下划线
overline :上划线
line-through :在文本中间画一个线
blink :让文本闪烁
例:设置所有超链接既有下划线,又有上划线,则规则如下:
a:link a:visited {text-decoration: underline overline;}
如果两个不同的装饰都与同一元素匹配,胜出规则的值会完全取代另一个值。
h2.stricken {text-decoration: line-through;} 所有 class 为 stricken 的 h2 元素都只有一个贯穿线
h2 {text-decoration: underline overline;} 既有下划线又有上划线
通过使用white-space 属性,可以影响浏览器处理字之间和文本行之间的空白符的方式。
white-space 属性的行为:
值 空白符 换行符 自动换行
pre-line 合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre 保留 保留 不允许
pre-wrap 保留 保留 允许
文本方向
direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的为止。
对于行内元素,只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有两个值:ltr 和 rtl。大多数情况下,默认值是 ltr,显示从左到右的文本。如果显示从右到左的文本,应使用值 rtl。
属性 描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。