如何：使用“应用样式”窗口和“管理样式”窗口

更新：2007 年 11 月

您可以使用**“应用样式”窗口和“管理样式”**窗口来应用、修改、重命名和删除样式。您还可以附加或分离外部级联样式表 (CSS)，选择样式的所有实例以及查找包含样式规则集的代码。

每个窗口都有特定的用途。使用**“应用样式”窗口可以将单个样式或多个样式应用于网页元素。“应用样式”**窗口可根据样式的规则显示每个样式。因此，您只需在窗口中查看样式的外观就可以识别要使用的样式。

使用**“管理样式”**窗口可以更改样式的位置或顺序。您不但可以在外部 CSS 和内部 CSS 之间移动样式，还可以在样式表或样式块中移动样式的位置。

此两个工具都使用图标来指示样式的定义方式。下表显示并介绍了每个图标。

图标	说明
	红点指示基于 ID 的样式。
	绿点指示基于类的样式。
	蓝点指示基于元素的样式。
	黄点指示内联样式。
	点周围的圆圈指示该样式在当前页中使用。
	At 符 (@) 指示导入的外部级联样式表。

使用“应用样式”窗口

**“应用样式”窗口可列出为页面定义的所有 CSS 样式规则。其中包括在外部样式表中定义的样式规则、定义为内联样式的样式规则以及在页面中定义的样式的样式规则。基于类和基于 ID 的样式规则显示在包含该样式的外部 .css 文件的名称下。如果样式规则是在页中定义的，则它将显示在“当前页”下。基于元素的样式规则按相同方式组织，不过它们显示在单独的“上下文选择器”**标题下。

您可以对该窗口进行设置，让它列出所有样式规则。或者，您也可以对列表进行限制，让它仅列出当前网页中使用的或页面的当前选定内容中使用的样式规则。无论您选择这些选项中哪个选项，只有在以下两种情况下，基于元素的样式规则和内联样式规则才会显示在窗口中。一种情况是您将鼠标指针置于使用该样式的页元素上方时，另一种情况是选择使用该样式的内容时。

您还可以对**“应用样式”**窗口中显示的样式列表进行排序。

如果在当前窗口背景下难以查看特定样式，则您可以为不包含背景属性的样式选择其在窗口中显示时的背景色。

说明：
若要在弹出窗口中暂时显示某个样式的所有规则，请在“应用样式”窗口中将鼠标指针置于该样式之上。

“应用样式”窗口概述

**“应用样式”**窗口的用户界面具有以下功能：

• “新建样式”，可访问**“样式”**对话框。

• “附加样式表”，可使您选择要附加到当前页的样式表。

• “清除样式”，可从当前选定内容中移除所有基于类的样式规则和内联样式规则。

• “当前页”，可列出当前页和导入的外部 CSS 文件中的基于类和基于 ID 的样式规则。

• 一个由 At 符 (@) 指示的外部 CSS 文件，它可显示所有导入到当前网页中的样式规则。

• 一个外部 CSS 文件，该文件是从当前网页链接的，并作为独立的部分显示。

• 样式周围的一个矩形实线边框，它指示当前选定内容使用该样式。

• “上下文选择器”，可列出当前选定内容所使用的基于元素的样式规则。

• “内联样式”，可显示应用于所选内联元素的样式规则。

• 每个样式规则都有一个快捷菜单，您可以使用该菜单执行许多与样式相关的任务。

使用“应用样式”窗口

您可以使用**“应用样式”**窗口将单个样式或多个样式快速应用于页元素。

使用“应用样式”窗口将样式应用于页元素

1. 若要显示**“应用样式”窗口，请在“格式”菜单中，单击“CSS 样式”，然后单击“应用样式”**。

2. 在网页的**“设计”视图或“源”视图中，选择要对其应用样式的元素，然后在“应用样式”**窗口中执行以下操作之一：

   • 若要应用单个现有样式规则，请单击要应用的类或 ID 样式。

   • 若要应用多个现有样式规则，请在每次单击要应用的样式时按住 CTRL 键。

您可以更改样式的顺序和要显示的样式，还可自定义窗口，以显示您要显示的内容。

使用“应用样式”窗口对样式进行排序

• 在**“应用样式”窗口中，单击“选项”**，然后执行以下操作之一：

  • 若要按照样式规则在 CSS 中的显示顺序列出样式规则，请单击**“按顺序分类”**。

  • 若要按照字母顺序或样式的类型（基于类的或基于 ID 的样式）列出样式，请单击**“按类型分类”**。

您可以在**“应用样式”窗口中显示或隐藏样式规则。对于基于元素的样式规则和内联样式规则，仅当将鼠标指针置于使用样式的页元素上方，或选择使用样式的内容时，它们才会显示在“应用样式”**窗口中。

使用“应用样式”窗口显示或隐藏样式

• 在**“应用样式”窗口中，单击“选项”**，然后执行以下操作之一：

  • 若要列出当前网页的外部、内部和内联 CSS 中包含的所有样式规则，请单击**“显示所有样式”**。

  • 若要只列出当前网页中使用的样式规则，请单击**“显示当前页中使用的样式”**。

  • 若要只列出网页中当前选定内容所使用的样式规则，请单击**“显示选定内容中使用的样式”**。

如果有样式规则没有背景色，则您可以应用可使该样式名称在**“应用样式”**窗口中更易于查看的颜色。如果样式具有背景样式规则，则该背景将会和样式一起显示。

在“应用样式”窗口中显示颜色背景

1. 在**“应用样式”窗口中，单击“选项”，然后单击“预览背景色”**。

2. 在**“其他颜色”对话框中，选择一种颜色，然后单击“确定”**。

使用“管理样式”窗口

**“管理样式”窗口可列出页的外部级联样式表 (CSS) 中定义的所有样式规则。它还可列出在页面中定义的、未定义为内联样式的所有样式规则。您可以使用“管理样式”**窗口，在外部样式表和页面上的 style 元素之间移动样式。您还可以使用该窗口在 CSS 样式规则集内移动样式的位置。

您可以对该窗口进行设置，让它列出所有样式规则，或者也可对其进行限制，让它仅列出当前网页中使用的样式规则或页面的当前选定内容中使用的样式规则。所有基于类、基于元素和基于 ID 的样式规则都将显示在包含样式规则的外部 .css 文件名称下。如果样式规则在当前页中，则它将显示在**“当前页”**下。

说明：
若要在弹出窗口中暂时显示某个样式的所有规则，请在“应用样式”窗口中将鼠标指针置于该样式之上。

“管理样式”窗口概述

**“管理样式”**窗口的用户界面具有以下功能：

• “新建样式”，可访问**“样式”**对话框。

• “附加样式表”，可使您选择要附加到当前页的样式表。

• “当前页”，可列出当前页和所有导入的外部 CSS 文件中的基于类和基于 ID 的样式规则。

• 所有外部 .css 文件都有一个从当前网页链接的选项卡。

• 默认选择器分组，可显示包含组中多个选择器的任何样式的选择器。您可以通过单击**“选项”，然后再单击“分隔分组的选择器”**，来单独列出选择器。

若要在**“管理样式”窗口中显所选样式的示预览，请单击“选项”，然后单击“显示所选样式的预览”**。

使用“管理样式”窗口

您可以更改样式的顺序，并自定义窗口以显示您要显示的内容。在列表中上下移动样式，同样也会导致样在样式表中移动。此更改会影响样式属性的级联方式。例如，如果在两个不同样式中都设置了同一个属性 (property) 属性 (attribute)，则最后一个样式将有优先权。

说明：
如果将“管理样式”窗口设置为“按元素分类”或“按类型分类”，则您就不能将样式移到样式列表的特定位置。在任一情况下，您都只能通过将样式拖到外部 CSS 文件的名称或“当前页”，来在外部 CSS 之间或外部 CSS 与页面之间移动样式。

使用“管理样式”窗口移动样式

1. 若要显示**“管理样式”窗口，请在“格式”菜单中，单击“CSS 样式”，然后单击“管理样式”**。

2. 在**“管理样式”窗口中，单击“选项”，接着单击“按顺序分类”**，然后执行以下操作之一：

   • 若要在 CSS 中移动样式的位置，请在列表中上下拖动样式。例如，您可以移动使用最频繁的样式，以便让它们彼此相邻显示。

   • 若要将样式从页中移到附加到该页的外部 CSS 中，请将该样式从**“当前页”**下拖到外部 CSS 的名称中，或外部 CSS 中样式列表的特定位置处。

   • 若要将样式从外部 CSS 页移到页中，请将该样式从外部 CSS 的名称下拖到**“当前页”中，或“当前页”下样式列表中的特定位置处。如果没有显示“当前页”**，请在网页的 head 元素内添加 style 元素。

   • 若要将样式从一个外部 CSS 页移到另一个外部 CSS 页，请将该样式拖到目标外部 CSS 的名称中，或拖到外部 CSS 中样式列表的特定位置处。

尽管**“管理样式”**窗口最适用于管理样式，但还可使用它对页元素应用样式。

使用“管理样式”窗口应用样式

1. 在网页的**“设计”视图或“源”**视图中，选择要对其应用样式的元素。

2. 右击要应用的类或 ID 样式，然后在快捷菜单中单击**“应用样式”**。

您还可以通过使用**“选项”**按钮下的各选项对样式进行排序。

使用“管理样式”窗口对样式进行排序

• 在**“管理样式”窗口中，单击“选项”**，然后执行以下操作之一：

  • 单击**“按顺序分类”**以按照样式在 CSS 中的显示顺序列出各样式。

  • 单击**“按元素分类”**以在应用了各样式的 HTML 元素下列出各样式。

  • 单击**“按类型分类”**以根据样式的类型并按照字母顺序列出各样式。

您可以对已分组的样式进行分隔，以便更加方便使用它们。

单独列出包含多个选择器的样式的每个选择器

• 在**“管理样式”窗口中，单击“选项”，然后单击“分隔分组的选择器”**。

您还可以指定要在**“管理样式”**窗口中显示的样式。

在“管理样式”窗口中显示或隐藏样式

• 在**“管理样式”窗口中，单击“选项”，接着单击“按顺序分类”**，然后执行以下操作之一：

  • 单击**“显示所有样式”**以列出外部样式表、页面以及当前页的内联样式规则中的所有样式。

  • 单击**“显示当前页中使用的样式”**以仅列出当前页中使用的样式。

  • 单击**“显示选定内容中使用的样式”**以仅列出页中当前选定内容所使用的样式。

请参见

概念

如何：使用“CSS 属性”窗口

如何：使用“直接样式应用”工具栏