CSS学习2

CSS文本

通过文本属性可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

属性	功能	举例
text-indent	缩进	p {text-indent: 5em;}
悬挂缩进（使用负值）	p {text-indent: -5em; padding-left: 5em;}//最好加一个内边距或外边距
使用百分比	代码1*
继承	代码2*(继承父元素的缩进值)
text-align	水平对齐	值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
justify	水平对齐	在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。
word-spacing	字间距	代码3*（其默认值 normal 与设置值为 0 是一样的。）
letter-spacing	字母间距	代码4*（修改字符或字母之间的间隔。）
text-transform	字符转换	none（不转化）,uppercase（转大写）,lowercase（转小写）,capitalize(首字母大写)
text-decoration	文本装饰	附表1*
white-space	处理空白符	附表2*
direction	文本方向	附表3*

代码1：

div {width:500px;}
p {text-indent: 20%;}

this is a paragragh

代码2：

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

some text. some text. some text.

this is a paragragh.

代码3：

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

This is a paragraph. The spaces between words will be increased.

This is a paragraph. The spaces between words will be decreased.

代码4：

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}

This is header 1

This is header 4

附表1：text-decoration属性的值

值	作用
none	会关闭原本应用到一个元素上的所有装饰。
underline	会对元素加下划线，就像 HTML 中的 U 元素一样。
overline	会在文本的顶端画一个上划线。
line-through	会在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。
blink	会让文本闪烁。

附表2：white-space属性的值

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

附表3：direction属性的值

值	作用
ltr	显示从左到右的文本
rtl	显示从右到左的文本
*对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。