通过

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

  • 项目

更新：2007 年 11 月

使用**“直接样式应用”工具栏可以创建和修改样式。可以将“直接样式应用”工具栏与 Visual Studio 中的其他 CSS 工具一起使用。这包括“CSS 属性”窗口、“管理样式”窗口和“应用样式”**窗口。

如果要设置尚未具有 CSS 样式规则的页面元素的样式，可以使用**“直接样式应用”工具栏生成并应用新样式。例如，可以选择一个段落，然后使用“直接样式应用”**工具栏对文本应用颜色。在这种情况下，Visual Studio 会创建一个新的 CSS 样式规则并将它应用于文本。如果设置了同一段落的其他属性的格式，如段落的字体系列，则 Visual Studio 会向生成的样式规则添加新的属性声明。

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

可以使用**“直接样式应用”**工具栏以自动模式或手动模式生成并修改样式。如果您初学编写 CSS，则可使用自动模式让 Visual Studio 自动生成样式规则。如果您对编写 CSS 很有经验，则可以使用手动模式，这使您能更好地控制如何编写样式规则。

在手动模式中，可以通过向其他样式添加新属性声明的方式获得新样式。这包括新样式、另一个已生成的样式或已创建的样式。使用手动模式时，Visual Studio 将在必要时向网页添加元素，以便正确分配样式。

“直接样式应用”工具栏概述

下表列出了**“直接样式应用”**工具栏的元素。

Bb398977.alert_note(zh-cn,VS.90).gif说明：

   自动模式下禁用“目标规则”下拉列表和“重新使用现有样式”按钮。

元素

说明
“直接样式应用”工具模式选择器

使用“样式应用”下拉列表可以设置生成和修改样式时所采用的模式。如果您初学编写 CSS，请使用自动模式。如果您对编写 CSS 很有经验，则可以使用手动模式简化设计过程。
“直接样式应用”工具规则选择器

“目标规则”下拉列表影响新的 CSS 属性。可以使用该列表查看要修改的样式的名称或为当前元素创建的样式的类型。默认情况下，目标样式是优先级最高的样式。如果没有任何样式，则“新建自动类”将成为默认选项。

“目标规则”下拉列表提供了以下选项。每个选项的效果取决于当前所选内容。

  • 内联样式   修改现有属性声明或将新的属性声明添加到现有内联样式中。

  • 新建内联样式   将属性声明添加到新生成的内联样式中并将该样式应用于当前开始标记。此选项仅在当前页元素的内联样式不存在时才可用。

  • 新建自动 ID“#id”   为尚未设置规则的已应用 ID 创建新样式。当已为没有样式的页元素创建 ID，并且要将样式应用于这些元素时，此选项非常有用。

  • 新建自动类   为还没有规则的已应用类创建新样式。

  • 新建自动类“.rule”   将属性声明添加到自动生成的基于类的样式，然后将该样式应用于当前开始标记。当已为没有样式的页元素创建类，并且要将样式应用于这些元素时，此选项非常有用。

  • 应用新样式   使用“新建样式”对话框创建新样式，并且将该样式应用于当前所选内容（可选）。
“直接样式应用”工具栏重用按钮

“重新使用现有样式”按钮影响对现有样式和属性所做的更改。如果所选样式不包含您为其设置格式的属性的声明，而是当前所选内容中的另一个样式包含该声明，则“重新使用现有样式”将确定修改哪个样式。选择“重新使用现有样式”后，已包含声明的属性将被修改。如果不选择“重新使用现有样式”，则将修改目标规则。
“直接样式应用”工具栏重叠按钮

“显示重叠”按钮指定是否显示所选规则应用到的元素上的重叠部分。选择此选项后，设计器将在使用从“目标规则”下拉列表中选择的样式的内容周围显示虚线框。覆盖使您能查看使用“直接样式应用”工具栏所做的更改将影响哪些元素。这在应用多个规则时尤为有用，因为这可使您更轻松地访问要修改的特定规则。

将“直接样式应用”工具栏用于 ASP.NET 控件

可以使用**“直接样式应用”**工具栏来更改支持样式设置的 ASP.NET 服务器控件上的样式。使用该工具栏可以将样式应用于为内联样式和 CssClass 属性 (attribute) 定义属性 (property) 的服务器控件以及从 WebControl 类继承的服务器控件。用户控件没有定义这些属性。因此，您无法对用户控件使用该工具栏。

基于 ID 的样式规则不应与服务器控件一起使用。在标记或服务器代码中指定的名称不一定是呈现的 HTML 元素的 ID。因此，通过 ID 设置服务器控件的样式并不可靠。

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

可以对**“直接样式应用”**工具栏设置应用模式以确定如何创建样式规则。

对“直接样式应用”工具栏设置应用模式

  • 在**“直接样式应用”工具栏上，单击“样式应用”下拉列表，然后单击“自动”或“手动”**。

**“直接样式应用”**工具栏是创建新样式或修改现有样式规则的快捷途径。

使用“直接样式应用”工具栏创建新样式

  1. 在**“设计”视图或“源”视图中，切换到“手动”**样式应用模式。

  2. 选择要设置格式的内容。

  3. 在**“直接样式应用”工具栏上，单击“目标规则”**下拉列表，然后执行以下操作之一：

    • 若要生成基于您应用的格式设置的新样式，并将该样式应用于当前内容，请选择**“新建内联样式”、“新建自动 ID”或“新建自动类”**，然后设置该内容的格式。

    • 若要通过使用**“新建样式”对话框，并将该样式应用于当前所选内容（可选）来设计新样式，请选择“应用新样式”**。

可以修改应用于所选内容的现有样式规则，或者为样式规则创建新的属性声明。

使用“直接样式应用”工具栏修改现有样式

  1. 在**“设计”视图或“源”视图中，切换到“手动”**样式应用模式。

  2. 选择要设置格式的内容。

  3. 在**“直接样式应用”工具栏的“目标规则”**列表中，单击所需的样式。

  4. 如果所选样式不包含您为其设置格式的属性的声明，而是当前所选内容中的另一个样式包含该声明，请选择**“重新使用现有样式”**来修改现有样式。

  5. 设置该内容的格式。

请参见

概念

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

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