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

asp.net 的服务器端控件提供了多种样式的设计,如果对每个控件都单独设置,是比较繁琐的事情,所以微软也提供了针对这些服务器端控件的样式管理,其实也可以通过 css来控制部分服务器端控件的样式,比如textbox,如果用普css就是对input进行样式控制,但对于gridview或者日历控件等,css 文件无法灵活的控制,这就需要微软专门为服务器端控件提供的主题和皮肤。

主题和皮肤的使用方法:
 
 1、新建外观文件(*.skin),然后在文件里设定服务器端控件的样式

2、在aspx页面的Page里加入外观文件的应用,StylesheetTheme或者Theme(两者有不同)
 
 StylesheetTheme和Theme的区别:

针对默认的样式(没有定义SkinID的样式),在相应的aspx页面中Theme将采用定义的样式,在页面里再设计同属性的样式无效;StylesheetTheme则允许在页面里再定义同属性的样式并有效。(注意:是同属性的样式,比如同是定义Height)
 
举例:
 假设我们建立了一个外观文件newSkin,定义了一个默认textbox的样式和一个指定SkinID的textbox的样式(背景颜色、边框的颜色、宽度和线条类型)
 <asp:TextBox runat="server" BorderColor="#6699FF" BackColor="#CCFFCC" BorderWidth="1px" BorderStyle="Solid"></asp:TextBox>

<asp:TextBox runat="server" SkinID="new" BackColor="#FFCC99" BorderColor="#FF6600" BorderStyle="Dotted" BorderWidth="2px"></asp:TextBox>
 
示例1:

在aspx页面中使用Theme来引入外观文件,并且在页面里有四个TextBox的控件:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Skin_Default" Theme="newSkin" %>
 控件1:<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
 控件2:<asp:TextBox ID="TextBox1" runat="server" BackColor="#009933" BorderColor="#FF6600" BorderStyle="Dotted" BorderWidth="2px"></asp:TextBox>

控件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>

结果:

控件1和控件2的样式是一样的,控件2在页面里设置的样式无效;

控件3除了自定义的高度之外,和控件1、2的样式一样。(在外观文件里没有定义的属性样式,可以在页面里定义)

控件4的样式是外观文件里SkinID为new的样式,页面里定义的样式无效。

示例2:

在aspx页面中使用Theme来引入外观文件,并且在页面里有四个TextBox的控件:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Skin_Default" StylesheetTheme="newSkin" %>

控件1:<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>

控件2:<asp:TextBox ID="TextBox1" runat="server" BackColor="#009933" BorderColor="#FF6600" BorderStyle="Dotted" BorderWidth="2px"></asp:TextBox>

控件3:<asp:TextBox ID="TextBox2" runat="server" Height="40px"></asp:TextBox>

控件4:<asp:TextBox ID="TextBox2" SkinID="new" runat="server" BorderWidth="1px" BorderStyle="Solid"></asp:TextBox>

结果: 控件1是使用外观文件里的默认样式;

控件2是页面里自定义的样式;

控件3除了自定义的高度之外,和控件1的样式一样;

控件4的样式使用了外观文件里SkinID为new的样式中BackColor="#FFCC99" BorderColor="#FF6600"这两个属性,BorderWidth和BorderStyle则是页面里定义的样式。

如果StylesheetTheme或Theme和我们原来设计页面的css文件(或者页面定义style)同时使用会是什么情况?

结果:无论是使用StylesheetTheme或Theme,只要是在外观文件里定义的属性值,均是有效的,没有定义的属性值采用css文件里的样式。

如果同时使用StylesheetTheme或Theme、页面自定义样式和css文件,那又会怎么样?

结果:优先级(优先级的意思是先采用优先级高定义的样式,如果优先级高的没有定义,则采用下一优先级的样式)

1、Theme:外观文件->页面控件自定义样式->css文件

2、StylesheetTheme:页面控件自定义样式->外观文件->css文件

总之,css文件的优先级是最低的

时间: 2024-10-14 05:30:50

Asp.net主题(theme)和皮肤(skin)的使用的相关文章

Asp.net 主题 【2】

通常我们经常看到网页,一些软件提供换肤功能,各种主题间切换.ASP.NET 2.0 中可以用Theme和skin以及CSS轻松实现这个功能. 首先简单介绍一下三种技术:主题(Theme)技术,面板(skin)技术,级联样式表(css) 主题(Theme)以及面板(skin)技术这两个技术允许开发人员或设计人员自行定义网页的样式设置以及套用的样式支持,每个主题中可以包含数个面板档,这些面板档决定了控件要输出时套用的样式,开发人员则可以利用主题来决定不同的外观要使用的样式. 级联样式表(css)它是

Asp.net 主题 【1】

页面中默认的显示样式太朴素,一页一页的设置控件的显示样式效率又太低,主题和皮肤则提供了一种高效的设计方案. 一.添加主题 二.添加皮肤文件(.skin): 在皮肤文件中添加如下代码 <asp:TreeView runat="server" ShowLines="True" ExpandDepth="0">         <NodeStyle Font-Size="12px" ForeColor="

Struts2的模板和主题theme及自定义theme

Struts2的模板和主题theme及自定义theme 标签: struts2 2016-03-29 11:22 190人阅读 评论(0) 收藏 举报  分类: javaweb(8)  Struts2提供了三种主题,ajax, simple, css_xhtml,xhtml,它默认的是xhtml主题,开发时我们一般都选simple.因为Struts2所有的UI标签都是基于主题和模板的,主题和模板是Struts2所有UI标签的核心.模板是一个UI标签的外在表示形式,例如:当我们使用<s:selec

Android应用界面主题Theme使用方法

主题Theme就是用来设置界面UI风格,可以设置整个应用或者某个活动Activity的界面风格.在Android SDK中内置了下面的Theme,可以按标题栏Title Bar和状态栏Status Bar是否可见来分类: [html] view plaincopyprint? •android:theme="@android:style/Theme.Dialog"   将一个Activity显示为能话框模式 •android:theme="@android:style/The

Android 主题theme说明 摘记

主题Theme就是用来设置界面UI风格,可以设置整个应用或者某个活动Activity的界面风格.在Android SDK中内置了下面的Theme,可以按标题栏Title Bar和状态栏Status Bar是否可见来分类: [html] view plain copy print? •android:theme="@android:style/Theme.Dialog"   将一个Activity显示为能话框模式 •android:theme="@android:style/T

【Android开发基础】应用界面主题Theme使用方法

主题Theme就是用来设置界面UI风格,可以设置整个应用或者某个活动Activity的界面风格.在Android SDK中内置了下面的Theme,可以按标题栏Title Bar和状态栏Status Bar是否可见来分类: 这些主题可以应用到整个应用Application范围或者某个活动Activity范围中. 应用Application范围在AndroidManifest.xml中的application节点中设置theme属性,主题theme应用到整个应用程序中.<application   

【转载】总结一下Android中主题(Theme)的正确玩法

http://www.cnblogs.com/zhouyou96/p/5323138.html 总结一下Android中主题(Theme)的正确玩法 在AndroidManifest.xml文件中有<application android:theme="@style/AppTheme">,其中的@style/AppTheme是引用的res/values/styles.xml 中的主题样式,也有可能是引用的 res/values-v11/styles.xml 或者 res/v

应用界面主题Theme使用方法

主题Theme就是用来设置界面UI风格,可以设置整个应用或者某个活动Activity的界面风格.在Android SDK中内置了下面的Theme,可以按标题栏Title Bar和状态栏Status Bar是否可见来分类: [html] view plaincopyprint? •android:theme="@android:style/Theme.Dialog"   将一个Activity显示为能话框模式 •android:theme="@android:style/The

总结一下Android中主题(Theme)的正确玩法

在AndroidManifest.xml文件中有<application android:theme="@style/AppTheme">,其中的@style/AppTheme是引用的res/values/styles.xml 中的主题样式,也有可能是引用的 res/values-v11/styles.xml 或者 res/values-v14/styles.xml,这是根据运行此程序的手机系统来决定的,如果手机系统的API版本是11以上就是v11/styles.xml,以

关于minSdkVersion=&quot;8&quot; 升级appcompat_v7包主题&quot;Theme.AppCompat.Light&quot;等不存在的问题

关于minSdkVersion="8" 升级后,又不想用 appcompat_v7包, 那么appcompat_v7主题"Theme.AppCompat.Light"等不存在,,会产生编译错误, 方案: 找到 高级版本 对应 的主题就可. 下面以升级 到14为例. 原来作用 Theme.AppCompat.Light 的替换成@android:style/Theme.Holo.Light就可. <!-- <style name="AppBase