从制造到创造
软件工程师成长之路
posts - 292,  comments - 96,  trackbacks - 0
   3.3、颜色和背景属性
      3.3.1、颜色
      3.3.2、背景颜色
      3.3.3、背景图像
      3.3.4、背景图像重复
      3.3.5、背景图像位置
 
文本属性 描述
color 定义颜色
background-color 设定一个元素的背景颜色
background-image 设定一个元素的背景图像
background-repeat 决定一个指定的背景图像如何被重复
background-position 设置水平和垂直方向上的位置

3.2.1、 颜色 
        颜色 color 属性允许网页制作者指定一个元素的颜色,一般用RGB,#FFFFFF(16进制数)表示。
文件范例:13-13.htm
<!-- ------------------------------ -->
<!--       文件范例:13-13.htm      -->
<!--        文件说明:CSS颜色       -->
<!-- ------------------------------ -->
<HTML>
    
<HEAD>
        
<TITLE>CSS颜色</TITLE>
        
<Style Type="text/css">
        <!--
            H1 
{ 
                color
:#336699
            
}
            .text 
{ 
                color
:#ffcc00
            
}
        -->
        
</Style>
    
</HEAD>
    
<BODY>
        
<H1>主流的网页设计软件</H1>
        
<class=text>目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本MX继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。</P>
    
</BODY>
</HTML>

显示结果:
 

3.2.2、背景颜色

文件范例:13-14.htm
<!-- ------------------------------ -->
<!--       文件范例:13-14.htm      -->
<!--      文件说明:CSS背景颜色     -->
<!-- ------------------------------ -->
<HTML>
    
<HEAD>
        
<TITLE>CSS背景颜色</TITLE>
        
<Style Type="text/css">
        <!--
            body 
{ 
                background-color
:#336699
            
}
            H1 
{ 
                background-color
:#ffffff
            
}
            .text 
{ 
                background-color
:#ffcc00
            
}
        -->
        
</Style>
    
</HEAD>
    
<BODY>
        
<H1>主流的网页设计软件</H1>
        
<class="text">目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本MX继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。</P>
    
</BODY>
</HTML>

显示结果:


3.2.3、背景图像

文件范例:13-15.htm
<!-- ------------------------------ -->
<!--       文件范例:13-15.htm      -->
<!--      文件说明:CSS背景图像     -->
<!-- ------------------------------ -->
<HTML>
    
<HEAD>
        
<TITLE>CSS背景图像</TITLE>
        
<Style Type="text/css">
        <!--
            body 
{ 
                Background-image
:url(13-15.gif)
            
}
        -->
        
</Style>
    
</HEAD>
    
<BODY>
        
<H1>主流的网页设计软件</H1>
        
<class=text>目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本MX继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。</P>
    
</BODY>
</HTML>

显示结果:


3.2.4、背景图像重复
 
背景图像重复属性值 描述
repeat-x 图像横向重复
repeat-y 图像纵向重复
repeat 图像横向纵向重复
no-repeat 图像不重复(只显示一张图,无任何方向的平铺)
       
文件范例:13-16.htm
<!-- ------------------------------ -->
<!--       文件范例:13-16.htm      -->
<!--    文件说明:CSS背景图像重复   -->
<!-- ------------------------------ -->
<HTML>
    
<HEAD>
        
<TITLE>CSS背景图像重复</TITLE>
        
<Style Type="text/css">
        <!--
            body 
{ 
                Background-image
:url(13-15.gif);
                background-repeat
: repeat-y
            
}
        -->
        
</Style>
    
</HEAD>
    
<BODY>
        
<H1>主流的网页设计软件</H1>
        
<class="text">目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本MX继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。</P>
    
</BODY>
</HTML>

显示结果:


3.2.5、背景图像位置
  
背景图像位置属性值 描述
left 背景图像居左
right 背景图像居右
center 背景图像水平居中,垂直居中
top 背景图像上对齐
bottom 背景图像下对齐
       
        与 background-repeat 属性结合使用,否则没有任何效果,因为 background-repeat 的默认属性为repeat。
文件范例:13-17.htm
<!-- ------------------------------ -->
<!--       文件范例:13-17.htm      -->
<!--    文件说明:CSS背景图像位置   -->
<!-- ------------------------------ -->
<HTML>
    
<HEAD>
        
<TITLE>CSS背景图像位置</TITLE>
        
<Style Type="text/css">
        <!--
            body 
{ 
                Background-image
:url(13-15.gif);
                background-repeat
:repeat-y;
                Background-position
:right top
            
}
        -->
        
</Style>
    
</HEAD>
    
<BODY>
        
<H1>主流的网页设计软件</H1>
        
<class=text>目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本MX继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。</P>
    
</BODY>
</HTML>

显示结果:


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

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


网站导航:
 

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

常用链接

留言簿(9)

我参与的团队

随笔分类(245)

随笔档案(239)

文章分类(3)

文章档案(3)

收藏夹(576)

友情链接

搜索

  •  

积分与排名

  • 积分 - 454162
  • 排名 - 115

最新评论

阅读排行榜

评论排行榜