Css文本

Css文本

Css文本

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

字符转换：text-transform

1.none
2.uppercase

3.lowercase
4.capitalize
默认值none对文本不做任何改动，将使用源文档中原有的大小写。顾名思义，uppercase和lowercase分别是大写字母和小写字母。最后，captialize只对每个单词的首字母大写。

缩进：text-indent

通过text-indent这个属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以为负值。
这个属性最常见的用途是将段落的首行，进行缩进，下面的规则会使所有的段落的首行缩进5em
p{text-indent:5em;}

使用负值
text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：
p {text-indent: -5em;}
不过在为text-indent设置负值的时，要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器的窗口的左边界，为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：
p{text-indent:-5em;padding-left:5em;}

使用百分比
text-indent可以用所有长度，包括百分比。
百分数是相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为20%，所影响的元素的第一行会缩进其父元素宽度的20%、
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 id=“outer”>
<div id=“inner”>some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>
以上标记中的段落，也会缩进50像素，这是因为这个段落继承了id为inner的div元素的缩进值

字间隔：word-spacing

改变字的间隔，默认为normal(0)，可以为正也可以为负

水平对齐：text-align

text-align是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式，它的前3个值相当直接，不过第4 个和第5个略有些复杂。
值left、right、和center会导致元素中的文本分别为左对齐、右对齐和居中。

提示：将块级元素和表元素居中，要通过在这些元素上适当的设置左、右边距来实现。

text-align与<center>
<center>不仅影响文本，还会把整个元素居中、text-align不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是在其中的文本受影响。
justify
最后一个水平对齐属性是 justify。
在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见

文本装饰：text-decoration

1.none
2.underline
3.overline
4.line-through
5.blink
underline元素会对所有元素加下划线，就像HTML中的U元素一样。overline的作用是一个上划线。值line-through则是一个贯穿线，等价以HTML中的S和strike元素。blink会让文本闪烁，类似于Netscape支持的颇招非议的blink标记。
在safary中我发现其实blink并没啥吊用。

空白字符：white-spacing

1.normal（和平时处理空白符一样）
2.pre(空白符不会被忽略)
3.nowrap(防止元素中的文本换行，除非使用了一个<br>元素)
4.值 pre-wrap
和 pre-line
CSS2.1 引入了值 pre-wrap
和 pre-line，这在以前版本的 CSS 中是没有的。这些值的作用是允许创作人员更好地控制空白符处理。
如果元素的 white-space 设置为 pre-wrap，那么该元素中的文本会保留空白符序列，但是文本行会正常地换行。如果设置为这个值，源文本中的行分隔符以及生成的行分隔符也会保留。pre-line与 pre-wrap
相反，会像正常文本中一样合并空白符序列，但保留换行符。
实例 TIY：white-space: pre-wrap
实例 TIY：white-space: pre-line