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


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

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

    在App_ThemesStyleThemeSimpleStyle.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;
        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的属性窗口及可视化设计功能对控件进行设置,最后再将控件代码复制到外观文件中并做适当的修改。



  • 相关阅读:
    为php5.6安装memched扩展
    关于OAM Webgate的最大链接数
    linux下tomcat-6的安装使用
    FastDFS_V5.0分布式存储(介绍、安装与使用)
    回忆过去,展望未来——写在2017年春节到来之际
    Linux下如何不停止服务,清空nohup.out文件
    Linux下LVM
    TCP/IP 三次握手-四次挥手
    weblogic.security.SecurityInitializationException: Authentication for user weblogic denied(详见下面具体报错信息)
    后台启动weblogic成功后,在web浏览器上无法访问
  • 原文地址:https://www.cnblogs.com/PearlRan/p/4833061.html
Copyright © 2020-2023  润新知