网页制作综合技术教程课件温谦赵伟胡静李占波第10章节用CSS设置文本和图像.pptVIP

网页制作综合技术教程 第3部分 CSS样式设计 第10章 用CSS设置文本和图像 10.1 使用CSS设置文本样式 10.1.1 长度单位 1．相对类型 （1）px（pixel） （2）em 2．绝对类型 10.1.2 准备页面 10.1.3 设置文字的字体 10.1.4 设置文字的倾斜效果 a a a 10.1.5 设置文字的加粗效果 10.1.6 英文字母大小写转换 p.one{ text-transform:capitalize; } /* 单词首字大写 */ p.two{ text-transform:uppercase; } /* 全部大写 */ p.three{ text-transform:lowercase; } /* 全部小写 */ 10.1.7 控制文字的大小 10.1.8 文字的装饰效果 10.1.9 设置段落首行缩进 10.1.10 设置字词间距 10.1.11 设置段落内部的文字行高 如果不使用CSS，在HTML中是无法控、 制段落中行与行之间的距离的。 在CSS中，line-height属性用于控制行 的高度，通过它可以调整行与行之间的距离。 关于line-height属性的设置值如表10.4 所示。 10.1.12 设置段落之间的距离 10.1.13 控制文本的水平位置 10.1.14 设置文字与背景的颜色 10.2 用CSS设置图像样式 10.2.1 设置图片边框 1．基本属性 在CSS中，一个边框由以下3个要素组 成。 （1）border-width（粗细）：可以使 用各种CSS中的长度单位，最常用的是像素。 （2）border-color（颜色）：可以使用 各种合法的颜色来定义方式。 （3）border-style（线型）：可以在一 些预先定义好的线型中选择。 2．为不同的边框分别设置样式 10.2.2 图片缩放 10.2.3 图文混排 1．文字环绕 10.2.4 案例—八大行星科普网页 本例以介绍太阳系的八大行星为题材， 充分利用CSS图文混排的方法，实现页面的 效果。 实例的最终效果如图10.23所示。 10.2.5 设置图片与文字的对齐方式 1．水平对齐方式 2．竖直对齐方式 10.3 用CSS设置背景样式 10.3.1 设置背景颜色 10.3.2 设置背景图像 10.3.3 设置背景图像平铺 该属性可以设置为以下4种值之一。 ● repeat：沿水平和竖直两个方向平 铺，这也是默认值。 ● no-repeat：不平铺，即只显示一 次。 ● repeat-x：只沿水平方向平铺。 ● repeat-y：只沿竖直方向平铺。 10.3.4 设置背景图像位置 10.3.6 设置标题的图像替换 图10.17 设置各种图片边框 图10.19 边框效果 图10.20 文字环绕 图10.23 八大行星页面 图10.26 水平对齐 图10.27 默认的纵向对齐方式 图10.28 图像与文字基线对齐 图10.29 图像与文字底端对齐 图10.30 图像与文字顶端对齐 图10.31 图像与文字中间对齐 图10.35 设置标题“蓝底白字”效果 图10.37 页面的body元素设置了背景图像后的效果 图10.41 设置背景颜色后的效果 ?图10.42 水平方向平铺背景图像的效果 图10.43 同时设置背景图像和背景颜色 图10.44 网页效果图 图10.46 将背景图像放在右下角 图10.47 用数值设置背景图像的位置 * 尚辅网 / 使用CSS设置文本样式 10.1 用CSS设置图像样式 10.2 用CSS设置背景样式 10.3 应用在印刷行业中，1pc?=?12pt pc（印刷单位） 最基本的显示单位，较少用 pt（点数） 国际标准单位，较少用 mm（毫米） 国际标准单位，较少用 cm（厘米） 不是国际标准单位，平常极少使用 in（英寸） 说 明 尺度单位名 表10.1 绝对类型的尺度单位 图10.1 预备用于设置CSS样式的网页文件 图10.2 设置正文字体 图10.3 正常字体与“意大利体”、“倾斜体”的