网页设计第14次课CSS颜色及背景属性解剖.ppt

* 第三章 使用CSS样式表（上） 第2节、颜色及背景属性 2、颜色及背景属性 （1）颜色属性 color： color属性用来设置指定元素的颜色，颜色值表示方法有三种：颜色名关键字 / 16进制的RGB值 / rgb(R,G,B)。 语法，color : red / #FF0000 / rgb(255,0,0) rgb（0%,50%,50%） rgb（0, 128, 128） #008080 墨绿 teal ? rgb（50%,50%,50%） rgb（128, 128, 128 ） #808080 灰色 gray ? rgb（50%,0%,50%） rgb（128, 0, 128 ） #800080 紫色 purple ? rgb（50%,50%,0%） rgb（128, 128, 0 ） #808000 橄榄 olive ? rgb（0%,0%,50%） rgb（0, 0, 128 ） #000080 深蓝 navy ? rgb（50%,0%,0%） rgb（128, 0, 0） #800000 茶色 maroon ? rgb（0%,100%,0%） rgb（0,255,0） #00FF00 浅绿 lime ? rgb（100%,100%,100%） rgb（255,255,255） #FFFFFF 白色 white ? rgb（75%,75%,75%） rgb（192,192,192） #C0C0C0 银色 silver ? rgb（100%,0%,100%） rgb（255,0,255） #FF00FF 紫红 fuchsia ? rgb（0%,100%,100%） rgb（0,255,255） #00FFFF 青色 cyan ? rgb（100%,100%,0%） rgb（255,255,0） #FFFF00 黄色 yellow ? rgb（0%,0%,100%） rgb（0,0,255） #0000FF 蓝色 blue ? rgb（0%,50%,0%） rgb（0, 128, 0） #008000 绿色 green ? rgb（100%,0%,0%） rgb（255,0,0） #FF0000 红色 red ? rgb（0%,0%,0%） rgb（0,0,0） #000000 黑色 black ? RGB（0%-100%） RGB（0-255） 十六进制 关键字 颜色 white teal olive 常用颜色值对照表 （2）背景颜色 background-color： 在HTML中，利用body标记中的bgcolor属性可以设置网页的背景颜色，而在CSS中使用background-color属性不但可以设置网页的背景颜色，还可以设置文字段落的背景颜色。 语法，background-color : 颜色值 学完就练之2-1（请将源代码复制到页面中，开始练习）： !--请将整个网页背景设置为灰色-- div奔跑吧兄弟口头禅（默认）/div div邓超：weare 伐木累！（红字蓝底）/div span邓超：whatare you 弄啥呢？（蓝字红底） /span div陈赫：你是猪吗！（红字蓝底）/div span李晨：我们打一架吧！（蓝字红底）/span div王宝强：不要被女人迷惑了，她们都是“红颜祸水“！（红字） /div span王祖蓝：我捡漏王不是浪得虚名的！（蓝底） /span div王祖蓝：让我撕一次，就一次！（蓝字） /div spanbaby：boom shaka laka（红底）/span （3）背景图片 background-image： 使用background-image属性可以设置元素的背景图像。图像地址可以是绝对地址，也可以是相对地址。 语法，background-image : url（图像地址） （4）背景图片重复 background-repeat： 使用background-repeat属性可以设置背景图像是否平铺，并且可以设置如何平铺。 取值有：【no-repeat表示背景图像不平铺；repeat表不背景图像平铺排满整个网页；repeat-x表示背图像只在水平方向上平铺；repeat-y表示背景图像只在垂直方向上平铺。】 语法，background-repeat : no-repeat / repeat / repeat-x / repeat-y; （5）背景图片位置 background-position： 背景位置属性用于设置背景图像的位置，这个属性只能应用于块级元素（如p、div等）和替换元素（如：img、input、textarea、selcet和object等）。取值包括两种，一种是采用数字，另一种是关键字描述。 语法，backgrou