演练：创建和修改 CSS 文件

更新：2007 年 11 月

本演练介绍 Visual Studio 2008 中的级联样式表 (CSS) 功能。它将引导您完成创建三列页面布局的过程，同时阐释创建新网页和新样式表的基本技术。

本演练阐释以下任务：

• 创建文件系统网站。

• 使用面向 CSS 的功能自定义网站。

• 使用 CSS 创建一个三列的页面布局。

先决条件

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

• Visual Studio 2008 或 Visual Web Developer 2008 速成版。有关下载信息，请参见 .NET Framework Developer Center（.NET Framework 开发人员中心）网站。

• .NET Framework 3.5 版。

创建网站

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

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

创建新的文件系统网站

1. 在 Visual Web Developer 中的“文件”菜单上单击“新建网站”。

2. 在“Visual Studio 已安装的模板”下的“新建网站”框中，单击“ASP.NET 网站”。

3. 在“位置”框中，单击“文件系统”，然后键入要保存网站页面的文件夹的名称。

   例如，键入以下文件夹名称：C:\CSSWebSite

4. 在“语言”列表中，单击“Visual Basic”或“Visual C#”，然后单击“确定”。

   说明：
   您选择的编程语言将是网站的默认语言，但您可以为每个页分别设置编程语言。

   Visual Web Developer 将创建该文件夹以及名为 Default.aspx 的新页。

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

为了使您能够将注意力集中在格式和样式的设置工具上，而不是集中在创建要进行样式设置的元素上，本节提供了一组页面元素。您可以将这些元素复制并粘贴到页面上。该代码包含多个由 div 元素组成的代码段，其中包括标题区、左右侧栏部分、主要内容部分和页脚。这些简单元素包含可以处理的文本和元素 ID。在某些情况下，这些元素包含可用于设置页面上特定元素的样式的 CSS 类。

添加页面元素

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

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

1. 打开或切换到 Default.aspx 页。

   说明：
   可以使用网站中任何可用的页。

2. 切换到“源”视图。

3. 在 <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>
   

4. 保存页。

5. 切换到“设计”视图以查看默认格式。

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

通过使用“设计”视图，您可以将样式应用于页面元素并立即查看结果。不必编写 CSS 再切换到该页，即可查看样式设置是否是您想要的。

在“设计”视图中，您可以通过多种方式将样式设置应用于页面中的各个元素。您可以使用内联样式，它们是作为单个元素的 style 属性编写的。这些样式规则只能应用于该元素。

可以在页面的 HTML head 元素的 style 元素中编写样式规则。这些样式规则只能应用于当前页中的元素。最后，您可以将样式规则写入外部 CSS 文件。在这种情况下，这些样式规则可以应用于该网站中的所有页。

在本演练中，您将向页面的 style 元素部分写入格式和样式设置信息，并作为内联样式。稍后，可以将 CSS 信息移到外部样式表以使用 Visual Studio 2008 中的其他功能。

设置页面标题区的格式

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

设置标题区文本的格式

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

   请注意，选中部分以蓝色框包围并有一个标签指示 h1 元素已选中。

2. 在“样式应用”工具栏的“目标规则”列表中，单击“应用新样式”。

   此时将显示“新建样式”对话框。

   “直接样式应用”选项默认为“手动”，因此您将手动应用该样式。

3. 在“选择器”列表中单击“h1”，以使您可以创建应用于所有 h1 元素的样式。

   请注意，“定义范围”列表设置为“当前页面”。这指示该样式规则在当前页的 style 元素中创建。

4. 在“字体系列”列表中，选择一种粗字体，如“Impact”。

5. 在“字号”框中，输入或选择“xx-large”。

6. 在“字体变体”框中，输入或选择“小型大写字母”。

7. 单击“确定”。

8. 若要查看已创建的样式规则，请切换到“源”视图并滚动到 style 元素，该元素位于 head 元素内。

   您可以查看已为 h1 元素创建的 CSS 样式规则。

9. 使用下列步骤以同样的方式设置标题区中 h2 元素的样式：

   1. 按步骤 2 中的说明打开“新建样式”对话框。

   2. 选择 h2 元素。

   3. 将“新建样式”框中的“选择器”值设置为“h2”。

   4. 将“字体系列”设置为“comic Sans MS”，“字号”设置为“small”。

选择页面元素

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

将指针移到快速标记选择器中的标记上时，标记的内容在“设计”视图中突出显示，并且标记上出现一个箭头。您可以单击此箭头执行下列操作：选择标记和标记的内容、只选择标记的内容、编辑或移除标记、打开“快速标记编辑器”对话框或打开某项的“属性”对话框。

您还可以使用 Esc 键上移元素的层次结构。例如，h1 元素嵌套在标题区的 div 元素中。若要选择整个 div 元素，请单击 h1 元素将其选中，然后使用 Esc 键选择标题区 div 元素。请注意，第一次按 Esc 键时，会突出显示 h1 元素，并显示该元素的填充和边距。（因为我们没有进行这些设置，所以它们仍是默认设置。） 再次按 Esc 键时，则会选中整个 div 元素。选中该元素后，标记显示“div#banner”。

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

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

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

调整标题区的大小

1. 切换到“设计”视图。

2. 单击 h1 文本（“AdventureWorks Styling Page”）将其选定，然后按两次 Esc 键以选择包含它的元素，即标题区 div 元素。

3. 拖动右下角的调整大小控点来调整标题区 div 元素。

   请注意，拖动时，工具提示会显示宽度和高度值。这些值还会显示在状态栏中，状态栏位于“设计”视图窗口的底部。

4. 调整该元素的大小，直到它的宽度约为 780 像素，高度约 100 像素。

5. 若要查看已创建的样式规则，请转至“拆分”视图并滚动到 style 元素。

   您可以查看已为标题区 div 元素创建的样式规则（使用 #banner 选择器）。

6. 在“设计”视图中，请确保已选中标题区 div 元素（“div#banner”应仍在标记导航器中选中）。

7. 在“格式”菜单上单击“背景色”。

   此时将显示颜色选取器。

8. 选择标题区的颜色，然后单击“确定”。

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

定位标题区中的标题元素

1. 在“设计”视图中，选择标题区 div 元素。

2. 在“格式”菜单上单击“段落”。

   此时将显示“段落”对话框。

   因为 h1 元素的长度与标题区 div 的长度相同，所以您可以将 h1 元素内的文本定位为居于标题区域的中间。

3. 在“段落”框中的“对齐”下拉列表中选择“居中”，然后单击“确定”。

4. 选择 h2 元素，然后重复步骤 2 和 3。

5. 选择标题区 div 元素。

6. 在按住 Shift 键的同时，将鼠标指针置于 div 元素的边缘，直到工具提示显示当前的填充值。

7. 拖动填充边缘，直到它与 div 元素的上边框相接。

8. 拖动两个文本元素，直到其居中（大约为 30 像素）。

若要完成标题区，必须在标题区中定位搜索 div 元素及其中的元素。可以使用 Visual Studio 2008 中的另一功能“定位网格”来达到此目的。

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

1. 在“设计”视图中，选择搜索 div 元素（“div#search”）。

2. 在“格式”菜单上单击“设置位置”，然后选择“绝对”。

3. 通过拖动搜索 div 元素的标签（显示文本“div#search”）将该元素拖到标题区内不在这些文本元素右侧的某个位置。

   请注意，会有两条蓝线从选定项伸出来，指示上方和左侧的定位值。

4. 将搜索 div 元素定位到希望的位置后，释放该元素。

创建灵活的三列布局

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

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

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

创建侧栏列

调整页面布局中的侧栏列大小的方法与调整标题区大小的方法相同。调整侧栏列的大小时，可以只设置宽度值而不设置高度值，以便在需要时文本可以扩展列的长度。若要只设置 div 元素的宽度，可以拖动 div 元素的右侧，而不是像上一示例那样抓取 div 元素的角。

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

1. 在“设计”视图中，选择左侧栏 div 元素。（可以通过在标记导航器中选择“div.column#leftsidebar”来达到此目的。）

2. 拖动左侧栏 div 元素的右边缘，以调整该元素的大小，直到它的宽度大约为 200 像素。

   请注意，当您拖动时，高度值显示在括号中，指示没有对其进行设置。

3. 在“格式”菜单上单击“位置”。

   此时将显示“位置”对话框。

4. 在“换行样式”下选择“左”，然后单击“确定”。

5. 选择右侧栏 div 元素，并拖动该元素的右边缘，直到其宽度大约为 250 像素。

6. 在“格式”菜单上单击“位置”。

7. 在“换行样式”下单击“右”，然后单击“确定”。

创建居中列

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

设置居中列的样式

1. 在“设计”视图中，选择主要内容 div 元素。

2. 在按住 Ctrl 键的同时，拖动主要内容 div 元素的右边距，以将其设置为 260 像素。然后将左边距拖至 210 像素。

3. 在选中主要内容 div 元素后，在“格式”菜单上选择“边框和底纹”。

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

4. 在“设置”下选择“自定义”。

5. 在“样式”列表中选择“单色”，在“预览”下单击左边框按钮。

6. 在“宽度”文本框中，输入 1px。

7. 在“填充”下的“左”框中输入 10px。

8. 单击“确定”。

调整页脚

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

调整页脚 div 元素

1. 在“设计”视图中，选择页脚 div 元素。

2. 在“格式”菜单上单击“新建样式”。

   此时将显示“新建样式”对话框。

3. 在“选择器”框中，输入或选择 #footer。

4. 在“类别”列表中单击“布局”。

5. 在“清除”列表中选择“两者”。

6. 单击“确定”。

创建和使用样式表

使用 CSS 的一个有效方法是将样式规则放入样式表中。然后，所有页面都可以引用这些样式，这样可以使这些页面看起来非常一致。

您还可以将级联样式表与 ASP.NET 主题一起使用。若要将样式表与主题一起使用，必须将样式表放入正确的文件夹中。有关主题和 CSS 的更多信息，请参见 ASP.NET 主题和外观概述。

创建样式表使用的技术与创建新页面所用的相同。

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

1. 在“解决方案资源管理器”中，右击网站的名称，然后单击“添加新项”。

2. 在“Visual Studio 已安装的模板”下选择“样式表”。

3. 在“名称”框中，键入 Layout.css，然后单击“添加”。

   编辑器将打开，其中显示一个包含空 body 样式规则的新样式表。

4. 打开或切换到 Default.aspx 页，然后切换到“设计”视图。

5. 在“格式”菜单中单击“CSS 样式”，然后单击“管理样式”。

   “管理样式”窗口将打开。（默认情况下，此窗口是停靠窗口。）

6. 单击“附加样式表”。

7. 此时将显示“选择样式表”对话框。

8. 选择 Layout.css 文件，然后单击“确定”。

   名为 Layout.css 的新选项卡在“管理样式”窗口中创建。

可以通过多种方式为页面指定样式表。最简单的方法是在“源”视图中将文件从“解决方案资源管理器”拖到页面的头元素中。

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

可以使用“管理样式”窗格将样式从一个页面移到另一个页面，或查看样式规则是如何在页面中应用的。

至此为止，在本演练中创建的样式规则已保存在 Default.aspx 页的 style 元素中。您可以将这些样式规则移到您创建的新样式表中。

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

1. 在“管理样式”窗口的“当前页面”选项卡中，选择所有样式。（可以使用 Shift+单击选择它们。）

2. 将所选样式拖到“管理样式”窗口的“Layout.css”选项卡中。

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

您还可以使用“管理样式”窗口更改样式表中样式的顺序。例如，可以拖动搜索样式规则，使其直接位于标题区样式规则之下。

后续步骤

本演练阐释通过 Visual Studio 2008 中的用户界面使用 CSS 样式的基本技术。您可能还想要尝试使用下面可以控制网页外观的方法：

• 使用现有样式表。有关更多信息，请参见演练：使用现有 CSS 文件。

• 以编程方式为 HTML 元素设置样式信息。有关更多信息，请参见如何：通过编程方式设置 HTML 服务器控件的属性。

• 创建主题和外观使您不仅可以指定 CSS 样式，还可以指定 ASP.NET 控件的几乎任何属性。有关详细信息，请参见ASP.NET 主题和外观概述。

请参见

任务

演练：在 Visual Web Developer 中创建基本网页

概念

Visual Web Developer 中的网站类型