用CSS设置图像与背景颜色课件

Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,11/7/2009,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,2,章,CSS,选择器与相关特性,2.4,复合选择器,2.5 CSS,的继承特性,1,第2章 CSS选择器与相关特性2.4 复合选择器1,2.4,复合选择器,2.4.1,交集选择器,2,2.4 复合选择器2.4.1 交集选择器2,2.4.1,交集选择器,图,2.14,交集选择器示意图,3,2.4.1 交集选择器图2.14 交集选择器示意图3,2.4.1,交集选择器,pcolor:,blue,;/*,标记选择器*,/,.specialcolor:,green,;/*,类别选择器*,/,p.specialcolor:,red,;/*,标记,.,类别选择器*,/,普通标题文本,普通段落文本,指定了,.special,类别的标题文本,指定了,.special,类别的段落文本,/p,4,2.4.1 交集选择器style type=text/,2.4.2,并集选择器,图,2.16,并集选择器示意图,h3,p /*,并集选择器*,/,color:purple;/*,文字颜色*,/,font-size:15px;/*,字体大小*,/,5,2.4.2 并集选择器图2.16 并集选择器示意图h3,2.4.2,并集选择器,h1,h2,h3,p /*,并集选择器*,/,color:purple;/*,文字颜色*,/,font-size:15px;/*,字体大小*,/,h2.special,.special,#one/*,集体声明*,/,text-decoration:underline;/*,下画线*,/,示例文字,h1,示例文字,h2,示例文字,h3,示例文字,p1,示例文字,p2,示例文字,p3,6,2.4.2 并集选择器,嵌入式,外部式。,（,2,）特殊性越高的元素，其样式的优先级越高。,（,3,）外部样式中，出现在后面的优先级高于出现在前面的。,11,2.6 CSS的层叠特性（1）行内式嵌入式外部式。1,第,6,章 用,CSS,设置文本和图象,6.1,使用,CSS,设置文字样式,6.2,使用,CSS,设置图象样式,6.3,使用,CSS,设置背景样式,12,第6章 用CSS设置文本和图象6.1使用CSS设置文字样式,6.2,用,CSS,设置图象样式,6.2.1,设置图片边框,(,Border-width Border-color Border-style,),6.2.2,图片缩放,(,Width Height,),6.2.3,图文混排,(,Float,),6.2.4,制作八大行星科普网页实例,6.2.5,设置图片与文字的对齐方式,13,6.2 用CSS设置图象样式6.2.1 设置图片边框(B,6.2.1,设置图片边框,边框的样式用,border-style,来定义,一个边框由,3,个要素组成。,（,1,）,border-width,（粗细）：可以使用各种,CSS,中的长度单位，最常用的是像素。,（,2,）,border-color,（颜色）：可以使用各种合法的颜色来定义颜色。,（,3,）,border-style,（线型）：可以在一些预先定义好的线型中选择。,14,6.2.1 设置图片边框边框的样式用border-sty,6.2.1,设置图片边框,.test1,border-width:4px;/*,边框粗细*,/,border-color:#996600;/*,边框颜色*,/,border-style:dotted;/*,点画线*,/,.test2,border:2px blue dashed;,15,6.2.1 设置图片边框style type=text,其显示效果如图所示。,16,其显示效果如图所示。16,2,为不同的边框分别设置样式,如果希望分别设置,4,条边框的不同样式，可用以下属性,:,border-top,border-right,border-bottom,border-left,分别设定左、右、上、下,4,条边框。,在使用时，依然是每条边框分别设置粗细、颜色和线型这,3,项。,17,2为不同的边框分别设置样式 如果希望分别设置4条,6.2.2,图片缩放,图片缩放,img.test1width:50%;/*,相对宽度*,/,18,6.2.2 图片缩放18,6.2.3,图文混排,1,文字环绕,在,CSS,中主要是通过给图片设置,float,属性来实现文字环绕。,19,6.2.3 图文混排 1文字环绕19,6.2.3,图文混排,图文混排,bodybackground-color:#EAECDF;,margin:0px;,padding:0px;,imgfloat:right;/*,文字环绕*,/,pcolor:#000000;/*,文字颜色*,/,margin:0px;,padding-top:10px;,padding-left:5px;,padding-right:5px;,spanfloat:left;/*,首字放大*,/,font-size:60px;,font-family:,黑体,;,margin:0px;,padding-right:5px;,20,6.2.3 图文混排 padding-le,6.2.3,图文混排,21,6.2.3 图文混排 21,6.2.4,制作八大行星科普网页实例,图,6.23,八大行星页面,22,6.2.4 制作八大行星科普网页实例图6.23 八大行,6.2.5,设置图片与文字的对齐方式,1,横向对齐方式,图片水平对齐的方式与上一章中文字水平对齐的方式基本相同，分为左、中、右,3,种。,不同的是图片的水平对齐通常不能直接通过设置图片的,text-align,属性，而是通过设置其父元素的该属性来实现的。,23,6.2.5 设置图片与文字的对齐方式1横向对齐方式23,6.2.5,设置图片与文字的对齐方式,水平对齐,#p1text-align:left,#p2text-align:center,#p3text-align:right,24,6.2.5 设置图片与文字的对齐方式24,6.2.5,设置图片与文字的对齐方式,图,6.26,水平对齐,25,6.2.5 设置图片与文字的对齐方式 图6.26 水平对,2,纵向对齐方式,有如下代码：,lpsum,图,11.27,默认的纵向对齐方式,26,2纵向对齐方式有如下代码：图11.27 默认的纵,2,纵向对齐方式,由此可以得出结论，在默认情况下，行内的图像的最下端，将与同行的文字的基线对齐。,图,6.28,图像与文字基线对齐,27,2纵向对齐方式 由此可以得出结论，在默认情况下,2,纵向对齐方式,用,vertical-align,属性。,lpsum,28,2纵向对齐方式用vertical-align属性。28,2,纵向对齐方式,图,6.30,图像与文字顶端对齐,29,2纵向对齐方式图6.30 图像与文字顶端对齐 29,6.3,用,CSS,设置背景样式,6.3.1,设置背景颜色,(,Background-color,),6.3.2,设置背景图像,(,Background-image,),6.3.3,设置背景图像平铺,(,Background-repeat,),6.3.4,设置背景图像位置,(,Background-position,),6.3.5,设置背景图像位置固定,(,Background-attachment,),6.3.6,设置标题的图像替换,(),30,6.3 用CSS设置背景样式6.3.1 设置背景颜色(Ba,6.3.1,设置背景颜色,在,CSS,中，网页元素的背景颜色使用,background-color,属性来设置，属性值为某种颜色。,31,6.3.1 设置背景颜色 在CSS中，网页元素,6.3.2,设置背景图像,设置背景图像使用,background-image,属性实现。,bodybackground-image:url(bg.gif);,在默认情况下，图像会自动向水平和竖直两个方向平铺。,32,6.3.2 设置背景图像 设置背景图像使用ba,6.3.3,设置背景图像平铺,如果不希望平铺，或者只希望沿着一个方向平铺，可以使用,background-repeat,属性来控制。,repeat,：沿水平和竖直两个方向平铺，这也是默认值。,no-repeat,：不平铺，只显示一次。,repeat-x,：只沿水平方向平铺。,repeat-y,：只沿竖直方向平铺。,33,6.3.3 设置背景图像平铺 如果不希望平铺，,6.3.3,设置背景图像平铺,首先准备一个图像。然后，对,body,元素设置如下,CSS,样式,.,bodybackground-image:url(bg.gif);,background-repeat:repeat-x;,34,6.3.3 设置背景图像平铺 首先准备一个图像。,6.3.3,设置背景图像平铺,35,6.3.3 设置背景图像平铺35,6.3.4,设置背景图像位置,当背景图像不平铺时，默认位置为左上角。可用,background-position,属性来设置背景图像的位置。,如：,body,background-image:url(bg.gif);,background-repeat:no-repeat;,background-position,：,right bottom;,background-position,：,200px 100px;,background-position,：,30%60%;,36,6.3.4 设置背景图像位置 当背景图像不平铺时,6.3.5,设置背景图像位置固定,网页的背景图像会随滚动条的移动而移动，使用,background-attachment,属性可将背景图像位置固定。,如：,body,background-image:url(bg.gif);,background-repeat:no-repeat;,background-position,：,30%60%;,background-attachment,：,fixed;,37,6.3.5 设置背景图像位置固定 网页的背景图像,6.3.6,设置标题的图像替换,图,6.54,文字标题效果,38,6.3.6 设置标题的图像替换 图6.54 文字标题,图,6.55,制作一个标题背景图像,39,图6.55 制作一个标题背景图像39,图,6.56,显示标题图像,40,图6.56 显示标题图像 40,图,6.57,图像替换的最终效果,41,图6.57 图像替换的最终效果41,