《网页前端技术》CSS语言任务二.ppt

案例资讯 案例四 用CSS进行页面的颜色和背景设置 前面的案例中我们已经学会了运用CSS进行对象边框的设置，那么怎么设置页面的颜色和背景呢？现在来学习。 先学习在CSS中的有关背景方面的知识。 一、颜色 1、 CSS预定义颜色表示法 (就是使用颜色的英文SS预定义颜色表示法(就是使用颜色的英文) 如：color:red; color:blue; 2、RGB颜色表示法 如：color:rgb(255,0,0);color:rgb(0,255,0) RGB颜色表示法就是红(R:red),绿(G:green),蓝(B:blue)， 这三原色混合后呈现出的颜色，其中每种颜色的取值为0~255。 3、十六进制颜色表示法 如：color: #ff0000; color: #00ff00; color:#1199ff 16进制颜色表示法就是使用三对十六进制数分别表示RGB中的三原色,像上面例子的最后一个color:#1199ff;,其中11代表R的颜色(十六进制的11就等于十进制中的17),其中99代表G的颜色(十六进制的99就等于十进制中的153),其中ff代表B的颜色(十六进制的ff就等于十进制中的255),前面再加一个#号.(#1199ff;等价于rgb(17,153,255);) 4、短十六进制颜色表示法 （属于网络安全色） 如：color: #f00; color: #0f0; color: #00f 短十六进制颜色表示法就是当十六进制颜色表示法中的两个表示颜色值的数字一样的时候的简写,比如color:#ff0000;就可以简写为color:#f00 5、RGBA颜色表示法 如：color: rgba(255,0,0,1); color: rgba(0,255,0,1); color: rgba(0,0,255,1); RGBA颜色表示法就是在RGB颜色的基础上增加了Alpha通道。 6、HSL颜色表示法 如：color:hsl(120,100%,75%); color:hsl(360,100%,75%); color:hsl(240,100%,75%); HSL颜色表示法就是使用色相(hue),饱和度(saturation),亮度(lightness)表示颜色的一种方法 7、HSLA颜色表示法 如：color:hsla(120,100%,75%,1); color:hsla(360,100%,75%,1); color:hsla(240,100%,75%,1); HSLA颜色表示法就是在HSL颜色的基础上增加了Alpha通道。 二、背景颜色 背景颜色使用background-color属性，这个属性接受任何合法的颜色值。 background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。 三、背景图片 把图片放入背景，需要使用background-image属性，默认值是none，表示背景上没有放置任何图片。如果需要设置一个背景图片，必须为这个属性设置一个URL值： 语法：{background-image: url (*.jpg);} 四、背景图片平铺 是用background-repeat属性，这个属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。 repeat-x： 背景图片横向平铺 repeat-y： 背景图片竖向平铺 no-repeat： 背景图片不平铺 五、背景图片位置 用background-position属性，这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。 background-position 属性 可以使用一些关键字： top、bottom、left、right 和 center 可以使用长度值，如 100px 或 5cm， 可以使用百分数值 CSS关于背景的例子 打开记事本以后，我们可以在里面输入代码， html head title背景/title /head body style=background-color:#cccccc p img src=libai.jpg width=140 height=170 align=left h2静夜思/h2 h3作者：李白/a/h3 p style=c