Code
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>
控件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文件的优先级是最低的。

转载于:https://www.cnblogs.com/7788/archive/2009/05/13/1455849.html

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

  1. 主题(Theme)与皮肤(Skin)

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

  2. Study Notes ASP.Net 之Theme Skin

    基本概念: Theme 和 Skin用以定义页面中各个控件的显示样式,如字体大小,前/后景色等等. 一个Theme可以包括多个Skin,一个Skin可以定义多个控件的样式. 目的: 使得页面样式的制作 ...

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

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

  4. [摘自MSDN] ASP.Net2.0学习 [2] 主题 1 :ASP.NET 主题和外观概述

    ASP.NET 主题和外观概述 主题是属性设置的集合,使用这些设置可以定义页面和控件的外观,然后在某个 Web 应用程中的所有页.整个 Web 应用程序或服务器上的所有 Web 应用程中一致地应用此外 ...

  5. 学习笔记--asp.net主题和外观(转自msdn,仅为自己学习存储和有意读者使用)

    ASP.NET 主题和外观 .NET Framework 4 其他版本 1(共 1)对本文的评价是有帮助 - 评价此主题 主题是属性设置的集合,使用这些设置可以定义页面和控件的外观,然后在某个 Web ...

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

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

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

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

  8. Style主题Theme风格Android

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

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

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

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

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

最新文章

  1. USB开发基础:USB设备的开发流程
  2. Python-OpenCV 杂项(三): 程序性能的检测和优化
  3. Java -- 注解 annotation
  4. 手机定位App从想法到上线运营(1)--介绍
  5. 谷歌Pixel 4“浴霸”相机模组细节曝光:包含一枚长焦镜头
  6. 自动生成数据同步存储过程的存储过程
  7. 离线版-端点检测代码重写
  8. DoS攻击原理和防御方法
  9. Android 关于推送通知还需要一些其他的设置问题,最新高频Android笔试题分享
  10. QC3.0手机充电器直接输出12V电压,自制诱骗线
  11. 通过黑客代号带你回顾九位世界顶尖的黑客大咖
  12. Ubuntu下安装为知笔记
  13. php rpm是什么,1. 区分 rpm -qi -qf -ql -qa四个不同选项组合的作用?
  14. 产品定位的方法与案例,遵循 大而全不如小而精 理念
  15. 在Ubuntu中安裝Anaconda
  16. cad怎么向下位移_CAD偏移快捷键命令(教你怎么绘制滚轮)
  17. secureCRT及secureFX配置
  18. php注册验证用户名已存在,php ajax注册验证用户名是否存在代码_PHP教程
  19. 识别二维码、并保存二维码链接至csv文件
  20. 论文笔记_Optimal Brain Damage

热门文章

  1. react-hooks原理
  2. 句句真研—每日长难句打卡Day13
  3. 为何手机可以用,电脑连接不上
  4. iOS14.5 Beta7使用体验感受
  5. 镇政府事业编怎么样,工作压力大吗?
  6. 吃冻梨对人会有什么好处?
  7. 当下的互联网时代,“急功近利”不是坏事
  8. 你给客户报完价,客户就没消息了,什么原因呢?
  9. 静心的最好的方法是什么?
  10. 4.3一个“简陋”的打字程序