第10章用CSS设置文本和图像.ppt

1、网页制作综合技术教程网页制作综合技术教程第第3 3部分部分 CSSCSS样式设计样式设计 使用使用CSSCSS设置文本样式设置文本样式10.110.1用用CSSCSS设置图像样式设置图像样式10.210.2用用CSSCSS设置背景样式设置背景样式10.310.310.1 10.1 使用使用CSSCSS设置文本样式设置文本样式10.1.1 10.1.1 长度单位长度单位1 1相对类型相对类型 （1）px（pixel） （2）em 2 2绝对类型绝对类型尺度单位名尺度单位名说说 明明inin（英寸）（英寸）不是国际标准单位，平常极少使用不是国际标准单位，平常极少使用cmcm（厘米）（厘米）国际标准

2、单位，较少用国际标准单位，较少用mmmm（毫米）（毫米）国际标准单位，较少用国际标准单位，较少用ptpt（点数）（点数）最基本的显示单位，较少用最基本的显示单位，较少用pcpc（印刷单位）（印刷单位）应用在印刷行业中，应用在印刷行业中，1pc = 12pt1pc = 12pt表表10.1绝对类型的尺度单位绝对类型的尺度单位10.1.2 10.1.2 准备页面准备页面图图10.1 预备用于设置预备用于设置CSS样式的网页文件样式的网页文件10.1.3 10.1.3 设置文字的字体设置文字的字体图图10.2 设置正文字体设置正文字体10.1.4 10.1.4 设置文字的倾斜效果设置文字的倾斜效果a

3、 a a aa a图图10.3 正常字体与正常字体与“意大利体意大利体”、“倾斜体倾斜体”的对比的对比 图图10.4 设置文本倾斜后的效果设置文本倾斜后的效果10.1.5 10.1.5 设置文字的加粗效果设置文字的加粗效果设设 置置 值值说说 明明normalnormal正常粗细正常粗细boldbold粗体粗体bolderbolder加粗体加粗体lighterlighter比正常粗细要细比正常粗细要细100-900100-900共有共有9 9个层次（个层次（100100，200900200900），数字越大字体越粗），数字越大字体越粗表表10.2 font-weight属性的设置值属性的设置值

4、10.1.6 10.1.6 英文字母大小写转换英文字母大小写转换p.one text-transform:capitalize; /* 单词首字大写单词首字大写 */p.two text-transform:uppercase; /* 全部大写全部大写 */p.three text-transform:lowercase; /* 全部小写全部小写 */ 图图10.5 设置英文单词的大小写形式设置英文单词的大小写形式10.1.7 10.1.7 控制文字的大小控制文字的大小 图图10.6 10.6 修改正文文字大小后的效果修改正文文字大小后的效果 图图10.7 设置段首的字母放大并下沉显示设置段首

5、的字母放大并下沉显示 10.1.8 10.1.8 文字的装饰效果文字的装饰效果设设 置置 值值说说 明明none正常显示正常显示underline为文字加下画线为文字加下画线line-through为文字加删除线为文字加删除线overline为文字加顶线为文字加顶线blink文字闪烁，仅部分浏览器支持文字闪烁，仅部分浏览器支持表表10.3 text-decoration属性的设置值属性的设置值 图图10.8 设置文本的装饰效果设置文本的装饰效果10.1.9 10.1.9 设置段落首行缩进设置段落首行缩进图图10.9 设置段落中首行文本缩进设置段落中首行文本缩进 图图10.10 设置段落中首行文

6、本悬挂缩进设置段落中首行文本悬挂缩进10.1.10 10.1.10 设置字词间距设置字词间距图图10.11 设置字词间距设置字词间距10.1.11 10.1.11 设置段落内部的文字行高设置段落内部的文字行高 如果不使用如果不使用CSS，在，在HTML中是无法控、中是无法控、制段落中行与行之间的距离的。制段落中行与行之间的距离的。 在在CSS中，中，line-height属性用于控制行属性用于控制行的高度，通过它可以调整行与行之间的距离。的高度，通过它可以调整行与行之间的距离。 关于关于line-height属性的设置值如表属性的设置值如表10.4所示。所示。 设设 置置 值值说说 明明长度长

7、度数值，可以使用前面所介绍的尺度单位数值，可以使用前面所介绍的尺度单位倍数倍数font-size属性设置值的倍数属性设置值的倍数百分比百分比相对于相对于font-size属性设置值的百分比属性设置值的百分比表表10.4 line-height属性的设置值属性的设置值 图图10.12 设置段落中的行高设置段落中的行高10.1.12 10.1.12 设置段落之间的距离设置段落之间的距离 图图10.14 调整段落间距后的效果调整段落间距后的效果10.1.13 10.1.13 控制文本的水平位置控制文本的水平位置设设 置置 值值说说 明明left左对齐，浏览器默认左对齐，浏览器默认right右对齐右对

8、齐center居中对齐居中对齐justify两端对齐两端对齐表表10.5 text-align属性的设置值属性的设置值 图图10.15 标题居中对齐标题居中对齐10.1.14 10.1.14 设置文字与背景的颜色设置文字与背景的颜色图图10.16 设置标题背景颜色和文字颜色设置标题背景颜色和文字颜色10.2 10.2 用用CSSCSS设置图像样式设置图像样式10.2.1 10.2.1 设置图片边框设置图片边框1 1基本属性基本属性在在CSS中，一个边框由以下中，一个边框由以下3个要素组个要素组成。成。 （1）border-width（粗细）：可以使（粗细）：可以使用各种用各种CSS中的长度单位

9、，最常用的是像素。中的长度单位，最常用的是像素。 （2）border-color（颜色）：可以使（颜色）：可以使用用各种合法的颜色来定义方式。各种合法的颜色来定义方式。 （3）border-style（线型）：可以在一（线型）：可以在一些预先定义好的线型中选择。些预先定义好的线型中选择。 图图10.17 设置各种图片边框设置各种图片边框2 2为不同的边框分别设置样式为不同的边框分别设置样式图图10.19 边框效果边框效果10.2.2 10.2.2 图片缩放图片缩放10.2.3 10.2.3 图文混排图文混排1 1文字环绕文字环绕 图图10.20 文字环绕文字环绕 10.2.4 10.2.4 案

10、例案例八大行星科普网页八大行星科普网页本例以介绍太阳系的八大行星为题材，本例以介绍太阳系的八大行星为题材，充分利用充分利用CSS图文混排的方法，实现页面的图文混排的方法，实现页面的效果。效果。实例的最终效果如图实例的最终效果如图10.23所示。所示。 图图10.23 八大行星页面八大行星页面10.2.5 10.2.5 设置图片与文字的对齐方式设置图片与文字的对齐方式1 1水平对齐方式水平对齐方式 图图10.26 水平对齐水平对齐2 2竖直对齐方式竖直对齐方式图图10.27 默认的纵向对齐方式默认的纵向对齐方式 图图10.28 图像与文字基线对齐图像与文字基线对齐 图图10.29 图像与文字底端

11、对齐图像与文字底端对齐 图图10.30 图像与文字顶端对齐图像与文字顶端对齐 图图10.31 图像与文字中间对齐图像与文字中间对齐10.3 10.3 用用CSSCSS设置背景样式设置背景样式10.3.1 10.3.1 设置背景颜色设置背景颜色 图图10.35 设置标题设置标题“蓝底白字蓝底白字”效果效果10.3.2 10.3.2 设置背景图像设置背景图像 图图10.37 页面的页面的body元素设置了背景图像后的效果元素设置了背景图像后的效果10.3.3 10.3.3 设置背景图像平铺设置背景图像平铺该属性可以设置为以下该属性可以设置为以下4种值之一。种值之一。repeat：沿水平和竖直两个方

12、向平：沿水平和竖直两个方向平铺，这也是默认值。铺，这也是默认值。no-repeat：不平铺，即只显示一：不平铺，即只显示一次。次。repeat-x：只沿水平方向平铺。：只沿水平方向平铺。repeat-y：只沿竖直方向平铺。：只沿竖直方向平铺。 图图10.41 设置背景颜色后的效果设置背景颜色后的效果 图图10.42 水平方向平铺背景图像的效果水平方向平铺背景图像的效果 图图10.43 同时设置背景图像和背景颜色同时设置背景图像和背景颜色 图图10.44 网页效果图网页效果图10.3.4 10.3.4 设置背景图像位置设置背景图像位置图图10.46 将背景图像放在右下角将背景图像放在右下角 图图10.47 用数值设置背景图像的位置用数值设置背景图像的位置 图图10.48 用百分比设置背景图像的位置用百分比设置背景图像的位置10.3.6 10.3.6 设置标题的图像替换设置标题的图像替换 图图10.53 文字标题效果文字标题效果 图图10.54 制作一个标题背景图像制作一个标题背景图像 图图10.55 显示标题图像显示标题图像 图图10.56 图像替换的最终效果图像替换的最终效果