“样式生成器”对话框

2008-08-18

更新：2007 年 11 月

“样式生成器”对话框提供使您能够定义级联样式表 (CSS) 样式属性的选项。CSS 样式将各个格式设置属性和定位属性组合到一个属性集内，以便您可以同时应用。

“样式生成器”对话框分为两个窗格。左窗格列出八个常规类别（“字体”、“背景”、“文本”、“位置”、“布局”、“边缘”、“列表”和“其他”）。当选择某个类别时，右窗格显示选定类别的选项。在您选择样式选项时，“样式生成器”对话框为您创建 CSS 样式定义。

可以将 CSS 样式属性直接应用到单个网页上的各个 HTML 元素，或者可以将样式属性添加到外部样式表中所存储的 CSS 样式规则中。可使用外部样式表同时为许多网页定义通用外观。

显示“样式生成器”对话框

在主菜单上单击“格式”，再单击“样式”。

出现“样式生成器”对话框。
从左窗格中选择一个选项，以定义 CSS 样式属性。

在“设计”视图中创建内联 CSS 样式

当格式化“设计”视图中选定的 HTML 元素时，样式属性将内联插入到该元素的标记中。切换到“HTML”视图以查看并调整所插入的新样式属性。

将 CSS 样式属性直接应用于网页中的 HTML 元素

在 HTML 设计器的“设计”视图中打开 HTML 文档。
打开“文档大纲”窗口，选择要设置格式的元素，然后在“格式”菜单上单击“样式”，以打开“样式生成器”对话框。
从左窗格中选择一个选项，以定义 CSS 样式属性。

“样式生成器”对话框的标题中将包括选定元素的名称。CSS 样式可以应用于 HTML 文档中 <BODY> 元素内的元素。

“HTML”视图中的 CSS 样式标记

在“设计”视图中向 HTML 元素添加内联样式时，可以向该元素的开始标记添加 HTML 标记，然后您可以在“HTML”视图中查看和编辑该 HTML 标记，如下面的代码示例所示。

<DIV style="font-size:9pt; font-weight:bold; color:darkblue;">CSS Styles</DIV>

或者，可以在 HTML 文档的 <HEAD> 元素中创建 STYLE 块。例如：

<STYLE TYPE="text/css">
BODY {background:#FBFBFB; font-family:Verdana, Arial, Helv, Geneva, Helvetica, sans-serif; font-size:9pt;}
A:link {color:blue;text-decoration:none}
A:active {color:red;text-decoration:none}
A:visited {color:blue;text-decoration:none}
.term { font-size:9pt; font-weight:bold; color:darkblue;}
</STYLE>

外部样式表中的 CSS 样式

还可以在单独的、扩展名为 .css 的样式表文档中创建样式。

在扩展名为 .css 的单独的样式表文档中创建样式

打开外部样式表（.css 文档）以进行编辑，如果 Web 应用程序中没有外部样式表，可按照以下步骤创建：
1. 右击网站，然后单击“添加新项”。
2. 从“添加新项”对话框的“Visual Studio 已安装的模板”列表中，选择“样式表”，然后单击“添加”，向网站添加新的样式表。
3. 通过双击打开样式表以进行编辑。
在“样式”菜单上单击“添加样式规则”，插入一个新的空白样式定义。
将插入点置于样式规则选择器后的大括号 ({ }) 中，单击“样式”，然后在“样式”菜单上单击“生成样式”以打开“样式生成器”对话框，并向样式定义添加属性。

说明：
在打开外部 CSS 样式表进行编辑时，将出现“样式”菜单，该菜单的选项包括“添加样式规则”和“生成样式”。将插入点置于样式规则选择器后的大括号内时，“样式”菜单上的“生成样式”选项即变为可用。

若要使在外部样式表中定义的样式可用于网页上的 HTML 元素，请在该页的 <HEAD> 元素中创建到外部样式表的链接，如下面的代码示例所示。

<LINK REL=stylesheet Type="text/css" HREF="Mystyles.css">

根据 CLASS 和 ID 将样式定义应用到元素

样式定义以句点开头来定义样式 CLASS 属性，如下面的代码示例所示。

.term { font-size:9pt; font-weight:bold; color:darkblue;}

从 HTML 设计器的“设计”视图或“HTML”视图，都可以将定义的样式 CLASS 属性应用于网页中的元素。在“设计”视图中，可以在 WYSIWYG 编辑器中选择文本或元素，或者使用“文档大纲”窗口选择元素。从“格式”工具栏的“样式”下拉菜单中选择一个样式，将其应用于选定的元素。

在“HTML”视图中，可以使用“文档大纲”窗口选择元素，然后打开“属性”窗口，向下滚动到选定元素的 CLASS 属性，然后输入所需 CSS 样式的选择器（不带句点）。即将一个 CLASS 属性插入该元素的 HTML 标记中。例如：

<DIV CLASS="term">World Wide Web</DIV>

使用 "term" 样式以前的定义，将以 9 磅字体、加粗和深蓝色显示文字“World Wide Web”。

也可以定义仅在一页的一个位置上使用的唯一样式。唯一样式的名称以数字标记 (#) 开头，如下面的代码示例所示。

#bigdeal {font-decoration:underline; font-size:24pt; color:red;}

将唯一样式应用于网页中的一个元素

在 HTML 设计器的“HTML”视图中打开该页。
使用“文档大纲”窗口选择该元素，然后打开“属性”窗口
对于该元素的“ID”属性，请输入所需样式的选择器。

即将一个 ID 属性插入该元素的标记中。例如：

<P ID="bigdeal">Happy Birthday</P>

使用 "term" 样式以前的定义，将以 24 磅字体、加下划线和红色显示文字“Happy Birthday”。

任务

演练：Visual Web Developer 中的基本 HTML 编辑

演练：创建和修改 CSS 文件

用户界面元素

了解以下选项的更多信息	请参见
字体	“样式生成器”对话框 ->“字体”
背景	“样式生成器”对话框 ->“背景”
文本	“样式生成器”对话框 ->“文本”
元素在页中的位置	“样式生成器”对话框 ->“位置”
流控制、溢出、剪辑和输出分页符	“样式生成器”对话框 ->“布局”
边框、边距和空白	“样式生成器”对话框 ->“边缘”
列表	“样式生成器”对话框 ->“列表”
用户界面 (UI)、表和视觉效果	“样式生成器”对话框 ->“其他”

请参见

概念

使用 CSS 概述

参考

“颜色选择器”对话框

“字体选择器”对话框

通过