6.3创建管理CSS样式 课件 -2022-2023学年高一下学期（中职）《网页设计与制作》（机械工业出版社）

网页设计与制作 第六章 CSS样式表 样式表的应用非常广泛，通过定义样式表，可以对页面中的元素进行美化，是美化网页的重要手段之一。Dreamweaver CS5.5支持强大的样式表定义，通过样式表的编辑功能，可以方便快捷地为网页定义各种各样的样式。 6.3创建管理CSS样式 6.3.1新建CSS样式的方法 在Dreamweaver CS5.5中有以下几种新建CSS样式的方法： 执行【格式】→【CSS样式】→【新建】菜单命令。 在【CSS样式】面板中，单击鼠标右键，从弹出的快捷菜单中单击【新建】命令。 在【CSS样式】面板中，单击面板右下侧的【新建CSS规则】按钮。 在文档窗口中选择文本，从CSS【属性】检查器的【目标规则】下拉列表中选择【新建CSS规则】选项，然后单击【编辑规则】按钮，或者在右侧单击一个属性按钮（如单击【斜体】按钮）以新建规则。 6.3创建管理CSS样式 6.3.2 【CSS样式】面板 在Dreamweaver CS5中，可以使用【CSS样式】面板查看、创建、编辑和删除CSS样式，并且可以将外部样式表附加到文档中。 1.打开【CSS样式】面板 打开【CSS样式】面板的方法有以下3种： (1)执行【窗口】→【CSS样式】菜单命令。 (2)按【Shift+F11】组合键。 (3)在文档窗口中选择文本，在CSS【属性】检查器中单击【CSS面板】按钮。 6.3创建管理CSS样式 6.3.2 【CSS样式】面板 2.【当前】模式下的【CSS样式】面板 使用【CSS样式】面板可以跟踪影响当前所选页面元素的CSS规则和属性，即【当前】模式下的【CSS样式】面板。 3.【全部】模式下的【CSS样式】面板 使用【CSS样式】面板也可以跟踪文档可用的所有规则和属性，即【全部】模式下的【CSS样式】面板。 4. 【CSS样式】面板的按钮 在【全部】和【当前】模式下，【CSS样式】面板底部都包含有视图按钮和功能按钮。 6.3创建管理CSS样式 6.3.3创建样式 在Dreamweaver CS5.5中可以创建类样式、标签样式和高级样式，下面我们以创建标签样式为例介绍创建样式表的基本操作方法。 执行【格式】→【CSS样式】→【新建】菜单命令，打开【新建CSS规则】对话框。 在该对话框的【选择器类型】下拉列表中选择【标签】选项，然后在【选择器名称】下拉列表中选择【td】选项，在【规则定义】下拉列表中选择【（仅限该文档）】选项。 单击【确定】按钮，打开CSS规则定义对话框，在【分类】列表框中选择【类型】选项，然后在右侧设置属性。 6.3创建管理CSS样式 6.3.3创建样式 设置完成后，单击【确定】按钮，此时定义的样式将显示在【CSS样式】面板中。 在文档窗口中将光标定位在单元格中，在CSS【属性】检查器的【目标规则】下拉列表中可以看到设置的样式。 6.3创建管理CSS样式 6.3.4编辑CSS样式 编辑CSS样式即指对已存在的样式进行修改，可以采用以下两种编辑方法进行。 1．在CSS规则定义对话框中编辑 在【CSS样式】面板中选取要编辑的样式，单击面板底部的【编辑样式】按钮，打开CSS规则定义对话框，在该对话框中按照定义新样式的方法设置需要的样式。 用户也可以在【所有规则】（【全部】模式）列表框中双击某条规则，打开CSS规则定义对话框，然后进行更改；或者在【所选内容的摘要】和【规则】（【当前】模式）列表框中双击某个选项，打开CSS规则定义对话框，时行修改。 6.3创建管理CSS样式 6.3.4编辑CSS样式 2．在面板的属性列表框中编辑 无论是在【全部】模式中还是在【当前】模式中，我们都可以使用【CSS样式】面板的属性列表框来编辑属性。 6.3创建管理CSS样式 6.3.5添加属性 在【CSS样式】面板的【所有规则】列表框（【全部】模式）中选择一条规则，或者在【所选内容的摘要】列表框（【当前】模式）中选择一个属性，然后单击面板底部的【只显示设置属性】按钮，在属性列表框中单击【添加属性】超链接，在弹出的列表框中选择要添加的属性，如选择【background-color】选项，设置背景色，单击右侧的色块，设置一种颜色。修改样式的同时，应用了该样式的对象会显示为更改样式后的效果。 6.3创建管理CSS样式 6.3.5链接和导入样式表 在【CSS样式】面板中单击【附加样式表】按钮，打开【链接到外部CSS样式】对话框，在该对话框中可以链接外部已经制作好的CSS样式文件，如图所示。 【链接外部样式表】对话框 6.3创建管理CSS样式 6.3.6移动CSS规则 Dreamweaver中的CSS管理功能可以让规则在文档间移动、从文档头移动到外部样式表，或在外部CSS文件间移