3-18. text文本相关属性

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

属性	描述
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	设置字间距。

1、text-decoration 属性，文本装饰

• none：无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线，可以去掉，例如

a {text-decoration: none;}

• underline：对元素加下划线，像 HTML 中的 U 元素一样
• overline：上划线
• line-through：在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素
• blink：让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记
  一个规则中结合多种装饰。所有超链接既有下划线，又有上划线：

a:link a:visited {text-decoration: underline overline;}

两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值。所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰，而没有下划线和上划线，因为 text-decoration 值会替换而不是累积起来：

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

快捷键
td text-decoration: none;
tdu text-decoration: underline;
tdl text-decoration: line-through;
tdo text-decoration: overline;

2、text-align属性，文本行互相之间的对齐方式。

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

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

快捷键
ta text-align: left;
tar text-align: right;
tac text-align: center;

3、text-indent 属性，缩进文本。很少用。
把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。
例如，所有段落的首行缩进 5 em：

p {text-indent: 5em;}

不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：

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

百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。
在下例中，缩进值是父元素的 20%，即 100 个像素：

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

this is a paragragh

text-indent 属性可以继承，请考虑如下标记：

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


some text. some text. some text.
this is a paragragh.

以上标记中的段落也会缩进 50 像素，这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。

4、word-spacing 属性可以改变字（单词）之间的标准间隔，增加或减少单词间的空白，即字间隔。很少用。

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

This is some text. This is some text.
This is some text. This is some text.

图片.png

5、letter-spacing 属性，字母间隔，修改的是字符或字母之间的间隔，增加或减少字符间的空白，即字符间距。很少用。

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

This is header 1
This is header 4

图片.png

6、text-transform 属性，字符转换，处理文本的大小写，改变元素中的字母大小写，而不论源文档中文本的大小写。很少用。

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

This Is An H1 Element
This is some text in a paragraph.
This is some text in a paragraph.
This is some text in a paragraph.

图片.png

7、white-space 属性，处理空白符，会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。很少用。

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

    
    
    



    游丝软系飘春榭，落絮轻沾扑绣帘。
    闺中女儿惜春暮，愁绪满怀无释处。
    手把花锄出绣帘，忍踏落花来复去。
    柳丝榆荚自芳菲，不管桃飘与李飞；
    桃李明年能再发，明年闺中知有谁？
    三月香巢已垒成，梁间燕子太无情！
    明年花发虽可啄，却道人去梁空巢。
    一年三百六十日，风刀霜剑严相逼；
    明媚鲜妍能几时，一朝漂泊难寻觅。
    花开易见落难寻，阶前愁杀葬花人，

    滚滚长江东逝水，
    浪花淘尽英雄，
    是非成败转头空，
    青山依旧在，
    几度夕阳红，
    白发渔樵江楮上，
    惯看秋月春风，
    一壶浊酒喜相逢，
    古今多少事，
    都付笑谈中。
    滚滚长江东逝水，
    浪花淘尽英雄，
    是非成败转头空，
    青山依旧在，
    几度夕阳红，
    白发渔樵江楮上，
    惯看秋月春风，
    一壶浊酒喜相逢，
    古今多少事，
    都付笑谈中。

图片.png

http://www.w3school.com.cn/css/css_text.asp