3.4 案例实战：定义类文本

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

【操作步骤】

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

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

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

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

图3.14 定义内部样式表

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

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

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

图3.16 定义居中类样式

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

图3.17 定义红色类样式

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

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

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

图3.18 应用红色类样式

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

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

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

图3.19 应用多个类样式

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

图3.20 页面设计效果