从制造到创造
软件工程师成长之路
posts - 292,  comments - 96,  trackbacks - 0
   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>

显示结果:


posted on 2007-10-08 14:14 CoderDream 阅读(1136) 评论(0)  编辑  收藏 所属分类: CSS

只有注册用户登录后才能发表评论。


网站导航:
 

<2007年10月>
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910

常用链接

留言簿(9)

我参与的团队

随笔分类(245)

随笔档案(239)

文章分类(3)

文章档案(3)

收藏夹(576)

友情链接

搜索

  •  

积分与排名

  • 积分 - 454031
  • 排名 - 115

最新评论

阅读排行榜

评论排行榜