zoukankan      html  css  js  c++  java
  • Asp.net主题(theme)和皮肤(skin)

    Asp.net主题(theme)和皮肤(skin)的使用_ASp.net

    asp.net的服务器端控件提供了多种样式的设计,如果对每个控件都单独设置,是比较繁琐的事情,所以微软也提供了针对这些服务器端控件的样式管理,其实也可以通过css来控制部分服务器端控件的样式,比如textbox,如果用普css就是对input进行样式控制,但对于gridview或者日历控件等,css文件无法灵活的控制,这就需要微软专门为服务器端控件提供的主题和皮肤。
    2
    3 主题和皮肤的使用方法:
    4
    5 1、新建外观文件(*.skin),然后在文件里设定服务器端控件的样式
    6
    7 2、在aspx页面的Page里加入外观文件的应用,StylesheetTheme或者Theme(两者有不同)
    8
    9 StylesheetTheme和Theme的区别:
    10
    11 针对默认的样式(没有定义SkinID的样式),在相应的aspx页面中Theme将采用定义的样式,在页面里再设计同属性的样式无效;StylesheetTheme则允许在页面里再定义同属性的样式并有效。(注意:是同属性的样式,比如同是定义Height)
    12
    13 举例:
    14 假设我们建立了一个外观文件newSkin,定义了一个默认textbox的样式和一个指定SkinID的textbox的样式(背景颜色、边框的颜色、宽度和线条类型)
    15 <asp:TextBox runat="server" BorderColor="#6699FF" BackColor="#CCFFCC" BorderWidth="1px" BorderStyle="Solid"></asp:TextBox>
    16
    17 <asp:TextBox runat="server" SkinID="new" BackColor="#FFCC99" BorderColor="#FF6600" BorderStyle="Dotted" BorderWidth="2px"></asp:TextBox>
    18
    19 示例1:
    20
    21 在aspx页面中使用Theme来引入外观文件,并且在页面里有四个TextBox的控件:
    22 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Skin_Default" Theme="newSkin" %>
    23 控件1:<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
    24 控件2:<asp:TextBox ID="TextBox1" runat="server" BackColor="#009933" BorderColor="#FF6600" BorderStyle="Dotted" BorderWidth="2px"></asp:TextBox>
    25 控件3:<asp:TextBox ID="TextBox2" runat="server" Height="40px"></asp:TextBox>
    26 控件4:<asp:TextBox ID="TextBox2" SkinID="new" runat="server" BorderWidth="1px" BorderStyle="Solid"></asp:TextBox>
    27
    28 结果:
    29 控件1和控件2的样式是一样的,控件2在页面里设置的样式无效;
    30 控件3除了自定义的高度之外,和控件1、2的样式一样。(在外观文件里没有定义的属性样式,可以在页面里定义)
    31 控件4的样式是外观文件里SkinID为new的样式,页面里定义的样式无效。
    32
    33 示例2:
    34
    35 在aspx页面中使用Theme来引入外观文件,并且在页面里有四个TextBox的控件:
    36 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Skin_Default" StylesheetTheme="newSkin" %>
    37 控件1:<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
    38 控件2:<asp:TextBox ID="TextBox1" runat="server" BackColor="#009933" BorderColor="#FF6600" BorderStyle="Dotted" BorderWidth="2px"></asp:TextBox>
    39 控件3:<asp:TextBox ID="TextBox2" runat="server" Height="40px"></asp:TextBox>
    40 控件4:<asp:TextBox ID="TextBox2" SkinID="new" runat="server" BorderWidth="1px" BorderStyle="Solid"></asp:TextBox>
    41
    42 结果:
    43 控件1是使用外观文件里的默认样式;
    44 控件2是页面里自定义的样式;
    45 控件3除了自定义的高度之外,和控件1的样式一样;
    46 控件4的样式使用了外观文件里SkinID为new的样式中BackColor="#FFCC99" BorderColor="#FF6600"这两个属性,BorderWidth和BorderStyle则是页面里定义的样式。
    47
    48 如果StylesheetTheme或Theme和我们原来设计页面的css文件(或者页面定义style)同时使用会是什么情况?
    49
    50 结果:无论是使用StylesheetTheme或Theme,只要是在外观文件里定义的属性值,均是有效的,没有定义的属性值采用css文件里的样式。
    51
    52 如果同时使用StylesheetTheme或Theme、页面自定义样式和css文件,那又会怎么样?
    53
    54 结果:优先级(优先级的意思是先采用优先级高定义的样式,如果优先级高的没有定义,则采用下一优先级的样式)
    55 1、Theme:外观文件->页面控件自定义样式->css文件
    56
    57 2、StylesheetTheme:页面控件自定义样式->外观文件->css文件
    58
    59 总之,css文件的优先级是最低的。

  • 相关阅读:
    wstngfw中配置snort
    ROUTE: route addition failed
    putty和psftp命令行参数
    a2 Bluebottle OS
    Project Oberon
    【批处理学习笔记】第二十五课:间接传递
    【批处理学习笔记】第二十四课:直接传递
    Java异常抛出及try,catch应用实例
    【Python学习笔记之二】浅谈Python的yield用法
    【批处理学习笔记】第二十三课:用户变量和变量引用
  • 原文地址:https://www.cnblogs.com/HughTan/p/1713626.html
Copyright © 2011-2022 走看看