1.2 有色有彩——网页文本颜色

在学习了网页中文本的简单排版之后，下面将介绍如何给网页文本修饰颜色，使得网页变得更加精彩。

1.2.1 为文本挑选颜色

01 如图1-13所示，新建一个网页并在Dreamweaver文档窗口中打开。输入文本“这是一段红色的文本”。

02 按【Enter】键换行继续输入文本“这是一段蓝色的文本”。

03 选择文本“这是一段红色的文本”，（按【Ctrl】+【F3】组合键）打开【属性】面板，单击【文本颜色】拾取器，在弹出的色盘中选择红色，此时在【文本颜色】的文本框中显示为“#FF0000”的字符串。

04 按照03的步骤，为文本“这是一段蓝色的文本”选择“蓝色”，此时【文本颜色】的文本框中显示为“#0000FF”的字符串。

总之，给文本添加颜色的方法很简单：只要选择需要添加颜色的文本，然后通过属性面板上的颜色拾取器选择相应颜色即可。

那么，当选择了颜色之后，在【文本颜色】的文本框中出现的字符又该如何解释呢？

我们说，这里的字符串表示的是颜色的16进制代码。所谓16进制，相对于我们日常的10进制而言，0～9表示10位，而a～f则表示新增的6位，那么从“0，1，……，9，a， b，……f”即是所有的16位。

而颜色代码中表示颜色的有 6 个字符串，其中前两位表示红（Red）色，中间两位表示绿（Green）色，而最后两位就表示蓝（Blue）色了，这也就是我们常说的RGB三原色。此时可以调和这三种原色的比例来得到世界上的各种颜色，比如“#FFFF00”表示的是调和了充分的红和绿，不掺入任何的蓝，得出的颜色就是“黄”颜色了。

1.2.2 为文本应用颜色样式

在 1.2.1 节，我们已经给页面中的文本定义了两种颜色：红色和蓝色。当在网页中继续输入文本并需要继续给这些文本定义颜色，并且还将需要到红色或蓝色中的一种颜色时，可不必如 1.2.1 节那样通过【文本颜色】拾取器来选择颜色，我们有更快捷方便的方法。

首先，我们来关注在1.2.1节给文本定义了两种颜色之后网页的本质变化在哪里。

如图1-14所示，在Dreamweaver的【文档工具栏】上单击【显示代码视图】按钮，切换网页至【代码】视图，这里我们将看到网页的本质：HTML源代码。

01 “这是一段红色的文本”之所以在【设计】视图下显示为红色，究其核心是被代码class="STYLE1"应用而起的作用。

02 “STYLE1”是在选择了颜色之后Dreamweaver自动生成的CSS样式名称，该名称的样式在网页的开始即被定义了“.STYLE1 {color: #FF0000}”。

03 这也表明了只要定义了一个样式，在网页中就可以多次应用该样式了。这也就是本小节开篇所介绍的快捷方法的原理所在。

01 如图1-15所示，切换文档至【设计】视图，换行继续输入文本“这里还是一段红色的文本”。

02 选择该段文本，打开其【属性】面板，在【样式】下拉列表框中选择“STYLE1”选项就可以快速地定义了“红颜色”出来。

使用“STYLE1”样式的好处不仅仅是可以快捷方便地定义颜色，而且当为“STYLE1”编辑定义了新的样式，比如文字的大小、背景颜色等时，凡是应用了“STYLE1”的所有网页对象均作出了相应调整并一致表现为新样式定义的内容。

1.2.3 自定义（颜色）样式

通过1.2.1和1.2.2两节内容的学习，我们可以了解到CSS样式的功能更强大更易于掌握，但这些样式均是由Dreamweaver软件自动生成的。若需要个性化的网页，可以通过自定义一些样式来实现。

注：本节虽然是针对自定义颜色的样式，但对于其他属性的定义均是如出一辙，所以通过本例也可以触类旁通，读者可以通过本例介绍的方法举一反三。

01 如图1-16所示，按【Shift】+【F11】组合键打开【CSS】面板。

02 单击【CSS】面板底部的【新建CSS规则】按钮。

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

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

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

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

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

注：CSS规则的【名称】“.GreenTxt”中的“.”号是针对当前【选择器类型】是“类”而决定的，当使用“标签”或者“高级”时，不一定需要到“.”号。当然，如果此时选择“类”并且在 CSS 规则的名称少写了“.”号，Dreamweaver 软件也会自动判断并添加 “.”号。

如图1-17所示即是对新建的CSS规则类名是“GreenTxt”的规则设置窗口。窗口的左侧显示为“分类”，窗口的右侧显示为该分类需要设置的内容，选择不同的“分类”将动态显示不同分类设置内容。有关该窗口中所有的“分类”，本书将在后面章节一一介绍。这里只针对网页中文本定义的样式进行介绍，所以“类型”正是设置的文本的各类属性样式的。

因定义的CSS规则类名是“GreenTxt”，意为定义一个“绿颜色文本”的自定义样式，所以在当前窗口中只需选择设置颜色即可。单击【颜色】拾取器，在弹出的色盘中选择“绿色”，【颜色】文本框中显示为“#00FF00”，则表示颜色设置成功。单击【.GreenTxt的 CSS 规则定义】对话框中的【确定】按钮即可完成自定义样式“GreenTxt”的样式定义。

注：通过【颜色】拾取器的选色，相应地在【颜色】文本框中显示出颜色的 16 进制代码的现象，表示当确定某种颜色时，不一定非要使用拾取器选色，如果记得颜色的 16 进制代码，完全可以在【颜色】文本框中输入该代码即可。

如图1-18所示，继续在网页中输入文本“这是一段绿色的文本”，选择该段文本，打开【属性】面板，在【样式】的下拉列表框中就出现了刚才自定义的样式“GreenTex”。选择该样式名称，即为该文本应用了样式，在网页中这段文本同时显示出了绿色。

通过对颜色的综合运用即可制作出如图1-19所示的网页。