第6章用CSS设置文本

1、 第第6 6章章 用用CSSCSS设置文本设置文本 本章简介：本章简介： 前文介绍了前文介绍了CSSCSS设计中必须了解的设计中必须了解的4 4个核心个核心基础基础盒子模型、标准流、浮动和定盒子模型、标准流、浮动和定位。有了这位。有了这4 4个核心的基础，从本章开个核心的基础，从本章开始逐一介绍网页设计的各种元素，例如始逐一介绍网页设计的各种元素，例如文本、图像、链接、表格，如何使用文本、图像、链接、表格，如何使用CSSCSS来进行样式设置。来进行样式设置。 使用使用CSS设置文本样式设置文本样式6.1用用CSS设置多列布局设置多列布局6.2 6.1使用CSS设置文本样式在学习在学习HTMLH

2、TML的时候，通常也会使用的时候，通常也会使用HTMLHTML对文本进行一些非常对文本进行一些非常简单的样式设置，而使用简单的样式设置，而使用CSSCSS对文本的样式进行设置远比使用对文本的样式进行设置远比使用HTMLHTML灵活、精确得多。灵活、精确得多。 6.1.1创建基础页面创建一个基本的网页。创建一个基本的网页。预备用于设置CSS样式的网页文件 6.1.2设置文字的字体在在HTMLHTML中，设置文字的字体需要通过中，设置文字的字体需要通过标记的标记的faceface属性。属性。而在而在CSSCSS中，则使用中，则使用font-familyfont-family属性。属性。设置正文字体

3、 6.1.3设置文字的倾斜效果在在CSSCSS中也可以定义文字是否显示为斜体，倾斜看起来很容易中也可以定义文字是否显示为斜体，倾斜看起来很容易理解，实际上它比通常想象的要复杂一些。理解，实际上它比通常想象的要复杂一些。正常字体与“意大利体”，及“倾斜体”的对比 6.1.4设置文字的加粗效果在在HTMLHTML语言中可以通过添加语言中可以通过添加标记或者标记或者标记将文字标记将文字设置为粗体。在设置为粗体。在CSSCSS中，使用中，使用font-weightfont-weight属性控制文字的粗细，属性控制文字的粗细，可以将文字的粗细进行细致的划分，更重要的是可以将文字的粗细进行细致的划分，更重

4、要的是CSSCSS还可以将本身还可以将本身是粗体的文字变为正常粗细。是粗体的文字变为正常粗细。设 置 值说 明normal正常粗细bold粗体bolder加粗体lighter比正常粗细还细100900共有9个层次（100，200，900），数字越大字体越粗 6.1.5转换英文字母大小写英文字母大小写转换是英文字母大小写转换是CSSCSS提供的很实用的功能之一，我们只提供的很实用的功能之一，我们只需要设定英文段落的需要设定英文段落的text-transformtext-transform属性，就能很轻松地实现大属性，就能很轻松地实现大小写的转换。小写的转换。设置英文单词的大小写形式 6.1.6控

5、制文字的大小CSSCSS是通过是通过font-sizefont-size属性来控制文字大小的，而该属性的值属性来控制文字大小的，而该属性的值可以使用很多种长度单位。可以使用很多种长度单位。设置正文文字的大小为12像素 6.1.7设置文字装饰效果在在HTMLHTML文件中，可以使用文件中，可以使用标记给文字加下划线，在标记给文字加下划线，在CSSCSS中中由由text-decorationtext-decoration属性为文字加下划线、删除线和顶线等多种装属性为文字加下划线、删除线和顶线等多种装饰效果。饰效果。设置文本的装饰效果 6.1.8设置段落首行缩进如何在网页中实现文本段落的首行缩进，在

6、如何在网页中实现文本段落的首行缩进，在CSSCSS中专门有一个中专门有一个text-indenttext-indent属性可以控制段落的首行缩进和缩进的距离。属性可以控制段落的首行缩进和缩进的距离。设置段落中首行文本缩进 6.1.9设置字词间距在在CSSCSS中，可以通过中，可以通过letter-spacingletter-spacing和和word-spacingword-spacing这两个属这两个属性分别控制字母间距和单词间距。性分别控制字母间距和单词间距。设置字词间距 6.1.10设置段落内部的文字行高在在HTMLHTML中是无法控制段落中行与行之间的距离的。在中是无法控制段落中行与行

7、之间的距离的。在CSSCSS中，中，使用使用line-heightline-height可以控制行的高度，通过它就可以调整行与行之可以控制行的高度，通过它就可以调整行与行之间的距离。间的距离。设置段落中的行高 6.1.11设置段落之间的距离可以通过可以通过margin属性设置段与段之间的距离属性设置段与段之间的距离。为段落增加边框调整段落间距后的效果 6.1.12控制文本的水平位置使用使用text-align属性可以方便地设置文本的水平位置。属性可以方便地设置文本的水平位置。 （Firefox浏览器）标题居中对齐 6.1.13设置文字与背景的颜色在在HTML页面中，颜色统一采用页面中，颜色统一

8、采用RGB的模式显示，也就是通常人们的模式显示，也就是通常人们所说的所说的“红绿蓝红绿蓝”三原色模式。每种颜色都由这三原色模式。每种颜色都由这3种颜色的不同比重组成，种颜色的不同比重组成，每种颜色的比重分为每种颜色的比重分为0255挡。当红绿蓝挡。当红绿蓝3个分量都设置为个分量都设置为255时就是白时就是白色，例如色，例如rgb（100%，100%，100%）和）和#FFFFFF都指白色，其中都指白色，其中“#FFFFFF”为十六进制的表示方法，前两位为红色分量，中间两位是绿为十六进制的表示方法，前两位为红色分量，中间两位是绿色分量，最后两位是蓝色分量，色分量，最后两位是蓝色分量，“FF”即为

9、十进制中的即为十进制中的255 。 设置标题背景颜色和文字颜色 6.1.14文字阴影效果为了美化页面的文字效果，为了美化页面的文字效果，CSS 3新增了文字阴影效果，也就是可新增了文字阴影效果，也就是可以使用以使用text-shadow属性给页面中的文字或其他元素添加阴影效果。到目属性给页面中的文字或其他元素添加阴影效果。到目前为止前为止Safari、Firefox、Chrome和和Opera等主流浏览器都支持阴影属性。等主流浏览器都支持阴影属性。实际上实际上text-shadow属性，在属性，在CSS 2.1中中W3C就已经定义了，但在就已经定义了，但在CSS 3中又重新定义了它，并增加了不

10、透明度效果。中又重新定义了它，并增加了不透明度效果。 设置阴影在右下角设置阴影模糊 6.1.14文字阴影效果设置阴影叠加设置燃烧文字阴影效果 6.2用CSS设置多列布局在在CSS 2.1及以前的版本中，都是使用及以前的版本中，都是使用float属性或属性或position属性属性进行页面布局，但是该方法有一个比较明显的缺点，就是多列的进行页面布局，但是该方法有一个比较明显的缺点，就是多列的div元素间是各自独立的，因此，如果在第元素间是各自独立的，因此，如果在第1列列div元素中加入一些内容，元素中加入一些内容，将会使第将会使第2列元素的底部不能对齐，导致叶面中多出一块空白区域。列元素的底部不

11、能对齐，导致叶面中多出一块空白区域。为了解决多列布局的难题，为了解决多列布局的难题，CSS 3新增了新增了Multi-column Layout，即多列自动布局功能。利用多列布局属性可以自动将内容按指定的即多列自动布局功能。利用多列布局属性可以自动将内容按指定的列数排列，这种特性特别适合报纸和杂志类网页布局。列数排列，这种特性特别适合报纸和杂志类网页布局。 6.2.1创建基础页面预备用于设置CSS多列布局的网页文件创建一个基本的网页。创建一个基本的网页。 6.2.2设置多列布局预备用于设置CSS多列布局的网页文件CSS 3新增了多列布局新增了多列布局columns属性，该属性类似边框特性中的属

12、性，该属性类似边框特性中的border属性。属性。columns属性可以同时定义多列的数目和每列的宽度。属性可以同时定义多列的数目和每列的宽度。 6.2.3设置列宽度根据窗口宽度自动变化栏目数量使用使用columns属性可以将元素设置成多列显示，同时使用属性可以将元素设置成多列显示，同时使用column-width属性可以设置列的宽度。该属性可以与其他多列布局属性配合使属性可以设置列的宽度。该属性可以与其他多列布局属性配合使用；也可以单独使用，限制模块的单列宽度，当超出宽度时，则会自动用；也可以单独使用，限制模块的单列宽度，当超出宽度时，则会自动以多列进行显示。以多列进行显示。 6.2.4设置

13、列数根据窗口宽度自动变化栏目数量可以通过可以通过column-count属性控制列数。属性控制列数。 6.2.5设置列间距设置列间距的效果通过通过column-gap属性可以设置列与列之间的间距。属性可以设置列与列之间的间距。 6.2.6设置列边框样式列边线显示效果CSS 3还可以通过还可以通过column-rule属性定义列与列之间边框的宽度、属性定义列与列之间边框的宽度、样式、颜色。样式、颜色。column-rule属性可以设置很多不同的值，从而对列边框属性可以设置很多不同的值，从而对列边框设置不同的样式。设置不同的样式。 6.2.7设置跨列显示大标题跨列显示效果通过上面的案例我们看到大标

14、题只会在第通过上面的案例我们看到大标题只会在第1列中显示，如果想要让列中显示，如果想要让大标题在所有列的最上方显示，可以通过大标题在所有列的最上方显示，可以通过column-span属性来设置跨列属性来设置跨列显示。显示。 6.2.8设置列高度列高度自动调整效果前面我们介绍了多列、列宽、列间距、列边框样式及跨列，下面我前面我们介绍了多列、列宽、列间距、列边框样式及跨列，下面我们简单地介绍一下列高度。可以通过们简单地介绍一下列高度。可以通过column-fill属性设置列的高度。属性设置列的高度。column-fill属性可以设置属性可以设置2个值，从而对列高度进行控制。个值，从而对列高度进行控制。 小结本章介绍了使用本章介绍了使用CSS设置文本相关的各种样式的方法。这些属性主设置文本相关的各种样式的方法。这些属性主要可以分为两类：以要可以分为两类：以“font-”开头的属性，例如开头的属性，例如font-size、f