网页设计与制作教程（HTML+CSS+JavaScript） 教学配套课件 刘瑞新 第6章 用CSS设置文本和图像.pdfVIP

网页设计与制作教程 网页设计与制作教程 （HTML+CSS+JavaScript） （HTML+CSS+JavaScript） 机械工业出版社同名教材 机械工业出版社同名教材 配套电子教案 配套电子教案 第6章 用CSS设置文本和图像 第6章 用CSS设置文本和图像 6.1 设置文字的样式 6.1 设置文字的样式 6.2 设置段落的样式 6.2 设置段落的样式 6.3 设置图片样式 6.3 设置图片样式 6.4 设置背景 6.4 设置背景 6.5 图文混排 6.5 图文混排 6.6 用CSS设置文本和图像综合案例 6.6 用CSS设置文本和图像综合案例 6.1 设置文字的样式 6.1 设置文字的样式 6.1.1 设置文字的字体 6.1.1 设置文字的字体 在HTML中，设置文字的字体需要通过 标记的face 在HTML中，设置文字的字体需要通过 标记的face 属性。而在CSS中，则使用font-family属性。 属性。而在CSS中，则使用font-family属性。 语法：font-family : 字体名称 语法：font-family : 字体名称 【演练6-1】字体设置，本例页面6-1.html的显示效果如图6-1所示。 【演练6-1】字体设置，本例页面6-1.html的显示效果如图6-1所示。 6.1 设置文字的样式 6.1 设置文字的样式 6.1.2 设置字体的大小 6.1.2 设置字体的大小 在设计页面时，通常使用不同大小的字体来突出要表现 在设计页面时，通常使用不同大小的字体来突出要表现 的主题，在CSS样式中使用font-size属性设置字体的大小。 的主题，在CSS样式中使用font-size属性设置字体的大小。 语法：font-size : 绝对尺寸 | 相对尺寸 | 百分数 语法：font-size : 绝对尺寸 | 相对尺寸 | 百分数 【演练6-2】字体大小设置，本例页面6-2.html的显示效果如图6-2所示。 【演练6-2】字体大小设置，本例页面6-2.html的显示效果如图6-2所示。 6.1 设置文字的样式 6.1 设置文字的样式 6.1.3 设置字体的粗细 6.1.3 设置字体的粗细 CSS样式中使用font-weight属性设置字体的粗细。 CSS样式中使用font-weight属性设置字体的粗细。 语法：font-weight : bold | number | normal 语法：font-weight : bold | number | normal 【演练6-3】字体粗细设置，本例页面6-3.html的显示效果如图6-3所示。 【演练6-3】字体粗细设置，本例页面6-3.html的显示效果如图6-3所示。 6.1 设置文字的样式 6.1 设置文字的样式 6.1.4 设置字体的倾斜 6.1.4 设置字体的倾斜 CSS中的font-style属性用来设置字体的倾斜。 CSS中的font-style属性用来设置字体的倾斜。 语法：font-style : normal || italic || oblique 语法：font-style : normal || italic || oblique 【演练6-4 】字体倾斜设置，本例页面6-4.html的显示效果如图6-4所示。 【演练6-4 】字体倾斜设置，本例页面6-4.html的显示效果如图6-4所示。 6.1 设置文字的样式 6.1 设置文字的样式 6.1.5 设置字体的修饰 6.1.5 设置字体的修饰 使用CSS样式可以对文本进行简单的修饰，例如给文字 使用CSS样式可以对文本进行简单的修饰，例如给文字 添加下划线、顶划线和删除线，它是通过text-decoration 添加下划线、顶划线和删除线，它是通过text-decoration 属性来实现这些效果的。 属性来实现这些效果的。 语法：text-decoration : underline || blink || overline || line- 语法：text-decoration : underline || blink || overline || line- through | none through | none 【演练6-5】字体修饰设置，本例页面6-5.html的显示效果如图6-5所示。 【演练6-5】字体修饰设置，本例页面6-5.html的显示效果如图6-5所示。 6.1 设置文字的样式 6.1 设置文字的样式 6.1.6 设置字体的阴影 6.1.6 设置字体的阴影 在CSS3中新增了设置字体阴影的功能，它是通过text- 在CSS3中新增了设置字体阴影