CSS学习之“文本属性”

在网页制作当中，简单的说，文本是内容，字体用于显示，它是一种改变文本外观的方法。
文本缩进和水平对齐
文本缩进：text-indent
允许值：长度|百分比
初始值：0
可否继承：是
适用于：块级元素
例：使任何段落的首行缩进10像素。
p { text-indent:10px;}
<p style="text-indent:10px;">这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果</p>
显示效果如下：

这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果.
text-indent只适用于块级元素，对内联元素不起作用。text-indent值可以为负，这样可以起到特殊的效果。
例：p { text-indent:-10px;}
<p style="text-indent:10px;">这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示 的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的 效果这里显示的是文本缩进的效果</p>
效果如下：

这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果

另外也可以用百分比为单位来对文本缩进，缩进只应用元素的第一行，即使插入了换行符也一样

text-indent中继承的是计算值，而非声明值。

如：

body {width:600px;}

div { width:600px;}

p{text-indent:10%}

<div>这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果<p>这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果这里显示的是文本缩进的效果</p>

文本对齐：

text-align
允许值：left | center | right | justify
初始值：与用户代理有关
可否继承：可继承
适用于：块级元素
例：<p style="text-align:left">这里显示的是文本居左对齐</p>
<p style="text-align:center">这里显示的是文本居中对齐</p>
<p style="text-align:right">这里显示的是文本居右对齐</p>
<p style="text-align:justify">这里显示的是文本两端对齐这里显示的是文本两端对齐这里显示的是文本两端对齐这里显示的是文本两端对齐这里显示的是文本两端对齐这里显示的是文本两端对齐这里显示的是文本两端对齐这里显示的是文本两端对齐这里显示的是文本两端对齐这里显示的是文本两端对齐这里显示的是文本两端对齐</p>
显示效果如下：

：
这里显示的是文本居左对齐
这里显示的是文本居中对齐
这里显示的是文本居右对齐
这里显示的是文本两端对齐这里显示的是文本两端对齐这里显示的是文本两端对齐这里显示的是文本两端对齐这里显示的是文本两端对齐这里显示的是文本两端对齐这里显示的是文本两端对齐这里显示的是文本两端对齐这里显示的是文本两端对齐这里显示的是文本两端对齐这里显示的是文本两端对齐

这里需要注意的是text-align只适用于块级元素，不适用于内联元素，如<img>就不行，如非得使图片居中的话可以将<div>属性用text-align设置为居中，然后将图片嵌入到<div>块级元素中。

处理空白：white-space

允许值：pre | nowrap | normal

初始值：normal

可否继承：否

适用于：块级元素

运用这一属性可以影响浏览器对单词、字体和文本行间空白的处理方式。

如：p {white-space:normal;}

这条规则则告诉我们忽略浏览器的空白，额外的空格和回车都会被浏览器完全忽略。

p {white-space:pre;}

这条规则则告诉我们元素内的空白将不被忽略，就像这个元素是一个PRE元素一样。

p {white-space:nowrap;}

这条规则则告诉我们将阻止文本被包裹在块级元素里，除非用<br>元素。

行高：line-height

允许值：<长度> | <百分比> | <数字> | normal

初始值：normal

可否继承：是

适用于：所有元素

一个行中的每个元素都有一个内容区域，它是由字体尺寸决定的。内容区域又包含一个内联框，在没有其他因素的情况下，内联框刚刚好等于内容区域。如果使用缺省值normal，行间垂直距离将会是用户代理的缺省值。它通常是字体尺寸的1.0到1.2倍，但也能随用户代理而改变。

例：p.one {line-height:14pt; font-size: 13pt;}

p.two{line-height:1.2em;font-size:13pt;}

p.three{line-height:150%;font-size:10pt;}

p.four{line-height:0.33in;font-size:13pt;}

<p class="one">这是one的行高显示效果这是one的行高显示效果</p>

<p class="two">这是two的行高显示效果这是two的行高显示效果</p>

<p class="three">这是three的行高显示效果这是three的行高显示效果</p>

<p class="four">这是four的行高显示效果这是four的行高显示效果</p>

显示效果如下：

这是one的行高显示效果这是one的行高显示效果
这是two的行高显示效果这是two的行高显示效果
这是three的行高显示效果这是three的行高显示效果
这是four的行高显示效果这是four的行高显示效果
再如：div {line-height:12pt;}
p {font-size:18pt}
<div><p>这里是行高的效果这里是行高的效果这里是行高的效果这里是行高的效果这里是行高的效果这里是行高的效果这里是行高的效果这里是行高的效果</p></div>
效果如下：

这里是行高的效果这里是行高的效果这里是行高的效果这里是行高的效果这里是行高的效果这里是行高的效果这里是行高的效果这里是行高的效果

从上面的效果可以看出字体的大小大于行高的大小，因此出现了层叠。

纵向对齐：vertical-align

允许值：baseline | sub | super | bottom | text-bottom | middle | top | text-top | <百分比>

初始值：baseline

可否继承：否

适用于：内联元素

这里的百分比是指相对于元素的行高。

基线对齐：vertical-align:baseline，它使元素的基线同父元素的基线对齐。

上标和下标：vertical-align:sub 它使元素为下标。vertical-align:super 它使元素为上标。

底端对齐：vertical-align:bottom，使元素的内联框的底端同行框的底端对齐。

顶端对齐：vertical-align:top，它使元素的内联框的顶端同行框的顶端对齐。

中间对齐：vertical-align:middle，这个值通常用于图像，因为它使元素的纵向的中点对齐本行的“中间”。

百分比：vertical-align，根据百分比的值会使元素的基线（或替换元素的底端）根据给定的值被升高或降低，当然是相对于父元素的基线。正百分数使元素上升，负百分数使元素降低。

例：p sub.one{vertical-align:baseline}

p sub.two{vertical-align:sub;}

p sub.three{vertical-align:super;}

p sub.four{vertical-align:bottom}

p sub.five{vertical-align:top}

p sub.six{vertical-align:middle}

p sub.seven{vertical-align:100%;}

<p ><sub class="one">这是行高vertical=baseline的属性</sub></p>

<p><sub class="two">这是行高vertical=sub的属性</sub></p>

<p><sub class="three">这是行高vertical=super的属性</sub></p>

<p><sub class="four">这是行高vertical=bottom的属性</sub></p>

<p><sub class="five">这是行高vertical-top的属性</sub></p>

<p><sub class="six">这是行高vertical=middle的属性</sub></p>

<p><sub class="seven">这是行高vertical=百分比的属性</sub></p>

显示效果如下：

这是行高vertical=baseline的属性

这是行高vertical=sub的属性

这是行高vertical=super的属性

这是行高vertical=bottom的属性

这是行高vertical=top的属性

这是行高vertical=middle的属性

这是行高vertical=百分比的属性

再如：

b.1{vertical-align:100%;}

b.2{vertical-align:-100%}

<p>vertical百分比属性效果<b class="1">vertical百分比属性效果</b>vertical百分比属性效果<b class="2">vertical百分比属性效果</b></p>

效果如下：

vertical百分比属性效果vertical百分比属性效果vertical百分比属性效果vertical百分比属性效果

文字间隔：word-spacing

允许值：<长度> | normal

初始值：normal

可否继承：是

适用于：所有元素

word-spacing属性可以接受正的或负的值。这个值加入到文字间隔中，缺省值normal和设置一个0值效果是一样的。

例：p.1{word-spacing:1em;}

p.2{word-spacing:-1em;}

<p class="1">this is word-spacing=0.5em的效果</p>

<p class="2">this is word-spacing=-0.6em的效果</p>

效果如下：

this is word-spacing=0.5em
this is word-spacing=-0.6em
字母间隔：letter-spacing

允许值：<长度>

初始值：normal

可否继承：是

适用于：所有元素

例：p.1{letter-spacing:0.5em;}

p.2{letter-spacing:-0.2em;}

<p class="1"> This is letter-spacing=0.5em.</p>

<p class="2"> This is letter-spacing:-0.2em</p>

显示效果如下：

This is letter-spacing=0.5em.
This is letter-spacing:-0.2em
文字间隔和字母间隔都要受到文本对齐的值的影响，而且元素的计算值通常被其子元素所继承。

文本转换：text-transform

允许值：uppercase | lowercase | capitalize | none

初始值：none

可否继承：是

适用于：所有元素

缺省值none将使用源文档中已经存在的大小写。uppercase和lowercase将使整个文本变为大写或上写字母，capitalize使每个文字的第一个字母大写。

例：p.1 {text-transform:uppercase;}

p.2 {text-transtorm:lowercase;}

p.3{text-transform:capitalize;}

<p class="1">this is text-transform=uppercase.</p>

<p class="2">this is text-transform=lowercase.</p>

<p class="3">this is text-transform=capitalize.</p>

效果如下：

this is text-transform=uppercase.
this is text-transform=lowercase.
this is text-transform=capitalize.

文本修饰：text-decoration

允许值：none | underline | overline | line-through | blink

初始值：none

可否继承：否

适用于：所有元素

例：p.one {text-decoration:none;}

p.two{text-decoration:underline;}

p.three{text-decoration:overline;}

p.four{text-decoration:line-through;}

p.five{text-decoration:blink;}

<p class="one">这是text-decoration为none的效果</p>

<p class="two">这是text-decoration为underline的效果</p>

<p class="three">这是text-decoration为overline的效果</p>

<p class="four">这是text-decoration为line-through的效果<p>

<p class="five">这是text-decoration为blink的效果</p>

显示效果如下：

这是text-decoration为none的效果
这是text-decoration为underline的效果
这是text-decoration为overline的效果
这是text-decoration为line-through的效果
这是text-decoration为blink的效果

无需改变字体，就有许多方法可以改变文本的外观，其中包括传统的效果，如下划线等。。。在一下章中将详细学习字体属性的一些内容。OK。今天就到此为止，祝今天晚上好梦。。。~！~