在“CSS 设计器”面板的“源”窗格中，单击 
，然后单击下列选项之一：
- 创建新的 CSS 文件：创建新的 CSS 文件并将其附加到文档
\n - 附加现有 CSS 文件：将现有 CSS 文件附加到文档
\n - 在页面中定义：在文档中定义 CSS
\n
上次更新日期：
2024年4月25日
了解如何使用 CSS Designer 面板创建或附加样式表、媒体查询、选择器以及设置 CSS 属性。
CSS Designer 面板（窗口 > CSS Designer）是一个 CSS 属性检查器，可让您"可视化"创建 CSS 样式、文件以及设置属性和媒体问题。
CSS Designer 界面中有以下部分：
- 来源：与项目关联的 CSS 文件集合
- @Media：用于控制屏幕尺寸的媒体查询
- 选择器：与 @Media 面板中选择的媒体查询关联的选择器
- 属性：与选择的选择器关联的属性，可选择仅显示设置的属性
使用 CSS Designer，您可以编辑 CSS 样式表中的个体规则（使用 CSS Designer 中的"当前"选项卡），或者如果您愿意，可以直接在 CSS 样式表中工作（使用 CSS Designer 中的"全部"选项卡）。
创建并附加样式表
根据您选择的选项，将显示“创建新的 CSS 文件”或“附加现有的 CSS 文件”对话框。
单击“浏览”以指定 CSS 文件的名称，如果您要创建 CSS，则还需指定用来保存新文件的位置。
执行下列操作之一：
- 单击“链接”将 Dreamweaver 文档链接到 CSS 文件
- 单击“导入”将 CSS 文件导入文档中。
（可选）单击“有条件的使用”，并指定您想要与 CSS 文件关联的媒体查询。
定义媒体查询
在“CSS 设计器”面板中，单击“源”窗格中的一个 CSS 源。
单击“@Media”窗格中的 
添加新的媒体查询。
“定义媒体查询”对话框将显示，并列出 Dreamweaver 支持的所有媒体查询条件。
根据需要选择“条件”。
确保为您选择的所有条件指定有效值。 否则，无法成功创建相应的媒体查询。
注释
多种条件仅支持"与"操作。
如果通过代码添加媒体查询条件，则只会将受支持的条件填入“定义媒体查询”对话框中。 然而，该对话框中的“代码”文本框会完整地显示代码（包括不支持的条件）。
如果您单击“设计”/“实时”视图中的某个媒体查询，则视口切换以便与选定的媒体查询相匹配。 若要查看全尺寸的视口，请在“@Media”窗格中单击“全局”。
定义 CSS 选择器\n
在 CSS Designer 面板中，在 Sources 窗格中选择 CSS 源或在 @Media 窗格中选择媒体查询。
在“选择器”窗格中，单击 。 根据在文档中选择的元素，CSS Designer 会智能识别并提示您相关的选择器（最多 3 个规则）。
可执行下列一个或多个操作：
- 使用向上或向下箭头键使建议的选择器更加具体或更不具体。
- 删除建议的规则并键入所需的选择器。 请确保您键入了选择器名称以及“选择器类型”的指示符。 例如，如果您要指定 ID，请在选择器名称之前添加前缀“#”。
- 若要搜索特定选择器，请使用窗格顶部的搜索框。
- 若要重命名某个选择器，请单击该选择器，并键入所需名称。
- 若要重新组织选择器，请将选择器拖到所需位置。
- 若要将选择器从一个源移到另一个源，请将选择器拖到“源”窗格中的所需源。
- 若要复制所选源中的某个选择器，请右键单击该选择器，然后单击“复制”。
- 若要复制某个选择器并将它添加到某个媒体查询，请右键单击该选择器，将鼠标悬停在“复制到媒体查询”上，然后选择该媒体查询。
注意：只有选定的选择器的源包含媒体查询时，“复制到媒体查询中”选项才可用。 无法从一个源将选择器复制到另一个源的媒体查询中。
复制粘贴样式
您现在可以将一个选择器中的样式复制粘贴到其他选择器中了。 您可以复制所有样式或仅复制布局、文本和边框等特定类别的样式。
右键单击选择器并从可用选项中进行选择：
\n
- 如果选择器没有样式，则“复制”和“复制所有样式”处于禁用状态。
- 对于无法编辑的远程站点，“粘贴样式”处于禁用状态。 但提供了"复制"和"复制所有"
\n样式功能。 - 已在某个选择器上部分存在的粘贴样式（重叠）可以使用。 系统会粘贴所有选择器
\n的并集。 - 复制粘贴样式同样适用于不同的 CSS 文件关联方式：导入、关联、内嵌
\n样式。
重新排列选择器\n
单击所需的选择器，然后在选择器窗格中将其拖动到新位置。
设置 CSS 属性
属性分组为以下类别，并且由“属性”窗格顶部的不同图标表示：
- 布局
- 文本
- 边框
- 背景
- 更多（"仅文本"属性列表，而不是带有可视化控件的属性）
\n
注释
在编辑 CSS 选择器的属性之前，请用“反向检查”标识与该 CSS 选择器关联的元素。 这样，可评估是否所有在“反向检查”过程中突出显示的元素均确实需要更改。
选择“显示集合”复选框可仅查看集合属性。 若要查看可为选择器指定的所有属性，请取消选择“显示集合”复选框。
若要设置属性（如宽度或边框合并），请单击“属性”窗格中的属性旁边显示的所需选项。
被覆盖的属性使用删除线格式表示。
设置外边距、内边距和位置
使用 CSS Designer “属性”窗格中的框控件，可以快速设置边距、填充和位置属性。 如果您偏好代码，可以在快速编辑框中指定边距和内边距的简写代码，如本示例所示。
单击值并键入所需值。 如果您希望四个值相同并同时更改，请点击中心的关联图标。
您可以随时禁用或删除特定值，例如左边距值，同时保留右边距、上边距和下边距的值。
设置边框属性
边框控件属性按逻辑标签页组织，帮助您快速查看或修改属性。
如果您偏好代码，可以在快速编辑文本框中指定边框和边框半径的简写代码。
要指定边框控件属性，首先在“所有边”选项卡中设置属性。 然后启用其他标签页，"全部边"标签页中设置的属性将反映到个体边框中。
在个体边框标签页中更改属性时，"全部边"标签页中对应属性的值将变为"未定义"（默认值）。
在下面的示例中，边框颜色设置为黑色，然后将上边框更改为红色。
插入的代码基于简写或完整写法的偏好设置。
在“检查”期间，基于“设置”选项卡的优先级别聚焦选项卡。 优先级别最高的为“所有边”选项卡，仅接着为“顶部”、“右边”、“底部”和“左边”。 例如，如果仅设置边框的顶部值，计算模式会将焦点转到"上"标签页，忽略"全部边"标签页，因为"全部边"标签页未设置。
禁用或删除属性
通过“禁用/启用 CSS 属性”功能，可从“CSS Designer”面板中注释掉部分 CSS，而不必直接在代码中做出更改。 注释掉部分 CSS 后，即可看到特定属性和值在页面上具有的效果。
禁用某个 CSS 属性后，Dreamweaver 将向已禁用的 CSS 属性添加 CSS 注释标签和 [已禁用] 标签。 然后，可以根据自己的偏好方便地重新启用或删除所禁用的 CSS 属性。
您可以使用 CSS Designer 禁用或删除每个属性。
以下屏幕截图显示了 height 属性的禁用和删除图标。 当您将鼠标悬停在属性上时，这些图标就会显示。
您也可以在边框控件组级别使用删除和禁用控件，将这些操作应用到所有属性。
键盘快捷键
您可以用键盘快捷键添加或删除 CSS 选择器和属性。 您也可以在"属性"面板中的属性组之间导航。
|
快捷键 |
工作流程 |
|
Ctrl + Alt +[Shift =] |
添加选择器（如果控件位于选择器部分） |
|
Ctrl + Alt+ S |
添加选择器（如果控件在应用程序的任意位置） |
|
Ctrl + Alt +[Shift =] |
添加属性（如果控件位于属性部分） |
|
Ctrl + Alt+ P |
添加属性（如果控件在应用程序的任意位置） |
|
Select + Delete |
如果已选定选择器，删除选择器 |
|
Ctrl + Alt + (PgUp/PgDn) |
在属性子窗格中，在各部分之间跳转 |
标识与 CSS 选择器关联的页面元素
大多数时候，一个 CSS 选择器与多个页面元素相关联。 例如，页面主要内容中的文本、页眉和页脚文本均可与同一 CSS 选择器关联。 编辑 CSS 选择器的属性时，将影响与该选择器关联的所有元素，包括不想更改的元素。
“实时突出显示”帮助您标识所有与 CSS 选择器关联的元素。 如果只想更改一个元素或某些元素，则可为这些元素新建一个 CSS 选择器，然后编辑属性。
要标识与 CSS 选择器关联的页面元素，请将鼠标悬停在“实时”视图中的选择器上（实时代码“关闭”）。 Dreamweaver 用点划线突出显示关联的元素。
要使元素保持突出显示，请单击该选择器。 现在以蓝色边框突出显示元素。
要消除元素四周的蓝色突出显示，请再次单击该选择器。
默认情况下启用实时突出显示。 要禁用实时突出显示，请单击文档工具栏中的实时视图选项，然后单击“禁用实时突出显示”。
链接到外部 CSS 样式表
编辑外部 CSS 样式表时，链接到该 CSS 样式表的所有文档全部更新以反映所做的编辑。
可以导出文档中包含的 CSS 样式以创建新的 CSS 样式表，然后附加或链接到外部样式表以应用那里所包含的样式。
您可以将创建的或复制到站点中的任何样式表附加到页面。
请执行下列其中一种操作，以打开 CSS Designer：
- 选择“窗口”>“CSS Designer”。
- 按 Shift + F11。
在 CSS Designer 中，单击“源”旁边的“+”图标，然后选择“添加现有 CSS 文件到附件”。
执行下列操作之一：
- 单击“浏览”，浏览到外部 CSS 样式表。
- 在"文件/URL"框中键入样式表的路径。
\n
单击“预览”按钮确认样式表是否将所需的样式应用于当前页面。
如果应用的样式没有达到预期效果，请单击“取消”删除该样式表。 页面将回复到原来的外观。
单击“确定”。
