用CSS设置文本和图像

《用CSS设置文本和图像》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网页制作综合技术教程第3部分CSS样式设计第10章用CSS设置文本和图像使用CSS设置文本样式10.1用CSS设置图像样式10.2用CSS设置背景样式10.310.1使用CSS设置文本样式10.1.1长度单位1．相对类型（1）px（pixel）（2）em2．绝对类型尺度单位名说明in（英寸）不是国际标准单位，平常极少使用cm（厘米）国际标准单位，较少用mm（毫米）国际标准单位，较少用pt（点数）最基本的显示单位，较少用pc（印刷单位）应用在印刷行业中，1pc=12pt表10.1绝对类型的尺度单位10.1.2准备页面图10.1预备用于设置CSS样式的网页

2、文件10.1.3设置文字的字体图10.2设置正文字体10.1.4设置文字的倾斜效果aaa图10.3正常字体与“意大利体”、“倾斜体”的对比图10.4设置文本倾斜后的效果10.1.5设置文字的加粗效果设置值说明normal正常粗细bold粗体bolder加粗体lighter比正常粗细要细100-900共有9个层次（100，200…900），数字越大字体越粗表10.2font-weight属性的设置值10.1.6英文字母大小写转换p.one{text-transform:capitalize;}/*单词首字大写*/p.two{text-transform

3、:uppercase;}/*全部大写*/p.three{text-transform:lowercase;}/*全部小写*/图10.5设置英文单词的大小写形式10.1.7控制文字的大小图10.6修改正文文字大小后的效果图10.7设置段首的字母放大并下沉显示10.1.8文字的装饰效果设置值说明none正常显示underline为文字加下画线line-through为文字加删除线overline为文字加顶线blink文字闪烁，仅部分浏览器支持表10.3text-decoration属性的设置值图10.8设置文本的装饰效果10.1.9设置段落首行缩进图10.

4、9设置段落中首行文本缩进图10.10设置段落中首行文本悬挂缩进10.1.10设置字词间距图10.11设置字词间距10.1.11设置段落内部的文字行高如果不使用CSS，在HTML中是无法控、制段落中行与行之间的距离的。在CSS中，line-height属性用于控制行的高度，通过它可以调整行与行之间的距离。关于line-height属性的设置值如表10.4所示。设置值说明长度数值，可以使用前面所介绍的尺度单位倍数font-size属性设置值的倍数百分比相对于font-size属性设置值的百分比表10.4line-height属性的设置值图10.12设置段落

5、中的行高10.1.12设置段落之间的距离图10.14调整段落间距后的效果10.1.13控制文本的水平位置设置值说明left左对齐，浏览器默认right右对齐center居中对齐justify两端对齐表10.5text-align属性的设置值图10.15标题居中对齐10.1.14设置文字与背景的颜色图10.16设置标题背景颜色和文字颜色10.2用CSS设置图像样式10.2.1设置图片边框1．基本属性在CSS中，一个边框由以下3个要素组成。（1）border-width（粗细）：可以使用各种CSS中的长度单位，最常用的是像素。（2）border-color

6、（颜色）：可以使用各种合法的颜色来定义方式。（3）border-style（线型）：可以在一些预先定义好的线型中选择。图10.17设置各种图片边框2．为不同的边框分别设置样式图10.19边框效果10.2.2图片缩放10.2.3图文混排1．文字环绕图10.20文字环绕10.2.4案例—八大行星科普网页本例以介绍太阳系的八大行星为题材，充分利用CSS图文混排的方法，实现页面的效果。实例的最终效果如图10.23所示。图10.23八大行星页面10.2.5设置图片与文字的对齐方式1．水平对齐方式图10.26水平对齐2．竖直对齐方式图10.27默认的纵向对齐方式图

7、10.28图像与文字基线对齐图10.29图像与文字底端对齐图10.30图像与文字顶端对齐图10.31图像与文字中间对齐10.3用CSS设置背景样式10.3.1设置背景颜色图10.35设置标题“蓝底白字”效果10.3.2设置背景图像图10.37页面的body元素设置了背景图像后的效果10.3.3设置背景图像平铺该属性可以设置为以下4种值之一。●repeat：沿水平和竖直两个方向平铺，这也是默认值。●no-repeat：不平铺，即只显示一次。●repeat-x：只沿水平方向平铺。●repeat-y：只沿竖直方向平铺。图10.41设置背景颜色后的效果图10.

8、42水平方向平铺背景图像的效果图10.43同时设置背景图像和背景颜色图10.44网页效果图10