演练：使用现有 CSS 文件

  • 项目

更新：2007 年 11 月

本演练介绍 Visual Studio 2008 的级联样式表 (CSS) 功能，并指导您创建和修改一个包含两列的页面布局，还阐释了创建新网页和新级联样式表的基本技术。

本演练阐释以下任务：

  • 创建文件系统网站。

  • 使用 Visual Web Developer 的面向 CSS 的功能。

  • 使用 CSS 创建包含两列的页面布局。

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

    本演练演示演练：创建和修改 CSS 文件中未涉及的 Visual Studio 2008 的其他功能。

先决条件

您需要以下组件来完成本演练：

  • Visual Studio 2008 或 Microsoft Visual Web Developer 速成版。有关下载的信息，请访问 Microsoft Visual Studio Express Editions（Microsoft Visual Studio 速成版）网站。

  • .NET Framework 3.5 版。

  • 一个可以添加到网页的图像。实际图像并不重要，您将只是使用该图像来演示定位功能。

创建网站

在本部分演练中，您将创建一个网站并为其添加页。

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

创建新的文件系统网站

  1. 打开 Visual Web Developer。

  2. 在**“文件”菜单上单击“新建网站”**。

    显示**“新建网站”**对话框。

  3. 在**“Visual Studio 已安装的模板”之下单击“ASP.NET 网站”**。

  4. 在**“位置”框中选择“文件系统”**，然后键入要在其中保存网站页面的文件夹的名称。

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

  5. 在**“语言”列表中单击“Visual Basic”或“Visual C#”**。

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

  6. 单击**“确定”**。

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

添加 HTML 元素和 CSS 文件

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

添加 HTML 元素

本节添加要使用的内容。页由一个具有文本和搜索框的横幅、一个页脚和三个文本节组成。页的主要内容位于最后一个文本节中。

将 HTML 元素添加到页中

  1. 在**“源”**视图中打开 Default.aspx 页。

  2. 在 <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>
<asp:Image ID="Image1" runat="server"/>
<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>

  3. 保存页。

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

添加 CSS 文件

在本节中，将添加一个级联样式表（.css 文件），以便对上节中添加到页中的元素进行格式和样式设置。此样式表同时使用基于 ID 的样式规则和基于类的样式规则。

添加 CSS 文件

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

    随即出现**“添加新项”**对话框。

  2. 在**“Visual Studio 已安装的模板”之下单击“样式表”**。

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

    编辑器将打开一个包含 body 样式规则的新样式表。

  4. 移除 body 样式规则，然后将以下规则粘贴到文件中。

    #pagecontainer {
    width: 800px;
}
#banner {
    height: 126px;
    padding-top: 18px;
    background-color: #DD6B26;
}
#search {
    width: 254px;
    position: absolute;
    top: 115px;
    left: 545px;
    font-family: "Lucida Sans";
    font-size: small;
    color: #930626;
}
#leftsidebar {
    width: 188px;
    float: left;
    padding-right: 10px;
}
#rightsidebar {
    width: 238px;
    float: right;
    padding-left: 6px;
}
#maincontent {
    border-left: 1px solid #DD6B26;
    margin-left: 203px;
    margin-right: 260px;
    padding-left: 13px;
    padding-right: 13px;
}
#footer {
    text-align: center;
    background-color: #DD6B26;
}
h1 {
    font-family: "Lucida Calligraphy";
    font-size: x-large;
    font-weight: bold;
    color: #930626;
    text-align: center;
    height: 42px;
    margin-bottom: 0px;
}
h2 {
    font-family: "Lucida Sans";
    font-variant: small-caps;
    font-size: large;
    color: #307630;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0px;
    margin: 0;
    padding: 0;
}
p {
    font-family: "Palatino Linotype";
    font-size: medium;
}

  5. 保存该文件。

将样式规则添加到样式表中

当使用现有 CSS 样式表时，可以使用**“管理样式”**窗口来更改样式表中的样式规则。在本演练中，将页面从原始的三列布局修改为两列布局，然后移除应用于原始布局的样式。

移除右列并重新设置样式

若要将页布局更改为两列布局，则可以移除用于创建右列的代码。然后，可以重新设置其他元素的样式来创建两列布局。

移除右列代码和格式设置

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

  2. 切换到**“设计”**视图。

  3. 从**“解决方案资源管理器”**中拖动已创建的 .css 文件并将其放置在页上。

    这会将 .css 文件链接到当前页，并且该页将发生更改以反映 .css 文件中定义的样式。

  4. 切换到**“源”**视图。

  5. 删除以 <div id="rightsidebar" class="column"> 开头的 div 元素。

  6. 保存该文件。

  7. 在**“格式”菜单中单击“CSS 样式”，再单击“管理样式”**。

    将显示**“管理样式”**窗口。（默认情况下，该窗口将处于停靠状态。）

  8. 在**“管理样式”窗口中右击 #rightsidebar 样式，再单击“删除”**。

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

    #rightsidebar 样式的图标周围没有圆圈，这指示它已不再在页上使用并可以将其移除。

  9. 在**“管理样式”窗口中右击 #maincontent 样式，再单击“修改样式”**。

    将显示**“修改样式”**对话框。

  10. 在**“类别”下单击“框”**。

  11. 在**“边距”下，将“右”**框的值更改为 0。

  12. 单击**“确定”**。

  13. 切换到**“设计”**视图。现在已设置好一个两列布局。

  14. 保存该文件。

添加图像

在设置图像的样式之前，必须将图像添加到项目中并设置图像的 ImageUrl 属性。

向项目中添加图像

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

    出现**“添加现有项”**对话框。

  2. 选择图像文件，并单击**“添加”**。

现在已将图像添加到项目中，然后必须将该图像分配给一个 Image 控件。

为 Image 控件分配图像

  1. 打开或切换到“Default.aspx”文件。

  2. 切换到**“设计”**视图并选择 Image 控件。

  3. 在**“属性”**窗口中，将 Image 控件的 ImageUrl 属性设置为最近添加的图像文件的 URL。

添加样式规则以设置图像的格式

为了使图像和文本更好的结合，可以将图像向主列的左边缘或右边缘浮动并添加空白，这会使文本远离图像移动。

向布局添加图像

  1. 打开或切换到“Layout.css”文件。

  2. 将以下代码添加到样式表中。

    img {
    margin: 0px;
    border: 1px solid #DD6B26;
    padding: 5px;
}
.floatright {
    margin-left: 10px;
    float:right;
}
.floatleft {
    float: left;
    margin-right: 10px;
}

  3. 打开或切换到“Default.aspx”文件。

  4. 切换到**“设计”**视图并选择 Image 控件。

  5. 在**“管理样式”窗口中，通过右击 CSS 样式并选择“应用样式”**，将 floatright 或 floatleft CSS 样式应用于 Image 控件。

    选定的 CSS 样式将分配给 img 样式。

后续步骤

本演练阐释了借助 Visual Studio 2008 中的用户界面使用 CSS 样式的基本技术。您可能还希望了解以下可用来控制网页外观的方法：

请参见

任务

演练：创建和修改 CSS 文件

概念

使用 CSS 概述

ASP.NET Web 服务器控件和 CSS 样式

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