演练:使用现有 CSS 文件

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

备注

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

本演练演示以下任务:

  • 创建文件系统网站。

  • 使用 Visual Studio 的面向 CSS 的功能。

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

    备注

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

系统必备

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

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

    备注

    如果使用 Visual Studio,则本演练假设您在首次启动 Visual Studio 时选择了“Web 开发”设置集合。有关更多信息,请参见如何:选择 Web 开发环境设置

  • 大概了解如何在 Visual Studio 中进行操作。

    有关如何在 Visual Studio 中创建网页的说明,请参见演练:在 Visual Studio 中创建一个基本的网站/网页窗体页

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

创建网站

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

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

备注

针对 ASP.NET 网站和 ASP.NET Web 应用程序的默认项目模板包含一个 Site.css 文件。该文件包含 CSS 规则,这些规则用于定义母版页 (Site.master) 和内容页(Default.aspx 和 About.aspx)的外观。此演练演示了如何启动一个空的 ASP.NET 网站项目,然后添加 CSS 功能到网站。

创建文件系统网站

  1. 打开 Visual Studio 或 Web Visual Studio 学习版。

  2. 在**“文件”菜单中选择“新建网站”**。

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

  3. 在**“已安装的模板”下,选择“Visual Basic”“Visual C#”,然后选择“ASP.NET 空网站”**。

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

    例如,键入文件夹名“C:\WebSites”。

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

    Visual Studio 创建一个网站项目,其中包含 Web.config 文件,但不包含任何其他页或文件。

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

  7. 选择**“Web 窗体”,将页命名为“Default.aspx”,再单击“添加”**。

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

添加 HTML 元素和 CSS 文件

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

Bb398783.collapse_all(zh-cn,VS.110).gif添加 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. 切换到**“设计”**视图以查看默认格式。

Bb398783.collapse_all(zh-cn,VS.110).gif添加 CSS 文件

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

添加 CSS 文件

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

    将显示**“添加新项”**对话框。

  2. 在已安装的模板窗格中,选择 “样式表脚本”

  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 样式表时,可以使用**“管理样式”**窗口来更改样式表中的样式规则。 在本演练中,将页面从原始的三列布局修改为两列布局。 然后移除应用于原始布局的样式。

Bb398783.collapse_all(zh-cn,VS.110).gif移除右列并重新设置样式

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

移除右列代码和格式设置

  1. 在**“设计”**视图中,打开或切换到 Default.aspx 页。

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

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

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

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

  5. 保存该文件。

  6. 在**“视图”菜单中,选择“管理样式”**。

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

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

    备注

    #rightsidebar 样式的图标周围没有双色块,这指示它已不再使用并可以将其移除。

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

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

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

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

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

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

  13. 保存该文件。

添加图像

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

向项目中添加图像

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

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

  2. 在对话框中,设置文件类型为**“图像文件”**。

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

现在已将图像添加到项目中,然后必须将该图像分配给一个已位于页面上 Image 的控件。

为 Image 控件分配图像

  1. 在**“设计”**视图中,打开或切换到 Default.aspx 文件。

  2. 选择页面上的 Image 控件。

  3. 在**“属性”**窗口中,在 “ImageUrl” 旁边,选择省略号按钮(...)以设置控件的 ImageUrl 属性。

    **“选择图像”**对话框将打开。

  4. 选择添加到项目中的图像,然后单击**“确定”**。

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

为改善图像周围文本流,可以将图像浮动到主列的左侧边缘或右侧边缘。 您还可以添加填充,这会使文本远离图像。

向布局添加图像

  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. 保存样式表。

  4. 在**“设计”**视图中,切换到 Default.aspx 文件。

  5. 选择 Image 控件,它在此时将显示您添加到项目的图像。

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

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

    备注

    如果图像太大,应用样式在图像的位置和文本流上可能没有可见效果。在本示例中,请在应用样式之前减小图像大小。

后续步骤

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

请参见

任务

演练:创建和修改 CSS 文件

概念

使用 CSS 概述

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

其他资源

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