CSS文本样式（二）
一、水平对齐文本
1、text-align属性
text-align属性指定元素中文本的水平对齐方式。 默认情况下，您网站上的文字左对齐。 但是，有时您可能需要不同的对齐方式。
文本对齐属性值如下：
left，right，center和justify。
- left：把文本排列到
左边。默认值：由浏览器决定。- right：把文本排列到
右边。- center：把文本排列到
中间。- justify：实现
两端对齐文本效果。- inherit：规定应该从
父元素继承text-align属性的值。
HTML代码：
<p class="left"><strong>woaixuexi</strong></p>
<p class="right"><strong>woaixuexi</strong></p>
<p class="center"><strong>woaixuexi</strong></p>CSS代码：
p.left {text-align: left;
}
p.right {text-align: right;
}
p.center {text-align: center;
}执行结果：
- 当文本对齐设置为
"justify"时，每行都被拉伸，使得每一行具有相同的宽度，并且左右边距是直的（如在杂志和报纸中）。- 该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值justify；不同用户代理可能会得到不同的结果。
- 所有浏览器都支持text-align属性。任何的版本的InternetExplorer（包括IE8）都
不支持属性值"inherit"。
二、垂直对齐文本
1、vertical-align属性
vertical-align属性设置元素的垂直对齐。
常用的值是
top，middle和bottom。
top: 使元素及其后代元素的顶部与整行的顶部对齐。
middle: 使元素的中部与父元素的基线加上父元素x-height的一半对齐。
bottom:使元素及其后代元素的底部与整行的底部对齐。
下面的示例显示了如何垂直对齐表格之间的文本。
HTML代码：
<table border="1" cellpadding="2" cellspacing="0" style="height: 150px;"><tr><td class="top">Top</td><td class="middle">Middle</td><td class="bottom">Bottom</td></tr>
</table>CSS代码：
td.top {vertical-align: top;
}
td.middle {vertical-align: middle;
}
td.bottom {vertical-align: bottom;
}执行结果：
vertical-align属性还包含以下值：baseline，sub，super，%和px(或pt，cm)。
baseline:使元素的基线与父元素的基线对齐。
sub:使元素的基线与父元素的下标基线对齐。
super:使元素的基线与父元素的上标基线对齐。
px:使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。
下面的例子显示了它们之间的区别。
HTML代码：
<p>This is a <span class="baseline">woaixuexi</span> example.</p>
<p>This is a <span class="sub">woaixuexi</span> example.</p>
<p>This is a <span class="super">woaixuexi</span> example.</p>
<p>This is a <span class="pixel">woaixuexi</span> example.</p>CSS代码：
span.baseline {vertical-align: baseline;
}
span.sub {vertical-align: sub;
}
span.super {vertical-align: super;
}
span.pixel {vertical-align: -10px;
}执行结果：
可以使用
pt(点)，cm(厘米)和%(百分比)值来代替px值。
vertical-align属性对所有元素的行为都不一样。
例如，div元素需要一些额外的CSS样式。
HTML代码：
<div class="main"><div class="paragraph">woaixuexi</div>
</div>CSS代码：
.main {height: 150px; width: 400px;background-color: LightSkyBlue;display: inline-table;
}
.paragraph {display: table-cell;vertical-align: middle;
}执行结果：
display: inline-table; 和 display: table-cell;使用样式来使垂直对齐属性能在div中起效果。
三、text-decoration(线条装饰)
1、text-decoration属性
text-decoration属性用于指定文本将如何装饰。
text-decoration 属性是以下三种属性的简写：
- text-decoration-line ： 线条类型
- text-decoration-color : 线条颜色
- text-decoration-style ： 线条样式
常用的值有：
-
none - 默认值，这定义了一个正常的文本-
inherit - 从其父元素继承此属性-
overline - 在文本上方绘制水平线-
underline - 在文本下方绘制水平线-
line-through - 在文本中绘制水平线（替换HTML <s>标记）
下面的例子演示了每个值之间的差异。
HTML代码：
<p class="none">woaixuexi</p>
<p class="inherit">woaixuexi</p>
<p class="overline">woaixuexi</p>
<p class="underline">woaixuexi</p>
<p class="line-through">woaixuexi</p>CSS代码：
p.none {text-decoration: none;
}
p.inherit {text-decoration: inherit;
}
p.overline {text-decoration: overline;
}
p.underline {text-decoration: underline;
}
p.line-through {text-decoration: line-through;
}执行结果：
您可以将underline，overline或line-through组合起来，以添加多条装饰线。
text-decoration: blink这个值是有效的,可以使文本闪烁，但是被弃用，大多数浏览器忽略它。
这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。
四、文本缩进
1、text-indent属性
text-indent 属性规定文本块中首行文本的缩进。指定在文本的第一行开始之前应该留下多少水平空间。 属性值是长度(px，pt，cm，em等)，%和inherit。
内联对象要使用该属性必须先使该对象表现为块级或内联块级。
HTML代码：
<p>
使用 <strong>text-indent</strong> 让文本向右缩进了60px。
</p>CSS代码：
p {text-indent: 60px;
}执行结果：
- 注释：允许使用
负值。如果使用负值，那么首行会被缩进到左边。在CSS2.1之前，text-indent总是继承计算值，而不是声明值。- 说明：text-indent属性用于定义
块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。
五、text-shadow（阴影）
1、text-shadow属性
text-shadow为文本添加阴影。
text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色
它有四个值，各个属性值如下所示：
-
h-shadow: 必需。水平阴影的位置。允许负值。-
v-shadow： 必需。垂直阴影的位置。允许负值。-
blur： 可选。模糊的距离。-
color： 可选。阴影的颜色。
HTML代码：
<h1>我爱学习</h1>CSS代码：
h1 {color: blue;font-size: 30pt;text-shadow: 5px 2px 4px grey;
}在上面的例子中，我们使用以下参数创建了一个阴影：
- 5px - X坐标
- 2px - Y坐标
- 4px - 模糊半径
- 灰色 - 阴影的颜色
执行结果：
要向文本添加多个阴影，请添加逗号分隔的阴影列表。
2、text-shadow与模糊效果
处理阴影时，可以使用任何CSS支持的颜色格式。
对于x和y偏移，可以使用各种类型的单位（如px，cm，mm，in，pc，pt等）。
负值也被支持。
下面的例子创建一个蓝色的阴影，比主文本向上高出2px，向左多1px，并且用0.5em模糊：
HTML代码：
<h1>我爱学习</h1>
CSS代码：
h1 {font-size: 20pt; text-shadow: rgba(0,0,255,1) -1px -2px 0.5em;
}执行结果：
注：Internet Explorer 9和更早版本不支持text-shadow属性。
六、text-transform（文本大小写）
1、text-transform属性
text-transform ：控制文本的大小写。
text-transform: capitalize; 可以实现文本中的每个单词以大写字母开头。
HTML代码：
<p class="capitalize">The value capitalize transforms the first character in each word to uppercase; all other characters remain unaffected.
</p>CSS代码：
.capitalize {text-transform: capitalize;
}执行结果：
使用text-transform，您可以使文本显示为全部大写或全部小写。
text-transform: uppercase; 定义文本显示为全部大写。
text-transform: lowercase; 定义文本显示为全部小写。
HTML代码：
<p class="uppercase">This value transforms all characters to uppercase.</p>
<p class="lowercase">This value transforms all characters to lowercase.</p>CSS代码：
p.uppercase {text-transform: uppercase;
}
p.lowercase {text-transform: lowercase;
}执行结果：
none值不会产生任何效果。即默认，定义带有小写字母和大写字母的标准的文本。
七、letter-spacing（文本字符之间间距）
1、letter-spacing属性
letter-spacing属性用于设置文本中字符之间的间距。
该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。
值可以设置为：
-
normal：定义了默认样式，字符之间没有额外的空间;-
length ：长度计量单位，用px，pt，cm，mm等测量单位定义字符之间的额外空间;-
inherit：继承其父元素的属性;
HTML代码：
<p class="normal">woaixuexi</p>
<p class="positive ">woaixuexi</p>CSS代码：
p.normal { letter-spacing: normal;
}
p.positive { letter-spacing: 4px;
}执行结果：
2、letter-spacing使用负值
letter-spacing使用负值可以减少字符之间的间距。
HTML代码：
<p class="positive">woaixuexi</p>
<p class="negative">woaixuexi</p>CSS代码：
p.positive { letter-spacing: 4px;
}
p.negative { letter-spacing: -1.5px;
} 执行结果：
八、word-spacing（文本单词之间空格）
1、word-spacing属性
word-spacing 属性指定文本中单词之间的空格（即字间隔）。 就像letter-spacing属性一样，可以将word-spacing 的值设置为normal，length和inherit。
该属性定义元素中字之间插入多少空白符。针对这个属性，“字” 定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔；所以，normal 就等同于设置为 0。允许指定负长度值，这会让字之间挤得更紧。
normal: 默认。定义单词间的标准空间。
length: 定义单词间的固定空间。
inherit: 规定应该从父元素继承 word-spacing 属性的值。
HTML代码：
<p class="normal">This paragraph has no additional word-spacing applied.</p>
<p class="px">This paragraph is word-spaced at 30px.</p>CSS代码：
p.normal { word-spacing: normal;
}
p.px { word-spacing: 30px;
}执行结果：
当段落需要使用
正常的单词间距展示时，通常会使用normal
2、word-spacing的测量单位
要使用word-spacing设置单词之间的间距，可以使用像px，pt，pc，cm，mm，inches，em和ex这样的测量值。如果指定为长度值，会调整字之间的通常间隔；也可以设置normal，normal 就等同于设置为 0。
负值也是允许的，这会让字之间挤得更紧。
HTML代码：
<p class="positive">This paragraph is word-spaced at 20px.</p>
<p class="negative">This paragraph is word-spaced at -5px.</p>CSS代码：
p.positive { word-spacing: 20px;
}
p.negative { word-spacing: -5px;
}执行结果：
九、white-space（换行符）
1、white-space属性
white-space可以设置元素内的换行符。
参数可以是
normal，inherit，nowrap等。
-
normal: 默认。空白会被浏览器忽略。-
inherit: 规定应该从父元素继承 white-space 属性的值。-
nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
nowrap会屏蔽该元素中的所有换行符。
HTML代码：
<p>
This paragraph has multiple spaces and
a line break, but it will be ignored, as we used the nowrap value.
</p>CSS代码：
p {white-space: nowrap;
}执行结果：
上面结果中：文本将继续在同一行，直到遇到一个<br />标记。
white-space也支持其他值：pre 、pre-line 、pre-wrap
-
pre ：文本支持所有的换行和空格-
pre-line ：文本支持换行，忽略额外的空格-
pre-wrap：文本将在必要的时候或者行的结尾进行换行
HTML代码：
<p class="pre"> In the markup we have multiple spaces and a line break. </p><p class="preline"> In the markup we have multiple spaces and a line break, but in the result multiple spaces are ignored. </p><p class="prewrap"> In the markup we have multiple spaces and a line break.</p>CSS代码：
p.pre {white-space: pre;
}
p.preline {white-space: pre-line;
}
p.prewrap {white-space: pre-wrap;
}执行结果：
Pre-wrap值的行为与Pre值相同，只是它增加了额外的换行符以防止文本突破元素的框。