【网页布局设计】项目三 使用CSS设置文字效果

《CSS+DIV网页样式与布局案例教程》 徐琴

任务一 制作个人博客首页——设置文字样式

众所周知，文字是网页中最为重要的设计元素，因此在网页中对文字的修饰也是不可或缺的。在项目二中，我们已经学会了如何在网页中插入文字、段落和标题等，在本任务中，我们将通过制作个人博客首页，学习如何运用CSS对文字进行美化和修饰，包括设置文字的字体、字号、颜色和加粗效果等。

在上面的实例中，我们运用了CSS属性对网页文字进行修饰操作，CSS文字属性包括文字字体、文字大小、文字加粗及文字颜色等，这些属性主要是以font为前缀。下面我们开始CSS各个文字样式属性的具体学习。

支撑知识点

一、CSS文字样式常用属性

设置字体：font-family

属性为font-family，基本语法：font-family:字体1,字体2,字体3; 。例如：

p{font-family:宋体，楷体，隶书;}

以上语句声明了页面中使用<p>标签的字体，并且同时声明了3个字体名称，分别是宋体、楷体和隶书。整句代码告诉浏览器首先在浏览者的计算机中寻找宋体，如果该用户的计算机中没有安装宋体，则接着寻找楷体，以此类推。

设置字号：font-size

属性为font-size，基本语法：font-size:尺寸|百分比|关键字; 。其属性值可以是关键字、尺寸或百分比，意义如下。
尺寸：使用尺寸设置文字的大小，一般使用的单位为px（像素）。
百分比：以父元素中的字体大小为参考值，如果没有设置父元素的字体大小，则是相对于浏览器默认字体大小的百分比。
关键字：使用关键字设置文字大小，从小到大包括xx-samll（极小）、x-small（较小）、small（小）、medium（标准大）、large（大）、x-large（较大）和xx-large（极大）7个关键字。

设置斜体：font-style

属性为font-style，基本语法：
font-style:normal|italic|oblique;
其各属性值的意义如下表所示。

设置加粗：font-weight

属性为font-weight，基本语法：
font-weight:normal|bold|bolder|lighter|number;
例如：p{font-weight:600;}。其各属性值的意义如下表所示。

设置颜色：color

属性为color，基本语法：color:颜色的名称|RGB值|十六进制数; 。其属性值可以是颜色的英文名称，如red、blue；也可以是颜色的RGB值，如rgb(255,0,0)；还可以是颜色的十六进制值，如#ff0000。我们将在后面介绍颜色的选择方法。

设置变体：font-variant

属性为font-variant，作用是将所有小写字母转换为小型大写字母，基本语法：font-variant:normal|small-caps; 。其各属性值的意义如下表所示。小型大写字母与其余文本相比，其字体尺寸更小。

组合设置字体属性：font

可以用font来组合设置文字的属性。例如：

p{font:italic bold small-caps 15pt 宋体;}

表示该段落文字为斜体加粗体的宋体文字，大小为15像素，其中英文采取大写字母显示。

二、网页中元素的长度单位

1．绝对长度单位

绝对长度单位所定义的元素大小一般都比较固定，大小显示不受其他因素影响，一般在网页制作中使用较少。

2．相对长度单位

相对长度单位是指网页元素的大小相对于某个参照物来确定，如使用屏幕分辨率、父元素或浏览器作为参照物等。相对长度单位在网页设计中较常用，如下表所示。

三、为网页元素设置颜色的技巧

在HTML页面中，颜色统一使用RGB颜色模式，该模式下，颜色由红、绿、蓝三原色按一定的比例混和而成。这三种原色的取值范围均为0~255，共可混合出一千多万种颜色。例如，当将这三种原色的值都设为255时，颜色为白色；都设为0时，颜色为黑色。
RGB颜色也可以使用十六进制表示，如#ff0000，其中前两位为红色分量，中间两位为绿色分量，最后两位是蓝色分量。

任务二 制作个人博客子页——设置段落和其他文字样式

在CSS中除了可以对文字本身设置样式外，还可以对多个文字的集合，即段落设置样式。下面，我们通过制作个人博客子页，来学习设置段落样式和其他文字样式的方法，包括设置段落的对齐方式、缩进、行间距和段间距，以及英文字母大小写，文字的上划线、下划线效果等。

支撑知识点

一、CSS段落和其他文字样式属性

修饰文字：text-decoration

修饰文字是指为文字添加下划线、删除线和上划线等，属性为text-decoration，基本语法：text-decoration: underline|overline|line-through|blink|none; 。其各属性值的意义如下表所示。

转换英文字母大小写：text-transform

属性为text-transform，基本语法：
text-transform:capitalize|uppercase|lowercase;
其各属性值的意义如下表所示。

设置中文字符间距：letter-spacing

属性为letter-spacing，用来调整中文字符或英文字母之间的间距，基础语法：letter-spacing:normal|长度; 。其中，“长度”有两种表示方法，一种是使用绝对数值，一种是使用字体高（即字体大小）的倍数。

设置英文单词间距：word-spacing

属性为word-spacing，用来调整英文单词之间的间距，属性值和使用方法与letter-spacing属性相同。

设置段落的水平对齐方式：text-align

属性为text-align，可以设置段落的左、中、右和两端对齐。该属性可应用于HTML中的任何块级标签，如<p>、<h1>~ <h6>、<div>等。基础语法：text-align:left|right|center|justify; ，其各属性值的意义如下表所示。

设置段落缩进：text-indent

属性为text-indent，基础语法：text-indent:长度|百分比; 。一般我们使用text-indent:2em;，表示首行缩进2个字符。

设置行间距（行高）：line-height

指调整行与行之间的距离，属性为line-height，还可以利用该属性让文字纵向居中。基础语法：line-height:normal|数字|长度|百分比; 。其中，“数字”表示使用绝对数值，如8px；“长度”表示设置为当前字高的倍数，如2em；百分比在设置行高时很少用。

二、HTML常用符号

在Dreamweaver的设计视图中输入一些符号时，由于它们与HTML代码的关键字有冲突，因此不能直接在代码视图中显示，而是转化成了相应的HTML代码。我们可以在设计视图中利用键盘或“插入”>“HTML”>“特殊字符”菜单来输入这些符号，也可以直接在代码视图中输入这些符号的HTML代码（注意大小写）。

任务三 制作个人博客排行榜——设置列表样式

列表能够将文字按一定的方式排列整齐，从而使内容井然有序。通过对列表设置CSS样式，可以制作出较好的版式效果。本任务通过制作博客排行榜页面，来学习为列表设置CSS样式的方法。

支撑知识点

一、CSS列表样式常用属性

关于列表的相关知识，读者可参考项目二任务一中的相关内容。无论是有序列表还是无序列表，在CSS中都可以使用相同的属性值，而且效果完全相同。以下是CSS列表样式的常用属性。

设置列表符号：list-style-type

属性为list-style-type，用来设置列表项的符号类型，基本语法：list-style-type:属性值; 。其常用的属性值及意义如下表所示。

使用图片符号：list-style-image

属性为list-style-image，用来将图片作为列表的符号，从而丰富和美化列表符号，其基本语法为：list-style-image:url; 。
输入图像的路径时，可以参考项目二中介绍的方法。此外，在Dreamweaver的代码界面中输入CSS代码会出现代码提示，添加列表图像也同样会出现对应的代码提示。单击“浏览”按钮，然后在打开的对话框中选择需要的列表图像。

调整列表位置：list-style-position

属性为list-style-position，用来设置列表符号的缩进，即列表项的位置，其基本语法为：
list-style-position:outside|inside;
各属性值的意义如下表所示。

二、清除列表的默认边距

列表在HTML页面中默认是有空白距离的，当我们用CSS对其进行操作时，需要将默认的距离消除，以方便使用CSS对其精确控制。在实际操作时，可以使用以下CSS选择器来消除列表的默认内边距及外边距。

ul、ol{ padding:0;
margin:0;
}

三、<div>与<span>标签补充讲解

使用HTML和CSS设计网页时，<div>与<span>是两个常用的标签。利用这两个标签，加上CSS对其样式的控制，可以很方便地实现各种效果以及对网页进行布局。
<div>标签对相当于一个容器，在它里面（<div>与</div>之间）可以容纳各种HTML元素，如段落<p>、图片<img>、标题<h>、表格<table>，以及其他<div>标签等。我们可以把<div>标签及其包含的内容视为一个独立的对象，用CSS进行控制。例如，设置<div>标签的高度、宽度、背景、位置、边框，以及其包含的内容的样式等。

四、块级元素与行内元素补充讲解

HTML中的元素分为两大类型，块级元素和行内元素（或称内联元素）。二者的区别是块级元素有自身的结构，默认会独占一行；而行内元素需要超过其父元素的宽度才换行。块状元素一般作为容器，可以把其他元素放在块元素中。行内元素还有以下几个特点：
（1）设置宽度width无效。
（2）设置高度height无效，可以通过line-height来设置行高。
（3）设置margin 只有左右有效，上下无效。
（4）设置padding 只有左右有效，上下则无效。