CSS网页设计标准教程 教学课件 温谦 第6章用CSS设置文本和图像.ppt

《CSS网页设计标准教程 教学课件 温谦 第6章用CSS设置文本和图像.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS网页设计标准教程第2部分CSS专题技术第6章用CSS设置文本和图像使用CSS设置文本样式6.1用CSS设置图像样式6.2用CSS设置背景样式6.3前文介绍了CSS设计中必须了解的4个核心基础——盒子模型、标准流、浮动和定位。有了这4个核心的基础，从本章开始逐一介绍网页设计的各种元素，例如文本、图像、链接、表格，如何使用CSS来进行样式设置。6.1使用CSS设置文本样式在学习HTML的时候，通常也会使用HTML对文本进行一些非常简单的样式设置，而使用CSS对文本的样式进行设置远比使用HTML灵活、

2、精确得多。6.1.1创建基础页面创建一个基本的网页，如图6.1所示。图6.1预备用于设置CSS样式的网页文件6.1.2设置文字的字体在HTML中，设置文字的字体需要通过标记的face属性。而在CSS中，则使用font-family属性。针对上述网页，在样式部分增加对

标记的样式设置如下，实例文件为“06-02.html”。h1{font-family:黑体;}p{font-family:Arial,"TimesNewRoman";}

3、le>图6.2设置正文字体6.1.3设置文字的倾斜效果图6.3正常字体与“意大利体”，及“倾斜体”的对比CSS中的font-style属性正是用来控制字体倾斜的，它可以设置为“正常”、“意大利体”和“倾斜”3种样式，分别如下：font-style:normal;font-style:italic;font-style:oblique;图6.4设置文本倾斜后的效果6.1.4设置文字的加粗效果然而遗憾的是，实际上大多数操作系统和浏览器还不能很好地实现非常精细的文字加粗设置，通常只能设置“正常”和“加粗”两

4、种粗细，分别如下。font-weight:normal/*正常*/font-weight:bold/*加粗*/6.1.5转换英文字母大小写例如下面3个文字段落分别可以实现单词的首字母大写、所有字母大写和所有字母小写。p.one{text-transform:capitalize;}/*单词首字母大写*/p.two{text-transform:uppercase;}/*全部大写*/p.three{text-transform:lowercase;}/*全部小写*/对上述网页代码的#p1和#p2两个段落

5、分别设置如下，实例文件为“06-04.html”。#p1{font-style:italic;text-transform:capitalize;}#p2{text-transform:lowercase;}图6.5设置英文单词的大小写形式6.1.6控制文字的大小p{font-family:Arial,"TimesNewRoman";font-size:12px;}图6.6设置了正文文字的大小为12像素6.1.7设置文字装饰效果设置值说明none正常显示underline为文字加下划线line-thr

6、ough为文字加删除线overline为文字加顶线blink文字闪烁，仅部分浏览器支持表6.2text-decoration属性设置6.1.8设置段落首行缩进Text-indent属性是以各种长度为属性值，为了缩进两个字的距离，最经常用的是“2em”这个距离。例如，对网页代码的p2段落进行如下设置，实例文件为“06-08.html”。#p2{text-indent:2em;}这里再举一个不太常用的例子，如果希望首行不是缩进，而是凸出一定距离，也称为“悬挂缩进”，请看如下代码，实例文件为“06-09.h

7、tml”。#p2{padding-left:2em;text-indent:-2em;}图6.9设置段落中首行文本缩进图6.10设置段落中首行文本悬挂缩进6.1.9设置字词间距在CSS中，可以通过letter-spacing和word-spacing这两个属性分别控制字母间距和单词间距。例如下面的代码，实例文件为“06-10.html”。#p1{font-style:italic;text-transform:capitalize;word-spacing:10px;letter-spacing:-1

8、px;}6.1.10设置段落内部的文字行高在HTML中是无法控制段落中行与行之间的距离的。在CSS中，使用line-height可以控制行的高度，通过它就可以调整行与行之间的距离。line-height属性的设置如表6.3所示。设置值说明长度数值，可以使用前面所介绍的尺度单位倍数font-size的设置值的倍数百分比相对于font-size的百分比表6.3line-height属性设置6.1.11设置段落之间的距离下面介绍如何控制段落之间的距离。例如为<