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

第2章 CSS选择器与相关特性 2.4 复合选择器 2.5 CSS的继承特性 2.4 复合选择器 2.4.1 交集选择器 2.4.1 交集选择器 2.4.1 交集选择器 style type=text/css p{color:blue; /* 标记选择器 */ } .special{color:green; /* 类别选择器 */ } p.special{color:red; /* 标记.类别选择器 */ } /style /head body h3普通标题文本/h3 p普通段落文本/p h3 class=special指定了.special类别的标题文本/h3 p class=special指定了.special类别的段落文本/p /body 2.4.2 并集选择器 2.4.2 并集选择器 style type=text/css h1, h2, h3, p{ /*并集选择器*/ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline; /* 下画线 */ } /style /head body h1示例文字h1/h1 h2 class=special示例文字h2/h2 h3示例文字h3/h3 p示例文字p1/p p class=special示例文字p2/p p id=one示例文字p3/p /body /html 2.4.3 后代选择器 html head title后代选择器/title style type=text/css p span{color:red; /* 嵌套声明 */ } span{color:blue; } /style /head body h3嵌套之外的span标记（蓝色）/span不生效/h3 p嵌套使span用CSS（红色）/span标记的方法/p /body /html 2.4.3 后代选择器 a{background-color:#FFFF00; } #navi a{text-decoration:none; color:#FFFFFF; } /style /head body a href=first.htmlimg src=images/title.gif / div id=navi a href=#files/a a href=#edit/a a href=#see/a a href=#format/a /div /body 2.5 CSS的继承特性 2.6 CSS的层叠特性 （1）行内式嵌入式外部式。 （2）特殊性越高的元素，其样式的优先级越高。 （3）外部样式中，出现在后面的优先级高于出现在前面的。 第6章 用CSS设置文本和图象 6.1使用CSS设置文字样式 6.2使用CSS设置图象样式 6.3使用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 设置图片与文字的对齐方式 6.2.1 设置图片边框 边框的样式用border-style来定义 一个边框由3个要素组成。 （1）border-width（粗细）：可以使用各种CSS中的长度单位，最常用的是像素。 （2）border-color（颜色）：可以使用各种合法的颜色来定义颜色。 （3）border-style（线型）：可以在一些预先定义好的线型中选择。 6.2.1 设置图片边框 style type=text/css .test1{ border-width:4px; /* 边框粗细 */ border-color:#996600; /* 边框颜色 */ border-style:dotted; /* 点画线 */ } .test2{ border:2px blue dashed; } /style body img src=cup.gif class=tes