CSS的文本属性

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 >
    
< 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 >
        
< class ="text" > 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、FIireworks正是交互性网页设计的杰出代表,其最新版本MX继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。 </ P >
        
< 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 >
        
< class =text > 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本MX继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。 </ P >
        
< 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 >
        
< class ="text" > 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本MX继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。 </ P >
        
< 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 >
        
< class ="text" > 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本MX继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。 </ P >
        
< href =mailto:husong@elong.com > 给我来信 </ A >
    
</ BODY >
</ HTML >

显示结果:


你可能感兴趣的:(CSS的文本属性)