CSS 文本属性

以下为CSS文本常用属性:

text-indent 设置或检索对象中的文本缩进
语法:text-indent : length ,length :百分比数字,由浮点数字和单位标识符组成的长度值，允许为负值。
vertical-align 设置对象内容的垂直对齐方式
vertical-align应用最多的应该是在td内，控制内部对象位置，和td的valign属性极其相似。
语法:vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length
baseline : 将支持valign特性的对象的内容与基线对齐
sub : 　垂直对齐文本的下标
super : 垂直对齐文本的上标
top : 　将支持valign特性的对象的内容与对象顶端对齐
text-top : 将支持valign特性的对象的文本与对象顶端对齐
middle :将支持valign特性的对象的内容与对象中部对齐
bottom :将支持valign特性的对象的文本与对象底端对齐
text-bottom :将支持valign特性的对象的文本与对象顶端对齐

style.css部分:
#sample div {background-color:#ccccff; margin:4px;} .rei {font-size:60px;} .oya {font-size:30px; background-color:#ccffcc;} .sample1 {font-size:12px; background-color:#ffccff; vertical-align:baseline;} .sample2 {font-size:12px; background-color:#ffccff; vertical-align:top;} .sample3 {font-size:12px; background-color:#ffccff; vertical-align:middle;} .sample4 {font-size:12px; background-color:#ffccff; vertical-align:bottom;} .sample5 {font-size:12px; background-color:#ffccff; vertical-align:text-top;} .sample6 {font-size:12px; background-color:#ffccff; vertical-align:text-bottom;} .sample7 {font-size:12px; background-color:#ffccff; vertical-align:super;} .sample8 {font-size:12px; background-color:#ffccff; vertical-align:sub;}
HTML部分:
<html> <head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="sample">
<div><span class="rei">CSS 学习指南</span><span class="oya">Example.<span class="sample1">baseline</span></span></div>
<div><span class="rei">CSS 学习指南</span><span class="oya">Example.<span class="sample2">top</span></span></div>
<div><span class="rei">CSS 学习指南</span><span class="oya">Example.<span class="sample3">middle</span></span></div>
<div><span class="rei">CSS 学习指南</span><span class="oya">Example.<span class="sample4">bottom</span></span></div>
<div><span class="rei">CSS 学习指南</span><span class="oya">Example.<span class="sample5">text-top</span></span></div>
<div><span class="rei">CSS 学习指南</span><span class="oya">Example.<span class="sample6">text-bottom</span></span></div>
<div><span class="rei">CSS 学习指南</span><span class="oya">Example.<span class="sample7">super</span></span></div>
<div><span class="rei">CSS 学习指南</span><span class="oya">Example.<span class="sample8">sub</span></span></div>
</div>
</body>
</html>

CSS 学习指南Example.baseline

CSS 学习指南Example.top

CSS 学习指南Example.middle

CSS 学习指南Example.bottom

CSS 学习指南Example.text-top

CSS 学习指南Example.text-bottom

CSS 学习指南Example.super

CSS 学习指南Example.sub
text-align 设置或检索对象中文本的对齐方式。
语法:text-align : left | right | center | justify
left左对齐,right右对齐,center居中,justify两端对齐。
dirextion 用于设置文本流的方向(文本流的值不可继承)
语法:direction : ltr | rtl
ltr是文本流从左到右,rtl文本流从右到左。
unicode-bidi 用于同一个页面里存在从不同方向读进的文本显示.与direction属性一起使用。
whitle-space 设置或检索对象内空格的处理方式。
语法:white-space : normal | pre | nowrap
normal : 默认处理方式
pre : 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。
nowrap :强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。