本节书摘来自异步社区《Adobe Dreamweaver CC经典教程》一书中的第1 章，第1.9节，作者：【美】Adobe公司 更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.9 使用“CSS设计器”
“CSS设计器”是Dreamweaver Creative Cloud中的新增功能。它提供了一种以更加可视化的方式创建、编辑CSS样式并进行查错的新方法。
“CSS设计器”面板包含4个窗格：“源”、“@媒体”、“选择器”和“属性”（如图1-31所示）。“源”窗格允许创建、附加、定义和删除内部和外部样式表。“@媒体”窗格用于定义媒体查询，以支持多种类型的媒体和设备。“选择器”窗格用于创建和编辑CSS规则，格式化页面上的组件和内容。一旦创建了选择器或规则，就定义了希望在“属性”窗格中应用的格式化效果。
除了允许创建和编辑CSS样式之外，“CSS设计器”还可用于识别已经定义和应用的样式，以及查找与这些样式相冲突的问题。为此，只需把光标插入到任何元素中。“CSS设计器”内的窗格然后将显示应用于所选元素或者被其继承的所有相关的样式表、媒体、查询、规则和属性（如图1-32所示）。
“CSS设计器”具有两种基本模式。默认情况下，“属性”窗格将在列表中显示所有可用的CSS属性，它们被组织在5个类别中：“布局”、“文本”、“边框”、“背景”和“其他”。可以向下滚动该列表，并根据需要应用样式效果。还可以从窗口的右上角选中“仅显示已设置属性”复选框，“属性”窗格然后将过滤列表，只显示那些实际应用的属性。在任何一种模式下，都可以添加、编辑或删除样式表、媒体查询、规则和/或属性。
“选择器”窗格还具有一个“已计算”选项，显示应用于所选元素的样式的聚合列表（如图1-33所示）。无论何时在页面上选择一个元素或组件，都会显示“已计算”选项。在创建任何类型的样式效果时，Dreamweaver创建的代码都将遵从行业标准和最佳实践。Dreamweaver甚至会根据需要自动把供应商前缀应用于某些类型的高级样式效果。
除了“CSS设计器”之外，还可以在“代码”视图内手动创建和编辑CSS样式，同时利用许多可以提高生产率的特性，比如代码提示和自动完成。
