喜欢本站并加入收藏
首 页 电脑学园 技术文档 图形图像 办公应用 网页设计 管理资料 PPT模板 方案合同
 位置: 北方教程网 >> 网页设计 >> DIV/CSS >> 正文
   从基础开始:CSS实用教程(五)
从基础开始:CSS实用教程(五)
[ 作者:佚名   来源:网络整理   点击数:   更新时间:2007-1-20 ]

九.控制颜色和背景的样式  

控制颜色和背景的样式包括颜色属性、背景颜色、背景图片、背景图片重复、背景图片固定、背景定位六个部分。

1.颜色属性

基本格式如下:

color: 参数

颜色参数取值范围:

·以RGB值表示

·以16进制(hex)的色彩值表示

·以默认颜色的英文名称表示

以默认颜色的英文名称表示无疑是最为方便的,但由于预定义的颜色种类太少,所以更多的网页设计者喜欢用RGB的方式。RGB方式的好处很多,不但可以用数字的形式精确地表示颜色,而且也是很多图像制作软件(如Photoshop)里默认使用的规范,这样一来就为图片和网页更好地结合打下了坚实的基础。

2.背景颜色

在HTML当中,要为某个对象加上背景色只有一种办法,那就是先做一个表格,在表格中设置完背景色,再把对象放进单元格。这样做比较麻烦,不但代码较多,还要为表格的大小和定位伤些脑筋。现在用CSS就可以轻松地直接搞定了,而且对象的范围很广,可以是一段文字,也可以只是一个单词或一个字母。

基本格式如下:

background-color: 参数

参数取值和颜色属性一样。

3.背景图片

基本格式如下:

background-image: url(URL)

URL就是背景图片的存放路径。如果用“none”来代替背景图片的存放路径,将什么也不显示。

4.背景图片重复

背景图片重复控制的是背景图片平铺与否,也就是说,结合背景定位的控制可以在网页上的某处单独显示一幅背景图片。

基本格式如下:

background-repeat: 参数

参数取值范围:

·no-repeat:不重复平铺背景图片

·repeat-x:使图片只在水平方向上平铺

·repeat-y:使图片只在垂直方向上平铺

如果不指定背景图片重复属性,浏览器默认的是背景图片向水平、垂直两个方向上平铺。

5.背景图片固定

背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性,浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力,所以可以解除背景图片和文字内容的捆绑,该为和浏览器窗口捆绑。

基本格式如下:

background-attachment: 参数

参数取值范围:

·fixed:网页滚动时,背景图片相对于浏览器的窗口而言,固定不动

·scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动

6.背景定位

背景定位用于控制背景图片在网页中显示的位置。

基本格式如下:

background-position: 参数表

参数取值范围:

·带长度单位的数字参数

·top:相对前景对象顶对齐

·bottom:相对前景对象底对齐

·left:相对前景对象左对齐

·right:相对前景对象右对齐

·center:相对前景对象中心对齐

·比例关系

参数中的center如果用于另外一个参数的前面,表示水平居中;如果用于另外一个参数的后面,表示垂直居中。

上一篇文章: 从基础开始:CSS实用教程(四) 下一篇文章: 从基础开始:CSS实用教程(六)
打印此文  收藏此页  关闭窗口  返回顶部
 相关文章  热点文章
 · 利用CSS改进网站设计的小技巧
 · Dreamweaver快捷操作技巧集锦
 · 使用Dreamweaver架设网站简明教程
 · 网页设计制作过程中常用的几个代码技巧
 · 高效使用CSS编码的方法
 
热点图文
教你节省Vist...
使用Windows ...
 · 远程管理Web服务器的方法技巧
 · Win Vista系统自带IIS7.0设置详解...
 · 详解Windows系统IIS6.0功能及应用...
 · 服务器集群系统实现方法及案例分...
 · IIS服务器实现asp,cgi和php+mysq...
 · IIS下SQL Server数据库安全设置技...
推 荐 阅 读
巧用Photosho...
Photoshop鼠绘...
 · Fireworks制作旋转的漂亮gif动画...
 · Photoshop制作都市满天繁星
 · Fireworks制作Menu按钮
 · 巧用Photoshop制作喜迎奥运壁纸
 · 巧用Photoshop钢笔工具绘制彩色美...
 · Photoshop制作浪漫动感花朵
 设为首页 - 加入收藏 - 关于本站 - 联系我们 - 广告合作 - 友情链接 - 在线交流 - 
CopyRight© 2006-2009 Eduai.Com All Rights Reserved
在线交流 QQ:524152258 辽ICP备07001851号
免责声明:本站部分资源来自网络,如有侵犯您的版权请通知,我们立即删除。