网页设计课件ch11CSS的属性072.ppt

第11章 CSS的属性 11.3 颜色及背景 11.5 CSS定位 本章结束 利用backgroud-color属性设置背景颜色。 语法： background-color：颜色|transparent（透明） 说明：初始值为transparent（透明）。 实例： body{background-color:white} h1{background-color:#000080} 11.3.2 背景颜色属性 11.3.3 背景图像属性 在CSS里，可利用background-image属性，将网页背景以图片的方式显示。 语法： background-image：url|none（无） 11.3.4 背景图片重复属性 设定一个指定的背景图片如何被重复。 语法： background-repeat：repeat|　　　repeat-x|repeat-y|no-repeat background-repeat属性参数值说明 不重复 no-repeat 背景图片纵向重复 repeat-y 背景图片横向重复 repeat-x 背景图片水平与垂直方向同时平铺（默认值） repeat 说 明 参数值 11.3.5 固定背景图片属性 设置指定的背景图片是跟随内容滚动，还是保持固定。 语法： background-attachment：scroll|fixed 说明： scroll表示滚动，fixed表示固定。初始值为scroll。 11.3.6 背景图片的位置属性 background-position设置背景图片的最初位置 这个属性只能应用于块级元素和替换元素(替换元素仅指一些已知原有尺寸的元素。HTML替换元素包括 IMG, INPUT, TEXTAREA, SELECT, 和 OBJECT。) 语法： background-position：百分比|长度|关键字 ⑴ 以百分比方法设置background-position属性的语法如下： background-position：x% y% 其中x%代表设置图片的水平位置；y%代表图片的垂直位置。初始值为0% 0%。 实例： P{background-position:70% 50%;repeat-y;url(..\pic\sky.jpg)｝ 表示背景图片的水平位置为70%，垂直位置为50%。 ⑵ 以长度单位设置background-position属性的语法如下： background-position：x y 使用长度单位可以对背景图片的位置作出更精确的控制，可以设定水平和垂直定位起点。 实例： {background-position:70px 10px;url(..\pic\sky.jpg)｝ 表示从左起70像素、垂直10像素的位置开始显示图像。 ⑶ 以关键字设置background-position属性的语法如下： background-position： [top|center|bottom]||[left|center|right] （注：|表示或的意思，||表示二者同时使用，[ ]表示可搭配使用） 实例： {background-position:right top;url(..\pic\sky.jpg)｝ 11.3.7 背 景 语法：background：值 允许值：背景颜色||背景图像||背景重复||背景附件||背景位置 初始值：未定义 以下是一些背景的声明： body{background:white url(tree.jpg)} h1{background:#7fffd4} p{background:url(tree.jpg) #f0f8ff fixed} table{background:#0c0 url(tree.jpg) no-repeat bottom right} 11.4 美化网页与超链接的设置 11.4.1 网页链接属性anchor 在CSS里，可以通过网页链接属性anchor来设置网页链接文字的效果。 网页链接属性anchor语法说明 a:link 尚未链接过的超链接文字的样式。 a:visited 已链接过的超链接文字的样式。 a:active 当鼠标点击超链接后，超链接文字所显示的样式。 a:hover 当鼠标移到超链接文字上方时，