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

网页设计与制作教程（HTML+CSS+JavaScript） 机械工业出版社同名教材 配套电子教案 * * 6.1 设置文字的样式 6.2 设置段落的样式 6.3 设置图片样式 6.4 设置背景 6.5 图文混排 6.6 用CSS设置文本和图像综合案例 第6章 用CSS设置文本和图像 6.1.1 设置文字的字体 在HTML中，设置文字的字体需要通过font标记的face属性。而在CSS中，则使用font-family属性。 语法：font-family : 字体名称 【演练6-1】字体设置，本例页面6-1.html的显示效果如图6-1所示。 6.1 设置文字的样式 6.1.2 设置字体的大小 在设计页面时，通常使用不同大小的字体来突出要表现的主题，在CSS样式中使用font-size属性设置字体的大小。 语法：font-size : 绝对尺寸 | 相对尺寸 | 百分数 【演练6-2】字体大小设置，本例页面6-2.html的显示效果如图6-2所示。 6.1 设置文字的样式 6.1.3 设置字体的粗细 CSS样式中使用font-weight属性设置字体的粗细。 语法：font-weight : bold | number | normal 【演练6-3】字体粗细设置，本例页面6-3.html的显示效果如图6-3所示。 6.1 设置文字的样式 6.1.4 设置字体的倾斜 CSS中的font-style属性用来设置字体的倾斜。 语法：font-style : normal || italic || oblique 【演练6-4】字体倾斜设置，本例页面6-4.html的显示效果如图6-4所示。 6.1 设置文字的样式 6.1.5 设置字体的修饰 使用CSS样式可以对文本进行简单的修饰，例如给文字添加下划线、顶划线和删除线，它是通过text-decoration属性来实现这些效果的。 语法：text-decoration : underline || blink || overline || line-through | none 【演练6-5】字体修饰设置，本例页面6-5.html的显示效果如图6-5所示。 6.1 设置文字的样式 6.1.6 设置字体的阴影 在CSS3中新增了设置字体阴影的功能，它是通过text-shadow属性来实现这个效果的。 语法：text-shadow :color ||length || length||opacity 6.1 设置文字的样式 6.2.1 设置文字的对齐方式 使用CSS样式可以设置文字的对齐方式，它是通过text-align属性来实现这些效果的。 语法：text-align : left | right | center | justify 6.2 设置段落的样式 6.2.2 设置首行缩进 在CSS样式中text-indent属性可以方便地实现文本缩进。 语法：text-indent : length 【演练6-6】设置首行缩进，本例页面6-6.html的显示效果如图6-8所示。 6.2 设置段落的样式 6.2.3 设置首字下沉 在CSS样式中伪对象:first-letter可以实现对象内第一个字符的样式控制。 【演练6-7】设置首字下沉，本例页面6-7.html的显示效果如图6-9所示。 6.2 设置段落的样式 6.2.4 设置行高 在CSS样式中，使用line-height属性控制行与行之间的垂直间距。 语法：line-height : length | normal 【演练6-8】设置行高，本例页面6-8.html的显示效果如图6-10所示。 6.2 设置段落的样式 6.2.5 设置文本换行 在CSS3中新增了设置文本换行的功能，它是通过word-wrap属性来实现这个效果的。 语法：word-wrap ：normal | break-word 6.2 设置段落的样式 6.3.1 图片的边框 如果希望更换边框的颜色，或者换成虚线边框，仅仅依靠HTML都是无法实现的。下面的实例讲解了如何用CSS样式美化图片的边框。 【演练6-9】设置图片边框，本例页面6-9.html的显示效果如图6-12所示。 6.3 设置图片样式 6.3.2 图片的缩放 使用CSS样式控制图片的大小，可以通过width和height两个属性来实现。 【演练6-10】设置图片缩放，本例页面6-10.html的显示效果如图6-13所示。 6.3 设置图片样式 6.4.1 设置背景颜色 在CSS中，网页元素的背景颜色使用background-color属性来