演练：创建和修改 CSS 文件

项目
11/15/2012

本演练介绍 Visual Studio 中帮助您使用级联样式表 (CSS) 的功能。它介绍如何创建包含三列的页面布局，并阐释如何创建网页和新样式表的基础技术。

备注

本主题中的示例特定于 ASP.NET Web 窗体页。您可以使用“源”视图来编辑 ASP.NET MVC（模型视图控制器）或 ASP.NET 网页应用程序（.cshtml 文件），但是“设计”视图和“拆分”视图仅在 Web 窗体页中受到完全支持。

本演练演示以下任务：

创建文件系统网站。
使用面向 CSS 的功能自定义网站。
使用 CSS 创建一个三列的页面布局。

系统必备

若要完成此演练，需要以下组件：

在您计算机上安装的 Visual Studio 或 Web Visual Studio 学习版。

备注

如果使用 Visual Studio，则本演练假设您在首次启动 Visual Studio 时，已选择“Web 开发”设置集合。有关更多信息，请参见如何：选择 Web 开发环境设置。
基本了解如何在 Visual Studio 中进行操作。

有关如何在 Visual Studio 中创建网页的说明，请参见演练：在 Visual Studio 中创建基本 Web 窗体页。

创建网站

在本部分演练中，您可以创建一个网站并向其添加 Web 窗体页。在下一节中，您可以添加一个 CSS 文件，然后在浏览器中运行该页。

如果已创建了一个网站（例如，按照在演练：在 Visual Studio 中创建一个基本 Web 窗体页中的步骤创建），则可以使用该网站并转到本演练后面的“添加页面元素并设置其样式”部分。否则，按照下面的步骤创建一个网站。

备注

针对 ASP.NET 网站和 ASP.NET Web 应用程序的默认项目模板包含一个预置的 Site.css 文件。该文件包含 CSS 规则，这些规则用于定义母版页 (Site.master) 和内容页（Default.aspx 和 About.aspx）的外观。此演练演示如何创建 CSS 以及如何 ASP.NET 网页中使用它。您通过一个空的网站项目开始，然后添加 CSS 功能到网站。

创建文件系统网站

打开 Visual Studio 或 Visual Studio Web 学习版。
在**“文件”菜单中单击“新建网站”**。

将显示**“新建网站”**对话框。
在**“已安装的模板”下，单击“Visual Basic”或“Visual”** “C#”，然后选择**“ASP.NET 空网站”**。
在**“Web”“位置”框中，选择“文件系统”**，然后输入用于保存网站页面的文件夹的名称。

例如，键入文件夹名“C:\WebSites”。
单击**“确定”**。

Visual Studio 创建一个网站项目，其中包含 Web.config 文件，但不包含任何其他页或文件。
在**“解决方案资源管理器”中，右击网站的名称，选择“添加”，然后选择“添加新项”**。
选择**“Web 窗体”，将页命名为“Default.aspx”，再单击“添加”**。

Visual Studio 会创建 Default.aspx 页并在**“源”**视图中打开该页。

添加页面元素并设置其样式

此部分为您提供一组页面元素，方便您用 Visual Studio 格式和样式设置工具进行修改。您可以将这些元素复制并粘贴到页上。该代码包含多个由 div 元素组成的代码段，其中包括标题区、左右侧栏部分、主要内容部分和页脚。这些简单元素包含可以处理的文本和元素 ID。在某些情况下，这些元素包含可用于设置页面上特定元素的样式的 CSS 类。

添加页面元素

在下面的过程中，您将使用 CSS 工具复制要使用的页面元素。页面元素包括一个含有文本和搜索框的标题区、一个页脚和三个文本部分。页面的主要内容位于最后一个文本部分中。

将页面元素添加到默认页面中

打开或切换到 Default.aspx 页。
切换到**“源”**视图。
在 <form> 部分内，移除默认创建的空 <div></div> 标记对。

在开始标记 <form> 之后添加以下代码：

<div id="pagecontainer">
  <div id="banner">
    <h1>AdventureWorks Styling Page</h1>
    <h2>Making CSS Styling Easier in Design View</h2>
    <div id="search">Find:<input id="searchbox" type="text" />
      <input id="searchbutton" type="button" value="Go" />
   </div>
</div>
<div id="leftsidebar" class="column">
  <h3>Matters of the Web</h3>
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
rutrum.</p>
</div>
<div id="rightsidebar" class="column">
  <h3>Matters of the Web</h3>
   <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
rutrum.</p>
</div>
<div id="maincontent" class="column">
  <h2>Matters of the Web</h2>
  <p> Pellentesque mattis tincidunt ipsum. Donec tempus, nunc vitae rhoncus imperdiet, eros turpis accumsan risus, ut luctus ipsum 
lacus a felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean convallis euismod 
nulla. Suspendisse potenti. Donec in mi nec odio tincidunt luctus. Donec euismod, mauris cursus molestie convallis, quam 
pede tempus magna, mollis dapibus quam est et magna. Aenean eros massa, elementum vehicula, dapibus eget, lobortis non, 
mauris. Vivamus nisl ante, interdum eget, sagittis vel, scelerisque nec, magna. Praesent placerat nibh vel metus viverra 
tincidunt.</p>
  <p>Fusce magna urna, gravida non, sodales vehicula, consequat ac, lacus. Ut sed eros sit amet neque malesuada 
malesuada. Fusce porttitor cursus eros. Maecenas libero odio, convallis vel, tristique id, sodales vel, leo. Curabitur nibh 
neque, interdum eget, convallis id, adipiscing nec, risus. Suspendisse rutrum dui sed urna. Pellentesque leo felis, tempor eu, 
convallis venenatis, auctor vitae, justo. In at massa.</p>
</div>
<div id="footer">
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2007.</p>
</div>
</div>

备注

若要提高页的可读性，请在“编辑”菜单中单击“设置文档的格式”。

保存页。
切换到**“设计”**视图以查看默认格式。

在“设计”视图中应用样式

通过使用**“设计”**视图，您可以将样式应用于页面元素并立即查看结果。不必创建和修改 .css 文件再切换到该页，即可查看样式设置是否是您想要的。

在**“设计”**视图中，您可以通过以下方式将样式设置应用于页面中的各个元素：

使用内联样式，它们是作为单个元素的 style 特性编写的。这些样式规则只能应用于该元素。
在页面的 HTML head 元素的 <style> 部分编写样式规则。这些样式规则只能应用于当前页中的元素。
将样式规则写入外部 CSS 文件。在这种情况下，这些样式规则可以应用于该网站中的所有页。

对于此部分演练，您将定义写入页面的 style 部分的格式和样式设置规则。稍后，您将创建的 CSS 信息移到外部样式表中。

设置页面标题区的格式

要进行格式设置的第一个元素是标题区部分，它包括含在 <div ID="banner"> 标记中的元素。在此示例中，您将使用**“新建样式”**对话框来更改标题的样式和位置。还将设置标题区域的大小并添加背景色。

设置标题区文本的格式

在**“设计”**视图中，单击标题区部分中的标题文本“AdventureWorks Styling Page”。

请注意，选中部分以蓝色框包围并有一个标签指示 h1 元素已选中。
在**“格式设置”工具栏的“目标规则”列表中，单击“应用新样式”。或者，在“格式”菜单上，选择“新建样式”**。

提示

默认情况下启用“格式设置”工具栏。若要启用它，在“视图”菜单中，选择“工具栏”，然后选择“格式设置”。

此时将显示**“新建样式”**对话框。
在**“选择器”列表中单击“h1”**，以使您可以创建应用于所有 h1 元素的样式。

请注意，“定义范围”列表设置为“当前页面”。 **“当前页”**指示在您当前进行编辑的页上的 style 元素中创建该样式规则。
在**“字体系列”列表中，选择“Impact”**或通常用于标题区的其他字体。

字体在**“预览”**窗格中预览。
在**“字号”框中，输入或选择“xx-large”**。
在**“字体变体”框中，输入或选择“小型大写字母”**。
单击**“确定”**。
若要查看已创建的样式规则，请切换到**“源”**视图并滚动到 style 元素，该元素位于 head 元素内。

您可以查看已为 h1 元素创建的 CSS 样式规则。
使用下列步骤以同样的方式设置标题区中 h2 元素的样式：
1. 在**“设计”**视图中，将指针放在显示为“Making CSS Styling Easier in Design View”的标题中，该标题是 h2 元素。
2. 按步骤 2 中的说明打开**“新建样式”**对话框。
3. 将**“新建样式”框中的“选择器”值设置为“h2”**。
4. 将**“字体系列”设置为“comic Sans MS”，“字号”设置为“small”**。
5. 单击**“确定”**。

选择页面元素

在 Visual Studio 中，可通过多种方式选择页面上的元素。您可以使用快速标记选择器，它位于**“设计”**视图窗格的底部。在将插入点放在页面上的任意位置时，快速标记选择器将显示一个标明该区域的基础 HTML 的标记。在快速标记选择器栏中，包含当前标记的标记显示在当前标记的左侧。例如，如果插入点在表单元格内，则 table 标记和 tr 标记将出现在 td 标记前面。

当您在标记选择器中的标记上快速移动指针时，标记上会显示一个箭头。可以单击此箭头来选择标记及其内容或只选择标记内容。

您还可以使用 Esc 键上移元素的层次结构。例如，h1 元素嵌套在标题区的 div 元素中。若要选择整个 div 元素，请单击 h1 元素将其选中，然后使用 Esc 键选择标题区 div 元素。第一次按 Esc 键时，会突出显示 h1 元素，并显示该元素的填充和边距。再次按 Esc 键时，则会选中整个 div 元素。选中该元素后，标记显示**“div#banner”**。

调整标题区的大小并定位标题的内容

在**“设计”视图中可以使用“格式设置”**工具栏调整标题区的大小并定位其内容。样式规则写入当前页的位置与写入之前样式规则的位置相同。

备注

可以使用 Ctrl 键和箭头键更改已设置的元素的大小值。例如，如果您将标题区的宽度拖到 785 像素，则可以按 Ctrl + 向左键将宽度减至 780 像素。

调整标题区的大小

切换到**“设计”**视图。
单击 h1 文本（“AdventureWorks 样式设置页”）以选中它，然后按 Esc 键两次。这一操作将选择封闭的元素，这是 div 元素，名为 banner。
拖动右下角的大小调整句柄，调整标题区 div 元素。

请注意，拖动时，工具提示会显示宽度和高度值。这些值还会显示在状态栏的左下角，状态栏位于**“设计”**视图窗口的底部。
调整该元素的大小，直到它的宽度约为 780 像素，高度约 125 像素。
若要查看已创建的样式规则，请转至**“拆分”**视图并滚动到 style 元素。

您可以查看已为标题区 div 元素创建的样式规则（使用 #banner 选择器）。
切换到**“设计”**视图。
请确保已选中标题区 div 元素（**“div#banner”**应仍在标记导航器中选中）。
在**“格式”菜单中单击“边框和底纹”**。

此时将显示**“边框和底纹”**对话框。

选择**“底纹”选项卡，选择“背景色”，然后单击“其他颜色”**。

将显示**“其他颜色”**对话框。
为标题区选择背景色，然后单击**“确定”**。

在**“拆分”**视图中，您可以看到 #banner 样式规则更新为包括 background-color 的设置。
若要调整窗体宽度以匹配标题区，请选择 form 元素。然后，拖动右侧的大小高速手柄，以将窗体的宽度减为 780 像素。

您还可以通过设置填充值来应用将标题文本居中的样式规则。

定位标题区中的标题元素

在**“设计”**视图中，选择标题区 h1 元素。
在**“格式”菜单上单击“段落”**。

此时将显示**“段落”**对话框。
在**“段落”框中的“对齐”下拉列表中选择“居中”，然后单击“确定”**。
选择 h2 元素，然后重复步骤 2 和 3。

若要完成标题区，请使用定位网格在标题区中定位搜索 div 元素及其中的元素。

定位标题区中的搜索 div 元素

在**“设计”视图中，选择搜索 div 元素（“div#search”**）。（此元素在页的顶部，包含搜索框）。
在**“格式”菜单上单击“设置位置”，然后选择“绝对”**。
通过拖动**“div#search”**元素的标签拖到标题区内，而不是在这些文本元素右侧的某个位置。

请注意，会有两条蓝线从选定项伸出来，指示上方和左侧的定位值。
当您已经放置在您希望的位置并改变到您希望的大小后，释放 div 搜索元素。

创建灵活的三列布局

通过在 Visual Studio 的**“设计”**视图中设置页面元素的格式，可以创建样式规则。还可以使用这些工具创建页面布局。

在本演练中，将使用 float 样式规则创建包含三列的布局。首先，设置左右侧栏的大小和位置。然后，调整主要内容部分的填充以创建灵活的三列布局。

备注

若要在“设计”视图中查看是否正确放置了这些元素，可能需要隐藏工具栏。隐藏工具栏可以为这为显示页面元素的位置提供更多的空间。

创建侧栏列

调整页面布局中的侧栏列大小的方法与调整标题区大小的方法相同。当您调整大小的侧边栏列时，要集只宽度值不是高度值。如果您不指定高度值，如有必要，文本可以扩展列的长度。若只要设置 div 元素的宽度，可以拖动 div 元素的右侧，而不是从角上抓取。

调整左右侧栏 div 元素的大小并定位

在**“拆分”**视图中，请在 HTML 源代码中选择左边侧栏的 div 元素。
拖动左侧栏 div 元素的右边缘，以调整该元素的大小，直到它的宽度大约为 200 像素。

请注意，当您拖动时，高度值显示在括号中，指示没有对其进行设置。
在**“格式”菜单上单击“位置”**。

此时将显示**“位置”**对话框。
在**“换行样式”下选择“左”，然后单击“确定”**。
选择右侧栏 div 元素，并拖动该元素的右边缘，直到其宽度大约为 290 像素。
在**“格式”菜单上单击“位置”**。
在**“换行样式”下单击“右”，然后单击“确定”**。

创建居中列

若要创建居中列，可以设置边距和填充，以将内容从左列和右列移走。首先创建一个左边框，然后使用填充将内容从边框移走。

设置居中列的样式

在**“设计”视图或“拆分”**视图中，为主要内容选择 div 元素。
在按住 Ctrl 键的同时，拖动主要内容 div 元素的右边距，将其设置为 290 像素。然后将左边距拖至 210 像素。

或者，您可以使用**“源”视图或“拆分”**视图创建以下样式规则：
```
#maincontent
{
    margin-right: 290px;
    margin-left: 210px;
}
```
选择主要内容的 div 元素，然后在**“格式”菜单中单击“边框和底纹”**。

此时将显示**“边框和底纹”**对话框。
在**“设置”下选择“自定义”**。
在**“样式”列表中选择“单色”，然后在“预览”**下单击左右边框按钮。
在**“宽度”**文本框中，选择 1。
在**“填充”下的“左”和“右”**框中选择 10。
单击**“确定”**。

在**“源”视图或“拆分”**视图中，注意 #maincontent 元素的样式定义已更新。

调整页脚

如果用户调整页面的大小，或页面在大型显示器上显示，则页脚可能会显示在其中一列的边缘。若要避免发生这种换行的情况，您可以设置 clear 样式规则。

调整页脚 div 元素

在**“设计”**视图中，选择页脚 div 元素。
在**“格式”菜单上单击“新建样式”**。

此时将显示**“新建样式”**对话框。
在**“选择器”**框中，输入或选择 #footer。
在**“类别”列表中，单击“布局”**。
在**“清除”列表中选择“两者”**。
单击**“确定”**。

创建和使用样式表

到目前为止，您已经通过在页面中直接操作元素创建了样式定义。您已经在页面 head 元素中的 style 元素中保存了样式定义。这些样式设置仅应用于当前页。

使用 CSS 的一个有效方法是将样式规则放入所有网页都能引用样式表中。要创建样式表，应使用与创建新页面相同的技术。

创建一个样式表并将其附加到页面

在**“解决方案资源管理器”中，右击网页名称，单击“添加”，然后再单击“添加新项”**。
在模板列表中，选择**“样式表”**。
在**“名称”框中，键入 Layout.css，然后单击“添加”**。

编辑器将打开，其中显示一个包含空 body 样式规则的新样式表。
打开或切换到 Default.aspx 页，然后切换到**“设计”**视图。
在**“视图”菜单中，单击“管理样式”**。

**“管理样式”**窗口将打开。（默认情况下，此窗口是停靠窗口。）
在**“管理样式”窗口的工具栏中，单击“附加样式表”**按钮。

此时将显示**“选择样式表”**对话框。
选择 Layout.css 文件，然后单击**“确定”**。

名为 Layout.css 的新选项卡在**“管理样式”窗口中创建。将此 Layout.css 文件附加到当前文档中。在“源”或“拆分”**视图中，您可以看到已将如下 link 元素添加到页的 head 元素中：
```
<link href="Layout.css" rel="stylesheet" type="text/css" />
```
这阐释如何使用**“管理样式”窗口为页分配样式表。也可以通过其他方式为页分配样式表。例如，您还可以将样式表文件从“解决方案资源管理器”拖动到页面“源”视图中的 head 元素中。还可以将文件从“解决方案资源管理器”中拖出，并将其放置在“设计”**视图中页面的任何地方。

将样式规则从页面移到样式表

可以使用**“管理样式”**窗格将样式从一个页面移到另一个页面，或查看样式规则是如何在页面中应用的。现在，您可以将所定义的样式规则移到刚创建的新样式表中。

使用“管理样式”窗格移动样式规则

切换到 Default.aspx 页。
切换到**“设计”**视图。
在**“管理样式”窗口的“当前页面”**部分，选择所有样式。（如果选择第一种样式，然后使用 SHIFT + CLICK 来选择最后一个样式，这样将选择所有的样式。）
在**“管理样式”窗口中，将选定的样式拖动到“Layout.css”中的“机构”**图标上。

这样，样式规则就从 Default.aspx 页中移除，并移到了 Layout.css 文件中。若要确认此操作，可以在**“源”**视图中查看 Default.aspx 页，也可以切换到编辑器中的 Layout.css 页。

您还可以使用**“管理样式”**窗口更改样式表中样式的顺序。

后续步骤

本演练通过使用用户在 Visual Studio 中的用户界面阐述了使用 CSS 样式的基本技术。您还可以了解以下可用来控制网页外观的方法：

使用现有样式表。有关更多信息，请参见演练：使用现有 CSS 文件。
以编程方式为 HTML 元素设置样式信息。有关更多信息，请参见如何：通过编程方式设置 HTML 服务器控件的属性。
创建主题和外观，这将使您不仅可以指定 CSS 样式，还可以指定 ASP.NET 控件的几乎所有属性。有关详细信息，请参见 ASP.NET 主题和外观。

请参见

其他资源

演练：在 Visual Studio 中创建基本 Web 窗体页

Visual Studio 中的网站项目类型