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

CSS网页设计标准教程 第2部分 CSS专题技术 第 6 章 用CSS设置文本和图像 前文介绍了CSS设计中必须了解的4个核心基础——盒子模型、标准流、浮动和定位。 有了这4个核心的基础，从本章开始逐一介绍网页设计的各种元素，例如文本、图像、链接、表格，如何使用CSS来进行样式设置。 6.1 使用CSS设置文本样式 在学习HTML的时候，通常也会使用HTML对文本进行一些非常简单的样式设置，而使用CSS对文本的样式进行设置远比使用HTML灵活、精确得多。 6.1.1 创建基础页面 创建一个基本的网页，如图6.1所示。 6.1.2 设置文字的字体 在HTML中，设置文字的字体需要通过font标记的face属性。 而在CSS中，则使用font-family属性。针对上述网页，在样式部分增加对p标记的样式设置如下，实例文件为“06-02.html”。 style type=text/css h1{ font-family:黑体; } p{ font-family: Arial, Times New Roman; } /style 6.1.3 设置文字的倾斜效果 CSS中的font-style属性正是用来控制字体倾斜的，它可以设置为“正常”、“意大利体”和“倾斜”3种样式，分别如下： font-style:normal; font-style:italic; font-style:oblique; 6.1.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两个段落分别设置如下，实例文件为“06-04.html”。 #p1{ font-style:italic; text-transform:capitalize; } #p2{ text-transform:lowercase; } 6.1.6 控制文字的大小 p{ font-family: Arial, Times New Roman; font-size:12px;} 6.1.7 设置文字装饰效果 6.1.8 设置段落首行缩进 Text-indent属性是以各种长度为属性值，为了缩进两个字的距离，最经常用的是“2em”这个距离。 例如，对网页代码的p2段落进行如下设置，实例文件为“06-08.html”。 #p2{ text-indent:2em; } 这里再举一个不太常用的例子，如果希望首行不是缩进，而是凸出一定距离，也称为“悬挂缩进”，请看如下代码，实例文件为“06-09.html”。 #p2{ padding-left:2em; text-indent:-2em; } 6.1.9 设置字词间距 在CSS中，可以通过letter-spacing和word-spacing这两个属性分别控制字母间距和单词间距。例如下面的代码，实例文件为“06-10.html”。 #p1{ font-style:italic; text-transform:capitalize; word-spacing:10px; letter-spacing:-1px; } 6.1.10 设置段落内部的文字行高 在HTML中是无法控制段落中行与行之间的距离的。 在CSS中，使用line-height可以控制行的高度，通过它就可以调整行与行之间的距离。