第6章用CSS设置文本

第6章用CSS设置文本

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

使用CSS设置文本样式6.1用CSS设置多列布局6.2

6.1使用CSS设置文本样式在学习HTML的时候，通常也会使用HTML对文本进行一些非常简单的样式设置，而使用CSS对文本的样式进行设置远比使用HTML灵活、精确得多。

6.1.1创建基础页面创建一个基本的网页。预备用于设置CSS样式的网页文件

6.1.2设置文字的字体在HTML中，设置文字的字体需要通过<font>标记的face属性。而在CSS中，则使用font-family属性。设置正文字体

6.1.3设置文字的倾斜效果在CSS中也可以定义文字是否显示为斜体，倾斜看起来很容易理解，实际上它比通常想象的要复杂一些。正常字体与“意大利体”，及“倾斜体”的对比

6.1.4设置文字的加粗效果在HTML语言中可以通过添加<b>标记或者<strong>标记将文字设置为粗体。在CSS中，使用font-weight属性控制文字的粗细，可以将文字的粗细进行细致的划分，更重要的是CSS还可以将本身是粗体的文字变为正常粗细。设置值说明normal正常粗细bold粗体bolder加粗体lighter比正常粗细还细100～900共有9个层次（100，200，…，900），数字越大字体越粗

6.1.5转换英文字母大小写英文字母大小写转换是CSS提供的很实用的功能之一，我们只需要设定英文段落的text-transform属性，就能很轻松地实现大小写的转换。设置英文单词的大小写形式

6.1.6控制文字的大小CSS是通过font-size属性来控制文字大小的，而该属性的值可以使用很多种长度单位。设置正文文字的大小为12像素

6.1.7设置文字装饰效果在HTML文件中，可以使用<u>标记给文字加下划线，在CSS中由text-decoration属性为文字加下划线、删除线和顶线等多种装饰效果。设置文本的装饰效果

6.1.8设置段落首行缩进如何在网页中实现文本段落的首行缩进，在CSS中专门有一个text-indent属性可以控制段落的首行缩进和缩进的距离。设置段落中首行文本缩进

6.1.9设置字词间距在CSS中，可以通过letter-spacing和word-spacing这两个属性分别控制字母间距和单词间距。设置字词间距

6.1.10设置段落内部的文字行高在HTML中是无法控制段落中行与行之间的距离的。在CSS中，使用line-height可以控制行的高度，通过它就可以调整行与行之间的距离。设置段落中的行高

6.1.11设置段落之间的距离可以通过margin属性设置段与段之间的距离。为段落增加边框调整段落间距后的效果

6.1.12控制文本的水平位置使用text-align属性可以方便地设置文本的水平位置。（Firefox浏览器）标题居中对齐

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

6.1.14文字阴影效果为了美化页面的文字效果，CSS3新增了文字阴影效果，也就是可以使用text-shadow属性给页面中的文字或其他元素添加阴影效果。到目前为止Safari、Firefox、Chrome和Opera等主流浏览器都支持阴影属性。实际上text-shadow属性，在CSS2.1中W3C就已经定义了，但在CSS3中又重新定义了它，并增加了不透明度效果。设置阴影在右下角设置阴影模糊

6.1.14文字阴影效果设置阴影叠加设置燃烧文字阴影效果

6.2用CSS设置多列布局在CSS2.1及以前的版本中，都是使用float属性或position属性进行页面布局，但是该方法有一个比较明显的缺点，就是多列的div元素间是各自独立的，因此，如果在第1列div元素中加入一些内容，将会使第2列元素的底部不能对齐，导致叶面中多出一块空白区域。为了解决多列布局的难题，CSS3新增了Multi-columnLayout，即多列自动布局功能。利用多列布局属性可以自动将内容按指定的列数排列，这种特性特别适合报纸和杂志类网页布局。

6.2.1创建基础页面预备用于设置CSS多列布局的网页文件创建一个基本的网页。

6.2.2设置多列布局预备用于设置CSS多列布局的网页文件CSS3新增了多列布局columns属性，该属性类似边框特性中的border属性。columns属性可以同时定义多列的数目和每列的宽度。

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

6.2.4设置列数根据窗口宽度自动变化栏目数量可以通过column-count属性控制列数。

6.2.5设置列间距设置列间距的效果通过column-gap属性可以设置列与列之间的间距。

6.2.6设置列边框样式列边线显示效果CSS3还可以通过column-rule属性定义列与列之间边框的宽度、样式、颜色。column-rule属性可以设置很多不同的值，从而对列边框设置不同的样式。

6.2.7设置跨列显示大标题跨列显示效果通过上面的案例我们看到大标题只会在第1列中显示，如果想要让大标题在所有列的最上方显示，可以通过column-span属性来设置跨列显示。

6.2.8设置列高度列高度自动调整效果前面我们介绍了多列、列宽、列间距、列边框样式及跨列，下面我们简单地介绍一下列高度。可以通过column-fill属性设置列的高度。column-fill属性可以设置2个值，从而对列高度进行控制。

小结本章介绍了使用CSS设置文本相关的各种样式的方法。这些属性主要可以分为两类：以“font-”开头的属性，例如fon