使用css来控制网页的颜色、背景和图像也算是将网页的内容与表现分开的一种方式,不过图像并不全是,需要根据图像的性质来决定。那我们就来看看怎么样使用css样式来进行对颜色、背景和图像的控制。
1、文本颜色
前面其实已经使用过文本的颜色,这里就简单的回顾。如:
- p{color:#f00;}
注意:颜色是一个可以继承的值。如果指定包含元素的div为蓝色,那么所有在被包含的文本(没有指定文本颜色的情况下)都将是蓝色的。
2、背景色
看看事例就可以说明问题了,下面的代码实现了荧光笔的效果。如:
- p{background-color:#F00;}
3、背景图像
背景图像的控制将是本讲的重点内容了。对背景图像的精确控制可以实现很多的显示,下面就仔细的来说一下。
- body{background-image:url(tile.gif);}
这个属性就实现背景图的设置了,如果大家添加的图片不是很大的情况下,就可以看见像桌面图片平铺的效果,背景图像不止显示一次。那如果我不希望这样的控制要怎么来设置这个背景呢?下面一个一个的来说明。
(1)关闭平铺
通过设置background-repeat属性来关闭平铺,如下设置:
- body{
- background-image:url(tile.gif);
- background-repeat:no-repeat;
- }
这样背景图片将只显示一次,并且显示在容器的左上角。
background-repeat属性包括4个可能值:repeat、repeat-x、repeat-y、no-repeat。
repeat就是默认值就不多说了,no-repeat在上面已经使用了;repeat-x和repeat-y这两个值分别用来设置在行或者列方向上平铺图像。
(2)背景图像的定位
如果关闭了平铺,我希望把图像放在指定的位置上,应该怎么样来设置呢?很幸运,css提供了background-position属性,那就来看看这个属性是怎么运作的。
如果你打算在容器的正中间显示背景图像,下面的代码就可以实现:
- background-position:center center;
background-position包括的值:top left;top center;top right;center left;center center;center right;bottom left;bottom center;bottom right;x-pos y-pos;x-% y-%;
其他的值就不多说了,看看最后两个值是怎么使用的。
- background-position:50px left;
- background-position:10% 50%;
(3)背景图像不滚动
有一些情况下,我们希望前面的内容滚动的情况下,背景图像不滚动。而background-attachment就能实现这样的功能。
background-attachment属性可以使用两个值:scroll(默认)和fixed。
(4)背景图像css设置缩写
- background:#F00 url(tile.gif) right top no-repeat;
缩写需要记住各属性的次序,只要顺序一样,前面的值不设置可以移去。在编写正式的css文件时,尽量使用缩写原则,
不仅可以减少样式表文件的大小,同时还保证了样式表的简洁和可管理性。