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



  • 相关阅读:
    Java实现 LeetCode 56 合并区间
    JQuery实现对html结点的操作(创建,添加,删除)
    JQuery实现对html结点的操作(创建,添加,删除)
    JQuery实现对html结点的操作(创建,添加,删除)
    Java实现 LeetCode 55 跳跃游戏
    Java实现 LeetCode 55 跳跃游戏
    Java实现 LeetCode 55 跳跃游戏
    Java实现 LeetCode 54 螺旋矩阵
    Java实现 LeetCode 54 螺旋矩阵
    Java实现 LeetCode 54 螺旋矩阵
  • 原文地址:https://www.cnblogs.com/PearlRan/p/4833061.html
Copyright © 2011-2022 走看看