Dreamweaver CS3网站制作炫例精讲
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

1.6 网页字体样式正常设置步骤

对于一个新的网页,应该按照怎样的顺序进行字体样式的定义呢?下面进行详细介绍。

1.6.1 网页主体文本的定义

01 如图1-44所示,新建网页文件,并在文档窗口中打开。

02 打开【CSS样式】面板,单击【新建CSS规则】按钮。

03 弹出【新建CSS规则】对话框:

ⅰ.在【选择器类型】中选择“标签(重新定义特定标签的外观)”单选按钮。

ⅱ.在【标签】中选择“body”。

ⅲ.在【定义在】中选择“仅对该文档”单选按钮。

04 单击【确定】按钮进行该样式的定义。

图1-44 新建CSS规则

01 弹出如图1-45所示的【body的CSS规则定义】对话框,在【分类】列表中选择“类型”选项。

图1-45 【body的CSS规则定义】对话框

02 在【字体】下拉列表框中选择“Verdana, Arial, Helvetica, sans-serif”。

03 在【大小】下拉列表框中输入“12”,在其右侧下拉列表框中选择“像素”选项。

04 在【行高】下拉列表框中输入“150”、“%”,表示网页中文本行之间的高度是文本高度的1.5倍。

05 单击【确定】按钮完成网页主体样式的定义。

注:网页的主体就是对标签“<body>”的CSS样式的定义,能起到定义整个网页中所有文本的应用作用。凡是网页中没有特别定义的文本均遵循这里所定义的样式。

1.6.2 网页段落文本的定义

01 如图1-46所示,打开【CSS样式】面板,单击【新建CSS规则】按钮。

图1-46 新建、定义CSS规则

02 弹出【新建CSS规则】对话框:

ⅰ.在【选择器类型】中选择“标签(重新定义特定标签的外观)”单选按钮。

ⅱ.在【标签】中选择“p”,表示段落标签。

ⅲ.在【定义在】中选择“仅对该文档”单选按钮。

03 单击【确定】按钮进行该样式的定义,弹出【CSS规则定义】对话框。

04 在【分类】列表中选择“区块”选项,同时在【文字缩进】中输入“2”,并在其右侧下拉列表框中选择“字体高(em)”。

05 单击【确定】按钮完成对“段落”样式的定义。

如图1-47所示,定义了“p”段落标签的“文字缩进”,在网页设计时页面中文本就遵循了该样式定义而进行显示。

图1-47 定义了段落文本缩进的样式显示

无论是对网页主体“body”标签的定义,还是对段落“p”的样式定义,均只需定义样式网页中主体文本、段落文本即可立即显现出样式定义的效果。而对于一些有特殊要求的文本,则需要独立定义,并且这些独立定义的样式还需要在页面中应用,两者缺一不可。

1.6.3 自定义文本样式

01 如图1-48所示,打开【CSS样式】面板,单击【新建CSS规则】按钮。

02 弹出【新建CSS规则】对话框:

ⅰ.在【选择器类型】中选择“类(可应用于任何标签)”单选按钮。

ⅱ.在【名称】中输入“entxt”。

ⅲ.在【定义在】中选择“仅对该文档”单选按钮。

03 单击【确定】按钮进行该样式的定义。

图1-48 新建CSS规则

01 弹出如图1-49所示的【.entxt的CSS规则定义】对话框,在【分类】列表中选择“类型”选项。

02 在【大小写】下拉列表框中选择“首字母大写”。

03 在【分类】列表中选择“区块”选项,在【字母间距】下拉列表框中输入“1”,并在其右侧下拉列表框中选择“像素”选项。

04 单击【确定】按钮完成该样式的定义。

图1-49 【.entxt的CSS规则定义】对话框

01 如图1-50所示,在文档中输入全部小写的英文文本段落。

02 选择该英文文本段落,打开【属性】面板,在【样式】下拉列表框中选择“entxt”。

03 保存网页文档,按【F12】键在浏览器中查看英文段落,可以看到原本均是小写字母的英文单词经过样式的定义之后显示为首字母大写,同时字母之间有“1 像素”的间距使得英文阅读更有可读性了。

图1-50 应用CSS样式

本章主要介绍的是文本的表现和使用,不过这仅仅是文本在网页中应用的部分内容,当然这也是较为常用的一部分,还有部分属于技巧性操作的内容,则需要读者平时多操作、多思考、多钻研。本书后面章节中也将多次混合应用这些技术来满足和丰富我们的网页设计要求。