资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,2,章,CSS,选择器与相关特性,2.4,复合选择器,2.5 CSS,的继承特性,2.4,复合选择器,2.4.1,交集选择器,2.4.1,交集选择器,图,2.14,交集选择器示意图,2.4.1,交集选择器,pcolor:,blue,; /*,标记选择器 *,/,.specialcolor:,green,; /*,类别选择器 *,/,p.specialcolor:,red,; /*,标记,.,类别选择器 *,/,普通标题文本,普通段落文本,指定了,.special,类别的标题文本,指定了,.special,类别的段落文本,/p,2.4.2,并集选择器,图,2.16,并集选择器示意图,h3, p /*,并集选择器*,/,color:purple; /*,文字颜色 *,/,font-size:15px; /*,字体大小 *,/,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,2.4.3,后代选择器,后代选择器,p,spancolor:red;,/*,嵌套声明 *,/,spancolor:blue;,嵌套之外的,标记（蓝色）,不生效,嵌套使,用,CSS,（红色）,标记的方法,2.4.3,后代选择器,abackground-color:#FFFF00;,#navi atext-decoration:none;,color:#FFFFFF;,files,edit,see,format,2.5 CSS,的继承特性,图,2.20,包含多层列表的页面,前沿,Web,开发,教室,Web,设计与开发需要使用以下技术：,HTML,CSS,选择器,盒子模型,浮动与定位,Javascript,此外，还需要掌握：,Flash,Dreamweaver,Photoshop,如果您有任何问题，欢迎联系我们,图,2.21,继承关系树型图,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,设置图片边框,.test1,border-width:4px; /*,边框粗细 *,/,border-color:#996600; /*,边框颜色 *,/,border-,style:dotted,;,/*,点画线 *,/,.test2,border:2px blue dashed;,其显示效果如图所示。,2,为不同的边框分别设置样式,如果希望分别设置,4,条边框的不同样式，可用以下属性,:,border-top,border-right,border-bottom,border-left,分别设定左、右、上、下,4,条边框。,在使用时，依然是每条边框分别设置粗细、颜色和线型这,3,项。,6.2.2,图片缩放,图片缩放,img.test1width:50,%;/*,相对宽度 *,/,6.2.3,图文混排,1,文字环绕,在,CSS,中主要是通过给图片设置,float,属性来实现文字环绕。,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;,6.2.3,图文混排,6.2.4,制作八大行星科普网页实例,图,6.23,八大行星页面,6.2.5,设置图片与文字的对齐方式,1,横向对齐方式,图片水平对齐的方式与上一章中文字水平对齐的方式基本相同，分为左、中、右,3,种。,不同的是图片的水平对齐通常不能直接通过设置图片的,text-align,属性，而是通过设置其父元素的该属性来实现的。,6.2.5,设置图片与文字的对齐方式,水平对齐,#p1text-align:left,#p2text-align:center,#p3text-align:right,6.2.5,设置图片与文字的对齐方式,图,6.26,水平对齐,2,纵向对齐方式,有如下代码：,lpsum,图,11.27,默认的纵向对齐方式,2,纵向对齐方式,由此可以得出结论，在默认情况下，行内的图像的最下端，将与同行的文字的基线对齐。,图,6.28,图像与文字基线对齐,2,纵向对齐方式,用,vertical-align,属性。,lpsum,2,纵向对齐方式,图,6.30,图像与文字顶端对齐,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,设置标题的图像替换,(),6.3.1,设置背景颜色,在,CSS,中，网页元素的背景颜色使用,background-color,属性来设置，属性值为某种颜色。,6.3.2,设置背景图像,设置背景图像使用,background-image,属性实现。,bodybackground-image:url(bg.gif);,在默认情况下，图像会自动向水平和竖直两个方向平铺。,6.3.3,设置背景图像平铺,如果不希望平铺，或者只希望沿着一个方向平铺，可以使用,background-repeat,属性来控制。,repeat,：沿水平和竖直两个方向平铺，这也是默认值。,no-repeat,：不平铺，只显示一次。,repeat-x,：只沿水平方向平铺。,repeat-y,：只沿竖直方向平铺。,6.3.3,设置背景图像平铺,首先准备一个图像。然后，对,body,元素设置如下,CSS,样式,.,bodybackground-image:url(bg.gif);,background-repeat:repeat-x;,6.3.3,设置背景图像平铺,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%;,6.3.5,设置背景图像位置固定,网页的背景图像会随滚动条的移动而移动，使用,background-attachment,属性可将背景图像位置固定。,如：,body,background-image:url(bg.gif);,background-repeat:no-repeat;,background-position,：,30% 60%;,background-attachment,：,fixed;,6.3.6,设置标题的图像替换,图,6.54,文字标题效果,图,6.55,制作一个标题背景图像,图,6.56,显示标题图像,图,6.57,图像替换的最终效果,
展开阅读全文