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

1、第第2章章 CSS选择器与相关特性选择器与相关特性2.4 2.4 复合选择器复合选择器2.5 CSS2.5 CSS的继承特性的继承特性12.4 2.4 复合选择器复合选择器2.4.1 2.4.1 交集选择器交集选择器22.4.1 2.4.1 交集选择器交集选择器图图2.14 交集选择器示意图交集选择器示意图32.4.1 2.4.1 交集选择器交集选择器 pcolor:blue;/*标记选择器标记选择器*/.specialcolor:green;/*类别选择器类别选择器*/p.specialcolor:red;/*标记标记.类别选择器类别选择器*/普通标题文本普通标题文本 普通段落文本普通段落文

2、本 指定了指定了.special类别的标题文本类别的标题文本 指定了指定了.special类别的段落文本类别的段落文本/p42.4.2 2.4.2 并集选择器并集选择器图图2.16 并集选择器示意图并集选择器示意图h3,p /*并集选择器并集选择器*/color:purple;/*文字颜色文字颜色*/font-size:15px;/*字体大小字体大小*/52.4.2 2.4.2 并集选择器并集选择器 h1,h2,h3,p /*并集选择器并集选择器*/color:purple;/*文字颜色文字颜色*/font-size:15px;/*字体大小字体大小*/h2.special,.special,#

3、one/*集体声明集体声明*/text-decoration:underline;/*下画线下画线*/示例文字示例文字h1 示例文字示例文字h2 示例文字示例文字h3 示例文字示例文字p1 示例文字示例文字p2 示例文字示例文字p362.4.3 2.4.3 后代选择器后代选择器 后代选择器后代选择器 p spancolor:red;/*嵌套声明嵌套声明*/spancolor:blue;嵌套之外的嵌套之外的标记（蓝色）标记（蓝色）不生效不生效 嵌套使嵌套使用用CSS（红色）（红色）标记的方法标记的方法72.4.3 2.4.3 后代选择器后代选择器abackground-color:#FFFF00

4、;#navi atext-decoration:none;color:#FFFFFF;a href=first.html files edit see format 82.5 CSS2.5 CSS的继承特性的继承特性 图图2.20 包含多层列表的页面包含多层列表的页面 前沿Web开发教室 Web设计与开发需要使用以下技术：HTML CSS 选择器 盒子模型 浮动与定位 Javascript 此外，还需要掌握：Flash Dreamweaver Photoshop 如果您有任何问题，欢迎联系我们9 图图2.21 继承关系树型图继承关系树型图102.6 CSS2.6 CSS的层叠特性的层叠特性（1

5、 1）行内式）行内式 嵌入式嵌入式 外部式。外部式。（2 2）特殊性越高的元素，其样式的优先级越）特殊性越高的元素，其样式的优先级越高。高。（3 3）外部样式中，出现在后面的优先级高于）外部样式中，出现在后面的优先级高于出现在前面的。出现在前面的。11第第6章章 用用CSS设置文本和图象设置文本和图象6.1使用使用CSS设置文字样式设置文字样式6.2使用使用CSS设置图象样式设置图象样式6.3使用使用CSS设置背景样式设置背景样式126.2 用用CSS设置图象样式设置图象样式6.2.1 6.2.1 设置图片边框设置图片边框(Border-width Border-color Border-st

6、yle)6.2.2 6.2.2 图片缩放图片缩放(Width Height)6.2.3 6.2.3 图文混排图文混排(Float)6.2.4 6.2.4 制作八大行星科普网页实例制作八大行星科普网页实例6.2.5 6.2.5 设置图片与文字的对齐方式设置图片与文字的对齐方式136.2.1 6.2.1 设置图片边框设置图片边框边框的样式用边框的样式用border-style来定义来定义一个边框由一个边框由3个要素组成。个要素组成。（1）border-width（粗细）：可以使用各种（粗细）：可以使用各种CSS中的长度单位，最常用的是像素。中的长度单位，最常用的是像素。（2）border-colo

7、r（颜色）：可以使用各种（颜色）：可以使用各种合法的颜色来定义颜色。合法的颜色来定义颜色。（3）border-style（线型）：可以在一些预（线型）：可以在一些预先定义好的线型中选择。先定义好的线型中选择。146.2.1 6.2.1 设置图片边框设置图片边框.test1 border-width:4px;/*边框粗细边框粗细*/border-color:#996600;/*边框颜色边框颜色*/border-style:dotted;/*点画线点画线*/.test2 border:2px blue dashed;15 其显示效果如图所示。其显示效果如图所示。162 2为不同的边框分别设置样式为

8、不同的边框分别设置样式 如果希望分别设置如果希望分别设置4条边框的不同样式，可用以条边框的不同样式，可用以下属性下属性:border-topborder-rightborder-bottomborder-left分别设定左、右、上、下分别设定左、右、上、下4条边框。条边框。在使用时，依然是每条边框分别设置粗细、颜色在使用时，依然是每条边框分别设置粗细、颜色和线型这和线型这3项。项。176.2.2 6.2.2 图片缩放图片缩放图片缩放图片缩放img.test1width:50%;/*相对宽度相对宽度*/186.2.3 6.2.3 图文混排图文混排 1 1文字环绕文字环绕 在在CSS中主要是通过给

9、图片设置中主要是通过给图片设置float属性属性来实现文字环绕。来实现文字环绕。19 6.2.3 6.2.3 图文混排图文混排图文混排图文混排bodybackground-color:#EAECDF;bodybackground-color:#EAECDF;margin:0px;margin:0px;padding:0px;padding:0px;imgfloat:right;/imgfloat:right;/*文字环绕文字环绕 */pcolor:#000000;/pcolor:#000000;/*文字颜色文字颜色 */margin:0px;margin:0px;padding-top:10p

10、x;padding-top:10px;padding-left:5px;padding-left:5px;padding-right:5px;padding-right:5px;spanfloat:left;/spanfloat:left;/*首字放大首字放大 */font-size:60px;font-size:60px;font-family:font-family:黑体黑体;margin:0px;margin:0px;padding-right:5px;padding-right:5px;206.2.3 6.2.3 图文混排图文混排 216.2.4 6.2.4 制作八大行星科普网页实例制

11、作八大行星科普网页实例图图6.23 八大行星页面八大行星页面226.2.5 6.2.5 设置图片与文字的对齐方式设置图片与文字的对齐方式1 1横向对齐方式横向对齐方式 图片水平对齐的方式与上一章中文字水平图片水平对齐的方式与上一章中文字水平对齐的方式基本相同，分为左、中、右对齐的方式基本相同，分为左、中、右3种。种。不同的是图片的水平对齐通常不能直接通不同的是图片的水平对齐通常不能直接通过设置图片的过设置图片的text-align属性，而是通过设属性，而是通过设置其父元素的该属性来实现的。置其父元素的该属性来实现的。23 6.2.5 6.2.5 设置图片与文字的对齐方设置图片与文字的对齐方式式

12、 水平对齐水平对齐#p1text-align:left#p2text-align:center#p3text-align:right 246.2.5 6.2.5 设置图片与文字的对齐方式设置图片与文字的对齐方式 图图6.26 水平对齐水平对齐252 2纵向对齐方式纵向对齐方式有如下代码：有如下代码：lpsum 图图11.27 默认的纵向对齐方式默认的纵向对齐方式 262 2纵向对齐方式纵向对齐方式 由此可以得出结论，在默认情况下，行内由此可以得出结论，在默认情况下，行内的图像的最下端，将与同行的文字的基线的图像的最下端，将与同行的文字的基线对齐。对齐。图图6.28 图像与文字基线对齐图像与文字

13、基线对齐27 2 2纵向对齐方式纵向对齐方式用用vertical-align属性。属性。lpsum 28 2 2纵向对齐方式纵向对齐方式图图6.30 图像与文字顶端对齐图像与文字顶端对齐 296.3 用用CSS设置背景样式设置背景样式 306.3.1 6.3.1 设置背景颜色设置背景颜色 在在CSS中，网页元素的背景颜色使用中，网页元素的背景颜色使用background-color属性来设置，属性值为某属性来设置，属性值为某种颜色。种颜色。316.3.2 6.3.2 设置背景图像设置背景图像 设置背景图像使用设置背景图像使用background-image属性属性实现。实现。bodybackg

14、round-image:url(bg.gif);在默认情况下，图像会自动向水平和竖直在默认情况下，图像会自动向水平和竖直两个方向平铺。两个方向平铺。326.3.3 6.3.3 设置背景图像平铺设置背景图像平铺 如果不希望平铺，或者只希望沿着一个方如果不希望平铺，或者只希望沿着一个方向平铺，可以使用向平铺，可以使用background-repeat属性属性来控制。来控制。repeat：沿水平和竖直两个方向平铺，：沿水平和竖直两个方向平铺，这也是默认值。这也是默认值。no-repeat：不平铺，只显示一次。：不平铺，只显示一次。repeat-x：只沿水平方向平铺。：只沿水平方向平铺。repeat-

15、y：只沿竖直方向平铺。：只沿竖直方向平铺。336.3.3 6.3.3 设置背景图像平铺设置背景图像平铺 首先准备一个图像。然后，对首先准备一个图像。然后，对body元素设元素设置如下置如下CSS样式样式.bodybackground-image:url(bg.gif);background-repeat:repeat-x;346.3.3 6.3.3 设置背景图像平铺设置背景图像平铺35 当背景图像不平铺时，默认位置为左上角。可用当背景图像不平铺时，默认位置为左上角。可用background-position属性来设置背景图像的位置。属性来设置背景图像的位置。如：如：bodybackground

16、-image:url(bg.gif);background-repeat:no-repeat;background-position：right bottom;background-position：200px 100px;background-position：30%60%;36 网页的背景图像会随滚动条的移动而移动，网页的背景图像会随滚动条的移动而移动，使用使用background-attachment属性可将背景属性可将背景图像位置固定。图像位置固定。如：如：bodybackground-image:url(bg.gif);background-repeat:no-repeat;background-position：30%60%;background-attachment：fixed;376.3.6 6.3.6 设置标题的图像替换设置标题的图像替换 图图6.54 文字标题效果文字标题效果 38 图图6.55 制作一个标题背景图像制作一个标题背景图像39 图图6.56 显示标题图像显示标题图像 40 图图6.57 图像替换的最终效果图像替换的最终效果41