第6章 使用CSS修饰常见的网页元素 主讲人：刘泰然 经济管理学院

内 容 概 览 设置文字的样式 设置段落的样式 设置图片样式 设置背景样式 图文混排

6.1 设置文字的样式 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属性设置字体的粗细。 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属性用来设置字体的倾斜。 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 设置文本的颜色 在CSS样式中，对文字增加颜色修饰十分简单，只需添加color属性即可。color属性的语法格式： color:颜色值; 【演练6-6】文本颜色设置，本例页面6-6.html的显示效果如图6-6所示。

6.2 设置段落的样式 6.2.1 设置文字的对齐方式 使用CSS样式可以设置文字的对齐方式，它是通过text-align属性来实现这些效果的。 语法：text-align : left | right | center | justify

6.2 设置段落的样式 6.2.2 设置首行缩进 在CSS样式中text-indent属性可以方便地实现文本缩进。 6.2 设置段落的样式 6.2.2 设置首行缩进 在CSS样式中text-indent属性可以方便地实现文本缩进。 语法：text-indent : length 【演练6-7】设置首行缩进，本例页面6-7.html的显示效果如图6-8所示。

6.2 设置段落的样式 6.2.3 设置首字下沉 在CSS样式中伪对象:first-letter可以实现对象内第一个字符的样式控制。 6.2 设置段落的样式 6.2.3 设置首字下沉 在CSS样式中伪对象:first-letter可以实现对象内第一个字符的样式控制。 【演练6-8】设置首字下沉，本例页面6-8.html的显示效果如图6-9所示。

6.2 设置段落的样式 6.2.4 设置行高 在CSS样式中，使用line-height属性控制行与行之间的垂直间距。 6.2 设置段落的样式 6.2.4 设置行高 在CSS样式中，使用line-height属性控制行与行之间的垂直间距。 语法：line-height : length | normal 【演练6-9】设置行高，本例页面6-9.html的显示效果如图6-10所示。

6.2 设置段落的样式 6.2.5 设置字间距 在CSS样式中，使用word-spacing属性设置字（单词）之间的间距。 6.2 设置段落的样式 6.2.5 设置字间距 在CSS样式中，使用word-spacing属性设置字（单词）之间的间距。 语法：word-spacing ：length | normal 【演练6-10】设置字间距，本例页面6-10.html的显示效果如图6-11所示。

6.2 设置段落的样式 6.2.6 设置字符间距 在CSS样式中，使用letter-spacing属性设置字符或字母之间的间距。 6.2 设置段落的样式 6.2.6 设置字符间距 在CSS样式中，使用letter-spacing属性设置字符或字母之间的间距。 语法：letter-spacing ：length | normal 【演练6-11】设置字符间距，本例页面6-11.html的显示效果如图6-12所示。

6.2 设置段落的样式 6.2.7 设置文本的大小写 在CSS样式中，使用text-transform属性设置文本的大小写。 6.2 设置段落的样式 6.2.7 设置文本的大小写 在CSS样式中，使用text-transform属性设置文本的大小写。 语法：text-transform ：none | capitalize | uppercase | lowercase 【演练6-12】设置文本的大小写，本例页面6-12.html的显示效果如图6-13所示。

6.3 设置图片样式 6.3.1 图片的边框 在HTML中可以直接通过<img>标记的border属性值为图片添加边框，属性值为边框的粗细，以像素为单位，从而控制边框的粗细。当设置border属性值为0时，则显示为没有边框。 【演练 6-13】设置图片边框，本例页面6-13.html的显示效果如图6-15所示。

6.3 设置图片样式 6.3.2 图片的缩放 使用CSS样式控制图片的大小，可以通过width和height两个属性来实现。 6.3 设置图片样式 6.3.2 图片的缩放 使用CSS样式控制图片的大小，可以通过width和height两个属性来实现。 【演练 6-14】设置图片缩放，本例页面6-14.html的显示效果如图6-16所示。

6.4 设置背景 6.4.1 设置背景颜色 在CSS中，网页元素的背景颜色使用background-color属性来设置，属性值为某种颜色。 6.4 设置背景 6.4.1 设置背景颜色 在CSS中，网页元素的背景颜色使用background-color属性来设置，属性值为某种颜色。 语法：background-color : color | transparent 【演练 6-15】设置背景颜色，本例页面6-15.html的显示效果如图6-19所示。

6.4 设置背景 6.4.2 设置背景图像 在CSS样式中，使用background-image属性设置背景图像来美化网页。 6.4 设置背景 6.4.2 设置背景图像 在CSS样式中，使用background-image属性设置背景图像来美化网页。 语法：background-image : url(url) | none 【演练 6-16】设置背景图像，本例页面6-16.html的显示效果如图6-20所示。

6.4 设置背景 6.4.3 设置背景重复 在默认情况下，图像会自动向水平和竖直两个方向平铺。可以使用background-repeat属性来控制。 语法：background-repeat : repeat | no-repeat | repeat-x | repeat-y 【演练 6-17】设置背景重复，本例页面6-17.html的显示效果如图6-21所示。

6.4 设置背景 6.4.4 设置背景定位 当在网页中插入背景图片时，每一次插入的位置，都是位于网页的左上角，可以通过background-position属性来改变图片的插入位置。 语法：background-position : length || length background-position : position || position 【演练 6-18】使用关键字进行背景定位，本例页面6-18.html的显示效果如图6-22所示。

6.4 设置背景 6.4.5 设置背景大小 background-size是CSS3提供的一个新特性，它可以让用户随心所欲的控制背景图的尺寸大小。 语法：background-size ：[ length | percentage | auto ]{1,2} | cover | contain 需要说明的是，IE 不支持该属性，下面是Opera浏览器中显示的效果，如图6-25所示。

6.4 设置背景 6.4.6 案例——制作购物车统计信息 【演练6-21】制作购物车统计信息，本例页面6-21.html的显示效果如图6-26所示。

6.5 图文混排 图文混排就是将文字与图片混合排列，在网页设计与制作中具有实际意义。 6.5 图文混排 图文混排就是将文字与图片混合排列，在网页设计与制作中具有实际意义。 【演练6-22】使用CSS样式结合HTML代码实现网络鞋城商品展示局部信息的图文混排，为后续章节讲解图文信息列表打下基础。本例页面6-22.html的显示效果如图6-27所示。