1、网页制作综合技术教程 第3部分CSS样式设计 第10章用CSS设置文本和图像 10 1使用CSS设置文本样式 10 1 1长度单位1 相对类型 1 px pixel 2 em 2 绝对类型 表10 1绝对类型的尺度单位 10 1 2准备页面 图10 1预备用于设置CSS样式的网页文件 10 1 3设置文字的字体 图10 2设置正文字体 10 1 4设置文字的倾斜效果 aaa 图10 3正常字体与 意大利体 倾斜体 的对比 图10 4设置文本倾斜后的效果 10 1 5设置文字的加粗效果 表10 2font weight属性的设置值 10 1 6英文字母大小写转换 p one text trans
2、form capitalize 单词首字大写 p two text transform uppercase 全部大写 p three text transform lowercase 全部小写 图10 5设置英文单词的大小写形式 10 1 7控制文字的大小 图10 6修改正文文字大小后的效果 图10 7设置段首的字母放大并下沉显示 10 1 8文字的装饰效果 表10 3text decoration属性的设置值 图10 8设置文本的装饰效果 10 1 9设置段落首行缩进 图10 9设置段落中首行文本缩进 图10 10设置段落中首行文本悬挂缩进 10 1 10设置字词间距 图10 11设置字词间
3、距 10 1 11设置段落内部的文字行高 如果不使用CSS 在HTML中是无法控 制段落中行与行之间的距离的 在CSS中 line height属性用于控制行的高度 通过它可以调整行与行之间的距离 关于line height属性的设置值如表10 4所示 表10 4line height属性的设置值 图10 12设置段落中的行高 10 1 12设置段落之间的距离 图10 14调整段落间距后的效果 10 1 13控制文本的水平位置 表10 5text align属性的设置值 图10 15标题居中对齐 10 1 14设置文字与背景的颜色 10 2用CSS设置图像样式 10 2 1设置图片边框1 基本
4、属性在CSS中 一个边框由以下3个要素组成 1 border width 粗细 可以使用各种CSS中的长度单位 最常用的是像素 2 border color 颜色 可以使用各种合法的颜色来定义方式 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八大行星
5、页面 10 2 5设置图片与文字的对齐方式 1 水平对齐方式 图10 26水平对齐 2 竖直对齐方式 图10 27默认的纵向对齐方式 图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 42水平方向平铺背景图像的效果 图10 43同时设置背景图像和背景颜色 图10 44网页效果图 10 3 4设置背景图像位置 图10 46将背景图像放在右下角 图10 47用数值设置背景图像的位置 图10 48用百分比设置背景图像的位置 10 3 6设置标题的图像替换 图10 53文字标题效果 图10 54制作一个标题背景图像 图10 55显示标题图像 图10 56图像替换的最终效果
