第17章 文本设置
17.1字母大小转换
文本转换属性仅仅被用于表达某种格式的要求，它有四个属性，允许通过其中的一个转换文本，
在CSS中通过text-transform属性可以使网页设计者很容易控制字母的大小写,即可以用该属性转换字
母文本的大小写,其语法格式如下:
text-transform:captailize|uppercase|lowercase|none
其中：
captailize:使每个词的首字母大写
uppercase:使每字的所有字母大写
lowercase:使每字的所有字母小写
none:字母以正常形式显示
<html>
<head>
<title>text-transform属性</title>
<style type="text/css">
.mydiv
{
width:auto;
margin;5px;
padding:5px;
border:1px soild #000000;
}
/*设置文本修饰*/
#tran1
{
text-transform:none;
}
#tran2
{
/*转换大写*/
text-transform:capitalize;
}
#tran3
{
text-transform:uppercase;
}
#tran4
{
/*转换小写*/
text-transform:lowercase;
}
</style>
</head>
<body>
<div class="mydiv">
输入小写的:html+css<br>
<input type="text" id="tran1">
值为none:无转换发生。
</div>
<div class="mydiv">
<div class="mydiv">
输入小写的:html+css<br>
<input type="text" id="tran2">
值为capitalize:每个词的首字母大写，只有为小写输入状态转换才发生。
</div>
<div class="mydiv">
输入小写的:html+css<br>
<input type="text" id="tran3">
值为uppercase:转换成大写。
</div>
<div class="mydiv">
输入大写的:HTML+CSS<br>
<input type="text" id="tran4">
值为lowercase:转换成小写。
</div>
</body>
</html>
17.2文本修饰
文本修饰属性允许通过五个属性中的一个来设置文本的某种效果，在进行文本修饰时，如加上下
划线，上划线，删除线，闪烁或缺省的使用它，其语法格式如下：
text-decoration:underline|overline|line-through|blink|none
underline:下划线
overline:上划线
line-throungh:删除线
blink:闪烁
none:缺省
实例:
<html>
<head>
<title>文本修饰属性text-decoration</title>
<style type="text/css">
#p1
{
/*设置文本修饰属性*/
text-decoration:underline;
}
文本转换属性仅仅被用于表达某种格式的要求，它有四个属性，允许通过其中的一个转换文本，
在CSS中通过text-transform属性可以使网页设计者很容易控制字母的大小写,即可以用该属性转换字
母文本的大小写,其语法格式如下:
text-transform:captailize|uppercase|lowercase|none
其中：
captailize:使每个词的首字母大写
uppercase:使每字的所有字母大写
lowercase:使每字的所有字母小写
none:字母以正常形式显示
<html>
<head>
<title>text-transform属性</title>
<style type="text/css">
.mydiv
{
width:auto;
margin;5px;
padding:5px;
border:1px soild #000000;
}
/*设置文本修饰*/
#tran1
{
text-transform:none;
}
#tran2
{
/*转换大写*/
text-transform:capitalize;
}
#tran3
{
text-transform:uppercase;
}
#tran4
{
/*转换小写*/
text-transform:lowercase;
}
</style>
</head>
<body>
<div class="mydiv">
输入小写的:html+css<br>
<input type="text" id="tran1">
值为none:无转换发生。
</div>
<div class="mydiv">
<div class="mydiv">
输入小写的:html+css<br>
<input type="text" id="tran2">
值为capitalize:每个词的首字母大写，只有为小写输入状态转换才发生。
</div>
<div class="mydiv">
输入小写的:html+css<br>
<input type="text" id="tran3">
值为uppercase:转换成大写。
</div>
<div class="mydiv">
输入大写的:HTML+CSS<br>
<input type="text" id="tran4">
值为lowercase:转换成小写。
</div>
</body>
</html>
17.2文本修饰
文本修饰属性允许通过五个属性中的一个来设置文本的某种效果，在进行文本修饰时，如加上下
划线，上划线，删除线，闪烁或缺省的使用它，其语法格式如下：
text-decoration:underline|overline|line-through|blink|none
underline:下划线
overline:上划线
line-throungh:删除线
blink:闪烁
none:缺省
实例:
<html>
<head>
<title>文本修饰属性text-decoration</title>
<style type="text/css">
#p1
{
/*设置文本修饰属性*/
text-decoration:underline;
}
#p2
{
text-decoration:overline;
}
#p3
{
text-decoration:line-through;
}
#p4
{
text-decoration:blink;
}
</style>
</head>
<body bgcolor=lightyellow>
<center>
<h1>text-decoration属性的应用效果</h1>
</center>
<p id=p1>这段的文本修饰属性(text-decoration)值是underline.</p>
<p id=p2>这段的文本修饰属性(text-decoration)值是overline.</p>
<p id=p3>这段的文本修饰属性(text-decoration)值是line-through.</p>
<p id=p4>这段的文本修饰属性(text-decoration)值是blink.</p> /*有些浏览器不支持*/
</body>
</html>
{
text-decoration:overline;
}
#p3
{
text-decoration:line-through;
}
#p4
{
text-decoration:blink;
}
</style>
</head>
<body bgcolor=lightyellow>
<center>
<h1>text-decoration属性的应用效果</h1>
</center>
<p id=p1>这段的文本修饰属性(text-decoration)值是underline.</p>
<p id=p2>这段的文本修饰属性(text-decoration)值是overline.</p>
<p id=p3>这段的文本修饰属性(text-decoration)值是line-through.</p>
<p id=p4>这段的文本修饰属性(text-decoration)值是blink.</p> /*有些浏览器不支持*/
</body>
</html>
17.3空格处理方式
空格处理应用在给对象处理文本间的空格时，如要使文本在一行中显示或者在计算机编程中的代码，
因代码常常用缩进和转行的方式以表示代码美观性。
空格处理属性由white-space表未，其后接的值有默认的normal和预先的模式，还有只在一行中显示，其
完整用法如下：
white-space:normal|pre|nowrap
normal:默认处理方式
pre:用等宽字体显示预选格式化文本.不合并字间的空距离和进行两端对齐.
nowrap:强制在一行内显示所有文本,直到文本结束或者遭遇br对象。
<html>
<head>
<title>空格处理</title>
<style type="text/css">
#ws1
{
width:200px;
border:1px solid #000000
/*设置空格处理样式为正常*/
white-space:normal;
}
空格处理应用在给对象处理文本间的空格时，如要使文本在一行中显示或者在计算机编程中的代码，
因代码常常用缩进和转行的方式以表示代码美观性。
空格处理属性由white-space表未，其后接的值有默认的normal和预先的模式，还有只在一行中显示，其
完整用法如下：
white-space:normal|pre|nowrap
normal:默认处理方式
pre:用等宽字体显示预选格式化文本.不合并字间的空距离和进行两端对齐.
nowrap:强制在一行内显示所有文本,直到文本结束或者遭遇br对象。
<html>
<head>
<title>空格处理</title>
<style type="text/css">
#ws1
{
width:200px;
border:1px solid #000000
/*设置空格处理样式为正常*/
white-space:normal;
}
#ws2
{
width:100px;
border:1px solid #000000
/*设置空格处理样式为预先处理*/
white-space:pre;
}
#ws3
{
width:150px;
border:1px solid #000000
/*设置空格处理样式为强制一行显示*/
white-space:nowrap;
padding:10px;
}
</style>
</head>
<body>
<div id="ws1">
HTML+CSS完全自学手册HTML+CSS完全自学手册
</div>
<div id="ws2">
HTML+CSS完全自学手册
以下是本对象的CSS代码
#ws2
{
width:100px;
border:1px solid #000000
/*设置空格处理样式为预先处理*/
white-space:pre;
}
</div>
<div id="ws3">
HTML+CSS完全自学手册HTML+CSS完全自学手册
</div>
</body>
</html>
{
width:100px;
border:1px solid #000000
/*设置空格处理样式为预先处理*/
white-space:pre;
}
#ws3
{
width:150px;
border:1px solid #000000
/*设置空格处理样式为强制一行显示*/
white-space:nowrap;
padding:10px;
}
</style>
</head>
<body>
<div id="ws1">
HTML+CSS完全自学手册HTML+CSS完全自学手册
</div>
<div id="ws2">
HTML+CSS完全自学手册
以下是本对象的CSS代码
#ws2
{
width:100px;
border:1px solid #000000
/*设置空格处理样式为预先处理*/
white-space:pre;
}
</div>
<div id="ws3">
HTML+CSS完全自学手册HTML+CSS完全自学手册
</div>
</body>
</html>
17.4设置文本的垂直对齐
文本垂直方面对齐默认是向底部对齐，如果需在居中对齐或向顶部对齐就需要设置垂直对齐方
式，需用vertical-align属性，设置层对象。
文本垂直对齐也允许用负值，该值也可以是是一个方位关键字。其语法格式如下：
vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom
baseline:基线对齐
sub:以下标的形式显示
super:上标的形式显示
top:使元素和行中最高的元素向上对齐
text-top:使元素和上级元素的字体向上对齐
middle:纵向对齐元素基线加上级元素的x-高度――字母"x"的高度的―的一半的中点
bottom:使元素和行中最高的元素向下对齐
text-bottom:元素和上级元素的字体向下对齐
实例：
<html>
<head>
<title>设置垂直对齐<title>
<style type="text/css">
div
{
height:40px;
border:1px solid #000000;
}
#base
{
/*此为默认值*/
vertical-align:baseline;
}
#sub
{
/*设置垂直对齐方式为下标*/
vertical-align:sub;
font-size:0.5em;
}
#sup
{
/*设置垂直对齐方式为上标*/
vertical-align:supper;
font-size:0.5em;
}
#top
{
/*设置为垂直对齐方式向上对齐*/
vertical-align:top;
}
#t-top
{
/*设置为文字垂直向上对齐*/
vertical-align:text-top;
}
#mid
{
/*设置为垂直对齐方式居中对齐*/
vertical-align:middle;
}
#bot
{
/*设置垂直对齐方式向下对齐*/
vertical-align:bottom;
}
#b-bot
{
/*设置为文字垂直向下对齐*/
vertical-align:text-bottom;
}
</style>
</head>
<body>
<center>
<font size=5 color=red>vertical-align垂直对齐属性的应用效果</font>
<table border=4 height=200>
<tr bgcolor=lightgreen align=center>
<td width="150">设置vertical-align属性</td>
<td width="62">显示结果</td>
<td width="172">设置vertical-align属性</td>
<td width="52">显示结果</td>
</tr>
<tr>
<td>vertical-align:sub</td>
<td >c+o<font id=sub></font>->co<font id=sub>2</font></td>
<!--在font标记内利用id选择符，引用sub样式-->
<td>vertical-align:supper</td>
<td>a<font id=sup>2</font>+b<font id=sup>2</font>=c<font id=sup>2</font></td>
<!--在font标记内利用id选择符，引用sub样式-->
</tr>
<tr>
<td id=top>vertical-align:top</td>
<td id=top><img src"b.gif"></td>
<!--在td标记内利用id选择符，引用top样式式-->
<td id=t-top>vertical-align:t-top</td>
<td id=t-top><img src"b.gif"></td>
</tr>
<tr>
<td id=bot>vertical-align:bottom</td>
<td id=bot><img src"b.gif"></td>
<td id=t-bot>vertical-align:text-bottom</td>
<td id=t-bot><img src"b.gif"></td>
</tr>
</table>
</center>
</body>
</html>
文本垂直方面对齐默认是向底部对齐，如果需在居中对齐或向顶部对齐就需要设置垂直对齐方
式，需用vertical-align属性，设置层对象。
文本垂直对齐也允许用负值，该值也可以是是一个方位关键字。其语法格式如下：
vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom
baseline:基线对齐
sub:以下标的形式显示
super:上标的形式显示
top:使元素和行中最高的元素向上对齐
text-top:使元素和上级元素的字体向上对齐
middle:纵向对齐元素基线加上级元素的x-高度――字母"x"的高度的―的一半的中点
bottom:使元素和行中最高的元素向下对齐
text-bottom:元素和上级元素的字体向下对齐
实例：
<html>
<head>
<title>设置垂直对齐<title>
<style type="text/css">
div
{
height:40px;
border:1px solid #000000;
}
#base
{
/*此为默认值*/
vertical-align:baseline;
}
#sub
{
/*设置垂直对齐方式为下标*/
vertical-align:sub;
font-size:0.5em;
}
#sup
{
/*设置垂直对齐方式为上标*/
vertical-align:supper;
font-size:0.5em;
}
#top
{
/*设置为垂直对齐方式向上对齐*/
vertical-align:top;
}
#t-top
{
/*设置为文字垂直向上对齐*/
vertical-align:text-top;
}
#mid
{
/*设置为垂直对齐方式居中对齐*/
vertical-align:middle;
}
#bot
{
/*设置垂直对齐方式向下对齐*/
vertical-align:bottom;
}
#b-bot
{
/*设置为文字垂直向下对齐*/
vertical-align:text-bottom;
}
</style>
</head>
<body>
<center>
<font size=5 color=red>vertical-align垂直对齐属性的应用效果</font>
<table border=4 height=200>
<tr bgcolor=lightgreen align=center>
<td width="150">设置vertical-align属性</td>
<td width="62">显示结果</td>
<td width="172">设置vertical-align属性</td>
<td width="52">显示结果</td>
</tr>
<tr>
<td>vertical-align:sub</td>
<td >c+o<font id=sub></font>->co<font id=sub>2</font></td>
<!--在font标记内利用id选择符，引用sub样式-->
<td>vertical-align:supper</td>
<td>a<font id=sup>2</font>+b<font id=sup>2</font>=c<font id=sup>2</font></td>
<!--在font标记内利用id选择符，引用sub样式-->
</tr>
<tr>
<td id=top>vertical-align:top</td>
<td id=top><img src"b.gif"></td>
<!--在td标记内利用id选择符，引用top样式式-->
<td id=t-top>vertical-align:t-top</td>
<td id=t-top><img src"b.gif"></td>
</tr>
<tr>
<td id=bot>vertical-align:bottom</td>
<td id=bot><img src"b.gif"></td>
<td id=t-bot>vertical-align:text-bottom</td>
<td id=t-bot><img src"b.gif"></td>
</tr>
</table>
</center>
</body>
</html>
17.4.2文本水平对齐
文本对齐属性可以应用于块级元素(P,H1等),使元素文本得到排列,水平对齐是个很常用
的属性,其语法格式如下:
text-align:left|right|center|justify
left:浏览器默认的对齐方式,左对齐
right:右对齐
center:居中
justify:左右对齐
<html>
<head>
<title>text-align属性</title>
<style type="text/css">
#h1
{
/*此为居中对齐*/
text-align:center;
}
#h2
{
/*此为默认值*/
text-align:left;
}
#h3
{
/*此为右对齐*/
text-align:right;
}
#h4
{
/*左右对齐*/
text-align:justify;
}
</style>
</head>
<body>
<center>
<h1>text-align属性的应用效果</h1>
</center>
<p id=h1>此行文字居中对齐</p>
<p id=h2>此行文字左对齐</p>
<p id=h3>此行文字右对齐</p>
<p id=h4>此行文字左右对齐</p>
</body>
</html>
文本对齐属性可以应用于块级元素(P,H1等),使元素文本得到排列,水平对齐是个很常用
的属性,其语法格式如下:
text-align:left|right|center|justify
left:浏览器默认的对齐方式,左对齐
right:右对齐
center:居中
justify:左右对齐
<html>
<head>
<title>text-align属性</title>
<style type="text/css">
#h1
{
/*此为居中对齐*/
text-align:center;
}
#h2
{
/*此为默认值*/
text-align:left;
}
#h3
{
/*此为右对齐*/
text-align:right;
}
#h4
{
/*左右对齐*/
text-align:justify;
}
</style>
</head>
<body>
<center>
<h1>text-align属性的应用效果</h1>
</center>
<p id=h1>此行文字居中对齐</p>
<p id=h2>此行文字左对齐</p>
<p id=h3>此行文字右对齐</p>
<p id=h4>此行文字左右对齐</p>
</body>
</html>
17.5文本缩进
文本缩进属性可以应用于块级元素(P,H1等)，以定义该元素第一行可以接受的缩进的数量，该值
必须是一个长度或一个百分比。其语法格式如下：
text-indent:<长度>|<百分比>
实例：
<html>
<head>
<title>首行缩进</title>
<style type="text/css">
#indent1
{
text-indent:20px;
}
</style>
</head>
<body>
<h1>text-indent属性的应用效果</h1>
<h3>首行不缩进效果</h3>
<p>HTML+CSS完全自学手册<br>
HTML+CSS完全自学手册HTML+CSS完全自学手册
</p>
<h3>首行缩进30像素效果</h3>
<p id=indent1>HTML+CSS完全自学手册<br>
HTML+CSS完全自学手册HTML+CSS完全自学手册
</p>
</body>
</html>
文本缩进属性可以应用于块级元素(P,H1等)，以定义该元素第一行可以接受的缩进的数量，该值
必须是一个长度或一个百分比。其语法格式如下：
text-indent:<长度>|<百分比>
实例：
<html>
<head>
<title>首行缩进</title>
<style type="text/css">
#indent1
{
text-indent:20px;
}
</style>
</head>
<body>
<h1>text-indent属性的应用效果</h1>
<h3>首行不缩进效果</h3>
<p>HTML+CSS完全自学手册<br>
HTML+CSS完全自学手册HTML+CSS完全自学手册
</p>
<h3>首行缩进30像素效果</h3>
<p id=indent1>HTML+CSS完全自学手册<br>
HTML+CSS完全自学手册HTML+CSS完全自学手册
</p>
</body>
</html>