用CSS设置文本和图像.ppt

p竖直对齐img src=donkey.jpg style=vertical-align:text-bottom;方式:text-bottomimg src=miki.jpg style=vertical-align:text-bottom;方式/p p竖直对齐img src=donkey.jpg style=vertical-align:text-top;方式:text-topimg src=miki.jpg style=vertical-align:text-top;方式/p p竖直对齐img src=donkey.jpg style=vertical-align:sub;方式:subimg src=miki.jpg style=vertical-align:sub;方式/p p竖直对齐img src=donkey.jpg style=vertical-align:super;方式:superimg src=miki.jpg style=vertical-align:super;方式/p /body /html 图6.32 竖直对齐方式 6.3 用CSS设置背景样式 6.3.1 设置背景颜色 在HTML中，设置网页的背景颜色利用的是body标记中的bgcolor属性，而在CSS中不但可以设置网页的背景颜色，还可以设置文字的背景颜色。 在CSS中，网页元素的背景颜色使用background-color属性来设置，属性值为某种颜色。 颜色值的表示方法和前面介绍的文字颜色设置方法相同。 6.3.2 设置背景图像 设置背景图像，使用background-image属性实现。 仍然以上面的实例为基础，在CSS样式部分，增加如下样式代码。 body{ background-image:url(bg.gif); } 6.3.3 设置背景图像平铺 在默认情况下，图像会自动向水平和竖直两个方向平铺。 如果不希望平铺，或者只希望沿着一个方向平铺，可以使用background-repeat属性来控制。该属性可以设置为以下4种之一。 ? repeat：沿水平和竖直两个方向平铺，这也是默认值。 ? no-repeat：不平铺，即只显示一次。 ? repeat-x：只沿水平方向平铺。 ? repeat-y：只沿竖直方向平铺。 首先准备一个如图6.40所示的图像。 图6.40 渐变色构成的背景图像 然后，对body元素设置如下CSS样式，并去除刚才对h1标题的背景图像设置。 6.3.6 设置标题的图像替换 图6.54 文字标题效果 图6.55 制作一个标题背景图像 图6.56 显示标题图像 图6.57 图像替换的最终效果 1．文字环绕 文字环绕图片的方式在实际页面中的应用非常广泛，如果再配合内容、背景等多种手段便可以实现各种绚丽的效果。 在CSS中主要是通过给图片设置float属性来实现文字环绕，如下例所示。 代码如下，实例文件为“06-18.html”。 html head title图文混排/title style type=text/css body{ background-color:#EAECDF; /* 页面背景颜色 */ margin:0px; padding:0px; } img{ float:right; /* 文字环绕图片 */ } p{ color:#000000; /* 文字颜色 */ margin:0px; padding-top:10px; padding-left:5px; padding-right:5px; } span{ float:left; /* 首字放大 */ font-size:60px; font-family:黑体; margin:0px; padding-right:5px; } /style /head body img src=zcz.jpg border=0 图6.20 文字环绕 图6.21