3.2、文本属性
3.2.1、字母间隔
3.2.2、文字修饰
3.2.3、文字排列
3.2.4、文本缩进
3.2.5、行间距
| 文本属性 |
描述 |
| letter-spacing |
定义一个附加在字符之间的间隔数量 |
| text-decoration |
文本修饰属性允许通过五个属性中的一个来修饰文本 |
| text-align |
设置文本的水平对齐方式，包括左对齐、右对齐、居中、两端对齐 |
| text-indent |
文字的首行缩进 |
| line-height |
行高属性接受一个控制文本基线之间的间隔的值 |
3.2.1、 字母间隔
letter-spacing 属性定义一个附加在字符之间的间隔数量，改值必须符合长度格式，允许使用负值。一个设为0的值会阻止文字的调整。
文件范例：13-8.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-8.htm -->
<!-- 文件说明：CSS字母间隔 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS字母间隔</TITLE>
<Style Type="text/css">
<!--
H1{
letter-spacing: -10px
}
.text {
letter-spacing: 5px
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
</BODY>
</HTML>
显示结果：
3.2.2、文字修饰
| 文字修饰属性值 |
描述 |
| underline |
下划线 |
| overline |
上划线 |
| line-through |
删除线 |
| blink |
闪烁，只适用 NetScape 浏览器 |
| none |
无任何修饰 |
文件范例：13-9.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-9.htm -->
<!-- 文件说明：CSS文字修饰 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS文字修饰</TITLE>
<Style Type="text/css">
<!--
a:link {
font-family: "宋体";
text-decoration: none
}
a:visited {
font-family: "宋体";
text-decoration: none
}
a:hover{
font-family:"宋体";
text-decoration: underline
}
.text {
text-decoration: underline
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、FIireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
<A href=mailto:husong@elong.com>给我来信</A>
</BODY>
</HTML>
显示结果：
3.2.3、文本排列
| 文字排列属性值 |
描述 |
| left |
左对齐 |
| center |
居中对齐 |
| right |
右对齐 |
| justify |
两端对齐 |
文件范例：13-10.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-10.htm -->
<!-- 文件说明：CSS文本排列 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS文本排列</TITLE>
<Style Type="text/css">
<!--
H1 {
text-align:center
}
.text {
text-align:justify
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
<A href=mailto:husong@elong.com>给我来信</A>
</BODY>
</HTML>
显示结果：
3.2.4、文本缩进
文本缩进 text-indent 属性可以应用于块级元素（P，H1等），定义该元素第1行可以接受的缩进的数量。改值必须是一个长度或一个百分比，若为百分比，则视上级元素的宽度而定。通用的文本缩进用法是用于段缩进。
文件范例：13-11.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-11.htm -->
<!-- 文件说明：CSS文本缩进 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS文本缩进</TITLE>
<Style Type="text/css">
<!--
H1 {
text-indent:100pt
}
.text {
text-indent:24pt
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
<A href=mailto:husong@elong.com>给我来信</A>
</BODY>
</HTML>
显示结果：
3.2.5、行间距
行间距 line-height 属性可以接受一个控制文本基线之间的间隔的值。当值为百分比数字时，行高由元素字体大小的量与该数字相乘所得，百分比的值相对于元素字体的大小而定，不允许使用负值。
文件范例：13-12.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-12.htm -->
<!-- 文件说明：CSS行间距 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS行间距</TITLE>
<Style Type="text/css">
<!--
.text {
line-height:24pt
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的网页设计软件</H1>
<p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
<A href=mailto:husong@elong.com>给我来信</A>
</BODY>
</HTML>
显示结果：
posted on 2007-10-08 14:14
CoderDream 阅读(1140)
评论(0) 编辑 收藏 所属分类:
CSS