ASP.NET在主题中添加CSS文件

来源：互联网发布：北京程序员编辑：程序博客网时间：2024/06/04 21:16

ASP.NET在主题中添加CSS文件

在ASP.NET中，可以使用CSS来控制页面上HTML元素和ASP.NET控件的皮肤。如果在主题文件夹中添加了CSS文件，则在页面应用主题时也会自动应用CSS。

在App_Themes\StyleTheme\SimpleStyle.css中使用CSS对ASPX页面中的几个不同HTML元素应用样式规则。操作步骤如下：

1. 在Visual Studio 2010中创建一个网站WebSite1。

2. 在网站根目录创建主题文件夹App_Themes，并将“主题1”文件夹修改为StyleTheme文件夹。

3. 在StyleTheme文件夹上单击鼠标右键，在弹出的快捷菜单中选择“添加新项”命令，打开“添加新项”对话框。

4. 在对话框的中间窗口中选择“样式表”项，在窗口底部“名称”右侧的文本框中输入SimpleStyle.css。

5. 点击该对话框右下角的“添加”按钮，即可在StyleTheme主题中添加一个SimpleStyle.css样式表文件。如下图所示：

在StyleTheme主题中添加SimpleStyle.css样式表文件

6. 在SimpleStyle.css文件中添加CSS规则。代码如下：

html{    background-color:gray;    font:14px 宋体;}.content{    margin:auto;    width:400px;    border:solid 1px black;    background-color:White;    padding:10px;}h1{    color:Gray;    font-size:18px;    border-bottom:solid 1px orange;}label{    font-weight:bold;}input {    background-color:Yellow;    border:double 3px orange;}.button{    background-color:#eeeeee;}

实例

如果在名为StyleTheme的主题文件夹（App_Themes文件夹下的StyleTheme文件夹）中添加SimpleStyle.css文件，这个CSS将会自动应用到ShowSimpleCSS.aspx页面中。程序代码如下：

<%@ Page Language="C#" Theme="StyleTheme" AutoEventWireup="true" CodeFile="ShowSimpleCSS.aspx.cs" Inherits="ShowSimpleCSS" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title>ASP.NET在主题中添加CSS文件-www.baike369.com</title></head><body>    <form id="form1" runat="server">    <div class="content">            <asp:Label            ID="lblUserName"            Text="用户名："            AssociatedControlID="txtUserName"            runat="server">        </asp:Label>        <br />        <asp:TextBox            ID="txtUserName"            runat="server">        </asp:TextBox>        <br /><br />        <asp:Label            ID="lblContactNumber"            Text="联系电话："            AssociatedControlID="txtContactNumber"            runat="server">        </asp:Label>        <br />        <asp:TextBox            ID="txtContactNumber"            runat="server">        </asp:TextBox>        <br /><br />        <asp:Button            ID="btnsubmit"            Text="提交"            runat="server"            CssClass="button" />    </div>    </form></body></html>

执行结果如下：

ASP.NET在主题中添加CSS文件的操作效果

CSS用于对ShowSimpleCSS.aspx中的几个HTML元素进行样式设置。例如，样式表将页面背景色设为灰色，并将<div>标签的内容设置为居中显示。

提示

因为ASP.NET控件也会显示为HTML元素，所以样式表也可以对由ASP.NET的Label控件、TextBox控件和Button控件显示的HTML元素进行样式设置。

一个ASP.NET Label控件会输出为一个HTML <label>标签，样式表将所有的<label>标签格式化为粗体。
TextBox控件和Button控件的输出为HTML <input>标签，样式表将修改<input>标签的边框样式和背景颜色。

注意，Button控件具有CssClass属性，通过这个属性，可以在CSS中对特定的控件（或者是一些控件）进行样式设置。在示例中，Button控件输出的<input>标签的背景色被设为淡灰色，值为#eeeeee。

在此建议所有的网页都使用本节讨论的方法进行设计。应该在主题文件夹中保存外部的CSS，特别要注意，不要通过修改控件的属性来改变控件皮肤。此外，也要避免使用皮肤文件。

使用CSS的好处是使加载页面的速度更快。在外部的样式表中保存的内容越多，在每一次请求页面时需要加载的内容就越少。浏览器可以加载缓存外部样式表的内容并对Web应用程序中的所有页面应用样式表。

如果通过修改控件属性来修改控件皮肤，那么在每次请求页面时，多余的内容都会被加载到浏览器中。例如，如果修改Label控件的BackColor属性，在显示Label控件时，额外的Style属性也会显示出来。

使用皮肤文件和修改控件属性没有区别。使用皮肤也会使页面变得臃肿。举例来说，如果给Label控件创建一个皮肤，当每个页面的Label控件输出时，皮肤文件中的Label的属性必须和每个页面中的Label控件进行合并。

因此，最好使用外部的样式表来完成所有的格式化工作。

注意

主题中的CSS文件与普通的CSS文件没有任何区别，但是，主题中的CSS文件必须保存在主题文件夹中。

技巧：创建主题的简便方法

在创建控件外观时，一个简单的方法就是：将控件添加到.aspx页面中，然后利用Visual Studio 2010的属性窗口及可视化设计功能对控件进行设置，最后再将控件代码复制到外观文件中并做适当的修改。

0 0