CSS的文本属性
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 >
<!-- 文件范例: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 -->
<!-- 文件说明: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 >
<!-- 文件范例: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 >
<!-- 文件范例: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 >
<!-- 文件范例: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 >
<!-- 文件范例: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 >
显示结果: