在ASP.net 2.0之后便引入了主题(Theme)的概念,将CSS文件并入到主题的统一概念中,也不需要通过<link>标记来引入CSS文件了,下面先来看一看主题的使用实例:

第一步:在解决方案资源管理器中,网站上点击右键选择“添加ASP.net文件夹à主题”,系统会新建一个名为“App_Themes”的目录,在该目录下还会自动建立一个“主题1”的目录。

“主题1”目录就是所定义的主题名称,为了更有实际意见,将“主题1”修改为“WinXP_Blue”。

第二步:在WinXP_Blue目录上点击右键,选择“添加新项…”,选择“样式表”类型,命名为blue.css。完善blue.css中CSS的定义。

第三步:在网站根目录下新建名为“TestTheme.aspx”的页面,注意:不要选择从母版中生成。在@ Page指令中加入StylesheetTheme="WinXP_Blue"属性,如:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestTheme.aspx.cs" Inherits="TestTheme" StylesheetTheme="WinXP_Blue" %>

第四步:在页面中拖入一个Button按钮,在属性面板中找到CssClass属性,该属性是一个下拉列表,列表中显示了blue.css中所有用户自定义类别的名称。

如果将@ Page指令中的StylesheetTheme="WinXP_Blue"更改成Theme="WinXP_Blue",重新打开TestTheme.aspx页面进行编辑,则控件的CssClass属性下拉列表中什么也不会出现。这是因为Theme属性的强制页面中的控件都只能通过“主题”进行界面设置,不允许控件在页面中进行自定义CSS风格;而StylesheetTheme属性则表示,既可以使用“主题”中的界面设置,也可以页面中进行自定义。

由此可以看出,CSS文件已经被“主题”的概念封装了。在实际使用“主题”技术时,还有一个称之为“皮肤Skin”的技术。Skin技术也可以将CSS做了一次封装,下面是Skin的实例:

第一步:在blue.css文件中加入下面两种CSS类的定义:

.btn

{

font-family: Arial;

background-color: #FFFF00;

border-style: dotted;

border-color: #008000;

}

.btnSubmit

{

background-color: #008080;

color: #FFFFFF;

border-style: outset;

}

第二步:在“WinXP_Blue”上点击右键添加新项,添加“外观文件”,取名为Blue.skin。这个文件便是Skin的定义文件。在blue.skin文件中加入如下代码:

<asp:Button runat="server" CssClass="btn" />

<asp:Button runat="server" CssClass="btnSubmit" SkinId="SubmitSkin" />

这样就定义了Button服务器控件的默认CSS效果与SkinId="SubmitSkin"的CSS效果。

第三步:在TestTheme.aspx页面删除之前所建的按钮,将@ Page指令中的StylesheetTheme="WinXP_Blue"更改成Theme="WinXP_Blue",另外新加入两个Button按钮,将其中一个按钮的SkinId属性定义为SubmitSkin(可以在按钮的属性面板中SkinId属性中通过下拉列表进行选择)。

<asp:Button ID="Button1" runat="server" Text="Button" />

<asp:Button ID="Button2" runat="server" Text="Button" SkinID="SubmitSkin" />

在浏览器中查看TestTheme.aspx页面,可以发现Button1按钮应用的是btn类的风格,在Skin定义文件中,没有指定SkinID的定义条目,即该控件的默认风格。Button2按钮应用的是btnSubmit风格。由此可见SkinID又是对CSS类的一次封装。

但皮肤Skin技术并不止限于对CSS类的封装,而是对服务器控件所有属性的一次封装,CssClass只是其中的一个属性。由此也可以看出,Skin技术只能应用于服务器控件。如将blue.skin文件中:

<asp:Button runat="server" CssClass="btnSubmit" SkinId="SubmitSkin" />

更改为:

<asp:Button runat="server" CssClass="btnSubmit" Text="提交" SkinId="SubmitSkin" />

加入了一个Text属性,再在浏览器中查看TestTheme.aspx页面可以发现Button2按钮的Text文字变成了“提交”。

尤其可以得出一个结论:SkinID是服务器控件属性定义的一个集合。应用SkinID的控件,就应用了这个集合中所有定义的属性。

当SkinID中定义的属性值与aspx页面中定义的属性值发冲突时,系统会如何处理呢?如在aspx页面中,Button2按钮也定义了Text属性为“Button”,SkinID中定义的Text属性是“提交”,优先使用哪一个定义要看@ Page指令中引入Theme的属性是用的哪一个。

如果使用 Theme="WinXP_Blue" ,则会优先使用 SkinID 中定义的属性;如果使用 StylesheetTheme="WinXP_Blue" ,则会优先使用 aspx 中定义的属性。

母版中不能定义主题,即不能在@ Master指令中使用Theme或StylesheetTheme属性。如果需要集中定义所有页面的主题,可以通过web.config文件配置<system.web>à<pages>节的Theme或StylesheetTheme属性来实现。

程序动态加载主题的方法与动态加载母版的方法相似,都必须在Page类的OnPreInit方法(或其触发事件)中实现,如在TestTheme.aspx.cs中动态加载主题:

protected void Page_PreInit(Object sender, EventArgs e)

{

if (Request["theme"] == "Red")

{

this.Theme = " WinXP_Red";

}

else

{

this.Theme = " WinXP_Blue";

}

}

或是:

protected override void OnPreInit(EventArgs e)

{

if (Request["theme"] == "Red")

{

this.Theme = " WinXP_Red";

}

else

{

this.Theme = " WinXP_Blue";

}

base.OnPreInit(e);

}

转载于:https://www.cnblogs.com/layerr/archive/2008/06/05/1214115.html

主题(Theme)与皮肤(Skin)相关推荐

  1. 通过模板页master page和主题theme来实现网站的风格切换

    Web站点风格切换的实现 引言 Web站点的风格切换是很常见.也很受大家欢迎的功能,比如大家熟知的博客园就提供了几十款风格模板供大家选择.在Asp.Net中,我们可以通过模板页master page和 ...

  2. R语言ggplot2可视化设置不同的图像主题(theme):使用各种不同的主题(theme)可视化数据、单的黑白主题theme_bw主题(theme)、默认的主题(theme)可视化数据

    R语言ggplot2可视化设置不同的图像主题(theme):使用各种不同的主题(theme)可视化数据.单的黑白主题theme_bw主题(theme).默认的主题(theme)可视化数据 目录

  3. php theme_path,PHP_Yii2主题(Theme)用法详解,本文实例讲述了Yii2主题(Theme) - phpStudy

    Yii2主题(Theme)用法详解 本文实例讲述了Yii2主题(Theme)用法.分享给大家供大家参考,具体如下: 首先看看主要的配置方式: 'components' => [ 'view' = ...

  4. Style主题Theme风格Android

    Style主题Theme风格Android 1. Style主题: MainActivity.java package com.glsite.style;import android.support. ...

  5. jQuery Mobile中主题theme样式a-z

    全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有class选项 jQuery Mobile中主题theme样式 Classes 字母 (a-z) 意为样式可以指定 a 到 z.例如 ...

  6. tailwindcss 官网(六)定制:配置( `tailwind.config.js `、-p、important、核心插件、`resolveConfig`)、主题 `theme` 配置

    tailwindcss 官网(六)定制:配置( tailwind.config.js.-p.important.核心插件.resolveConfig).主题 theme 配置 文章目录 tailwin ...

  7. 常规功能和模块自定义系统 (cfcmms)—013给Extjs6加入多界面主题(Theme)

    常规功能和模块自定义系统 (cfcmms)-013给Extjs6加入多界面主题(Theme) 在用sencha命令创建的Extjs6项目中只能使用一种界面主题(Theme),如果要换一个界面风络需要重 ...

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

    主题Theme就是用来设置界面UI风格,可以设置整个应用或者某个活动Activity的界面风格.在Android SDK中内置了下面的Theme,可以按标题栏Title Bar和状态栏Status B ...

  9. Android之主题(Theme)总结

    在AndroidManifest.xml文件中有<application android:theme="@style/AppTheme">,其中的@style/AppT ...

最新文章

  1. R语言构建广义相加模型(GAM:Generalized Additive Model)实战
  2. 《c++ templates》学习笔记(9)——第十二章 特化与重载
  3. 有没有python与机械结合的工作-Python3从零开始搭建一个语音对话机器人的实现...
  4. GitLab 8.15中引入了自动部署和Web终端
  5. Distributed Systems笔记-middlewares
  6. ElementUI el-time-picker-只显示小时、分钟,分并添加范围校验
  7. 各类环境渗透测试简述
  8. [剑指offer]面试题第[56-2]题[JAVA][数组中数字出现的次数][状态机][hashmap][位运算]
  9. 第九章 单处理器调度
  10. 关于juniper配速小记
  11. MongoDB:有人敢像我一样说出开源的真实用意吗?
  12. 源码完全注释:socket select
  13. html弄多个按钮_如何为HTML / CSS页面添加更多按钮?
  14. SysUtils.AdjustLineBreaks - Unix 与 Windows 的换行符互换
  15. jdk 文档下载地址
  16. 学习廖雪峰 Git 总结
  17. 英语数字的 android,英语数字听力手机版
  18. Windows鼠标键盘(PS2)驱动框架
  19. 实战:RBAC(基于角色的权限控制)-2021.11.28
  20. 案例:模拟京东快递单号的查询效果

热门文章

  1. 课程目标以及课堂作业
  2. 使用YYText-文本蓝色文字点击实现超链接跳转
  3. 分布式事务2PC笔记
  4. 推荐一个冷门又逆天的副业(Python兼职可月入10k+)
  5. 用MySQL实现类似微信朋友圈的屏蔽功能
  6. 2021年资料员-通用基础(资料员)报名考试及资料员-通用基础(资料员)证考试
  7. 解决mac电脑打开应用“意外退出”的问题
  8. uni-app.04.发布成H5后,uni.chooseImage方法在android WebView上无法使用
  9. linux命令-cp命令
  10. 估计的商是什么意思_估算是什么意思?