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

网页设计与制作教程（HTML+CSS+JavaScript）顾忠伟zwgu@G6.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||opacity6.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-word6.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属性来设置，属性值为某种颜色。语法：background-color:color|transparent【演练6-11】设置背景颜色，本例页面6-11.html的显示效果如图6-16所示。

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

6.4.4设置背景定位在CSS样式中，可以使用background-position属性改变背景图片在元素中的位置。语法：background-position:length||lengthbackground-position:position||position【演练6-14】使用关键字进行背景定位，显示效果如图6-19所示。

6.4设置背景6.4.5设置背景大小

background-size是CSS3提供的一个新特性，它可以让用户随心所欲的控制背景图的尺寸大小。语法：background-size：[length|percentage|auto]{1,2}|cover|contain6.4设置背景图文混排一般出现在介绍性的内容或新闻内页中，其关键在于处理图片与文字之间的关系。请看下面的示例讲解。【演练6-17】图文混排，本例页面6-17.html的显示效果如图6-23所示。6.5图文混排6.6.1页面布局规划通过成熟的构思与设计，电脑学堂作品展示页面的效果如图6-24所示，页面布局示意图如图6-25所示。6.6用CSS设置文本和图像综合案例

6.6.2页面的制作过程1．前期准备（1）栏目目录结构在栏目文件夹下创建文件夹images和style，分别用来存放图像素材和外部样式表文件。（2）页面素材将本页面需要使用的图像素材存放在文件夹images下。（3）外部样式表在文件夹style下新建一个名为style.css的样式表文件。

6.6用CSS设置文本和图像综合案例6.6.2页面的制作过程2．制作页面（1）页面整体的制作（2）页面顶部的制作（3）页面导航的制作（4）页面中部的制作（5）页面底部的制作（6）页面结构代码6.6用CSS设置文本和图像综合案例

制作电脑商城安全中心页面，页面效果如图6-30所示，布局示意图如图