2.4 案例实战：定义类文本

文本属性面板中有一个【目标规则】下拉列表，在该下拉列表选项中可以为选中文本应用类样式，下面通过一个案例演示如何应用类样式，设计类文本效果。

【操作步骤】

视频讲解

第1步，启动Dreamweaver CC，新建文档，保存为test.html。模仿2.3节方法完成多段文本的输入操作。

第2步，选择【窗口】|【CSS设计器】命令，打开【CSS设计器】面板，如图2.13所示。

图2.13 打开【CSS设计器】面板

第3步，在【源】列表框标题栏右侧，单击加号按钮，从弹出的下拉列表中选择【在页面中定义】选项，定义一个内部样式表，如图2.14所示。

图2.14 定义内部样式表

第4步，在【@媒体】列表框中选择【全局】选项，在【选择器】列表框标题栏右侧，单击加号按钮添加一个样式，然后输入样式选择器的名称为.center，如图2.15所示。

图2.15 定义样式的选择器名称

第5步，在【属性】列表框顶部分类选项中单击“文本”类，然后找到text-align属性，在右侧单击居中图标，定义一个居中类样式，如图2.16所示。

图2.16 定义居中类样式

第6步，重复第3～5步操作，定义一个red类样式，定义字体颜色为红色，如图2.17所示。

图2.17 定义red类样式

第7步，切换到【代码】视图下，在页面头部区域可以看到Dreamweaver CC自动生成的样式代码如下所示。如果用户熟悉CSS语法，可以手动快速定义类样式。

     <style type="text/css">
     .center { text-align: center; }
     .red { color: #FF0000; }
     </style>

第8步，切换到【设计】视图，选中“《雨霖铃》”文本，在属性面板的【目标规则】下拉列表中可以看到刚才定义的类样式。在下拉列表中可以预览到类样式的效果。从中选择一种类样式，如选择red，在编辑窗口中会立即看到选中文本显示为红色，如图2.18所示。

图2.18 应用红色类样式

第9步，切换到【代码】视图下，Dreamweaver CC会为<p>标记应用red类样式。

     <p class="red">《雨霖铃》 </p>

第10步，在属性面板的【类】下拉列表中选择【应用多个类】选项，打开【多类选区】对话框，在该对话框的列表框中会显示当前文档中的所有类样式，从中选择为当前段落文本应用多个类样式，如center和red，如图2.19所示。

图2.19 应用多个类样式

第11步，以同样的方法为段落文本“柳永”应用red和center类样式，最后的页面设计效果如图2.20所示。

图2.20 页面设计效果