ASPNET中的CSS、主题和母版页
- 格式:doc
- 大小:146.00 KB
- 文档页数:15
主题和母版页(层叠样式表、主题)整合网站的第一步是采用一组一致的可视化样式。
CSS 为格式化Web 页面提供了跨平台的解决方案,它可以和HTML 或则XHTML 一起工作并几乎被所有的现代浏览器支持。
使用CSS 时,可以利用样式表定义一组预定义格式,然后通过CssClass 属性把这些样式表链接到适当的控件。
样式表由规则组成,每个规则定义了Web 页面中的一个元素应该如何被格式化。
每个规则的名字包含两部分:1.点号前面表明规则要作用的HTML 元素,点号前面什么都没有表示这个规则可作用于所有的HTML 元素。
2.点号后面的部分是一个唯一的名称,叫做CSS 类名,类名区分大小写。
.heading1{font-weight:bold;font-size:large;color:Lime;font-family:Verdana, Arial, Sans-Serif;}还可以创建自动应用到HTML 标签的规则,只要把标签名作为规则名即可:h2{color: Red;}这种自动的样式表看起来很有用,但它在 里却不是那么方便。
通常你直接处理的是控件而不是独立的HTML 标签。
有时候你总是不能确定将会用什么标签呈现某个控件,因此,最好通过类名显示指定规则。
如果你不喜欢手工书写CSS 规则,VS 允许使用设计器来构建。
只要添加一个规则的声明,在花括号中点击鼠标右键,选择创建样式即可。
一个典型的样式表会定义大量的规则,样式表常用于正式定义网站用户界面主要的格式,参考下面的样式表:body{font-family: Verdana, Arial, Sans-Serif;font-size: small;}.heading1{font-weight: bold;font-size: large;color: Lime;}.heading2{font-weight: bold;font-size: medium;font-style: italic;color: #C0BA72;}.blockText{padding: 10px;background-color: #FFFFD9;border-style: solid;border-width: thin;}VS 中选择视图,其他窗口,文档大纲,可以清楚的罗列当前样式表中所有的规则,可以迅速定位到某一规则:要在Web 页面里使用某个规则,首先页面要链接到适当的样式表,可在<head> 节中添加如下代码(可在VS中拖动样式表进入head):<link href="MyStyleSheet.css"rel="stylesheet"type="text/css"/><div><!-- 对于普通控件应用样式,可设置 CssClass 属性.--><asp:Label ID="Label1"runat="server"Text="This Label uses the heading1 style."CssClass="heading1"></asp:Label><!-- 对于一段普通的 HTML,要使用 class 特性 --><div id="paragraph"runat="server"class="blockText"><p>This paragraph uses the blockText style.</p></div></div>也可通过“应用样式”窗口来指定具体的规则应用(视图->应用样式),这个设计可以实现一个预览的效果,不过注意以下几点:∙如果选中的是Web 控件,它添加或修改CssClass 属性。
主题和母版页(层叠样式表、主题)整合网站的第一步是采用一组一致的可视化样式。
CSS 为格式化Web 页面提供了跨平台的解决方案,它可以和HTML 或则XHTML 一起工作并几乎被所有的现代浏览器支持。
使用CSS 时,可以利用样式表定义一组预定义格式,然后通过CssClass 属性把这些样式表链接到适当的控件。
样式表由规则组成,每个规则定义了Web 页面中的一个元素应该如何被格式化。
每个规则的名字包含两部分:1.点号前面表明规则要作用的HTML 元素,点号前面什么都没有表示这个规则可作用于所有的HTML 元素。
2.点号后面的部分是一个唯一的名称,叫做CSS 类名,类名区分大小写。
.heading1{font-weight:bold;font-size:large;color:Lime;font-family:Verdana, Arial, Sans-Serif;}还可以创建自动应用到HTML 标签的规则,只要把标签名作为规则名即可:h2{color: Red;}这种自动的样式表看起来很有用,但它在 里却不是那么方便。
通常你直接处理的是控件而不是独立的HTML 标签。
有时候你总是不能确定将会用什么标签呈现某个控件,因此,最好通过类名显示指定规则。
如果你不喜欢手工书写CSS 规则,VS 允许使用设计器来构建。
只要添加一个规则的声明,在花括号中点击鼠标右键,选择创建样式即可。
一个典型的样式表会定义大量的规则,样式表常用于正式定义网站用户界面主要的格式,参考下面的样式表:body{font-family: Verdana, Arial, Sans-Serif;font-size: small;}.heading1{font-weight: bold;font-size: large;color: Lime;}.heading2{font-weight: bold;font-size: medium;font-style: italic;color: #C0BA72;}.blockText{padding: 10px;background-color: #FFFFD9;border-style: solid;border-width: thin;}VS 中选择视图,其他窗口,文档大纲,可以清楚的罗列当前样式表中所有的规则,可以迅速定位到某一规则:要在Web 页面里使用某个规则,首先页面要链接到适当的样式表,可在<head> 节中添加如下代码(可在VS中拖动样式表进入head):<link href="MyStyleSheet.css"rel="stylesheet"type="text/css"/><div><!-- 对于普通控件应用样式,可设置 CssClass 属性.--><asp:Label ID="Label1"runat="server"Text="This Label uses the heading1 style."CssClass="heading1"></asp:Label><!-- 对于一段普通的 HTML,要使用 class 特性 --><div id="paragraph"runat="server"class="blockText"><p>This paragraph uses the blockText style.</p></div></div>也可通过“应用样式”窗口来指定具体的规则应用(视图->应用样式),这个设计可以实现一个预览的效果,不过注意以下几点:∙如果选中的是Web 控件,它添加或修改CssClass 属性。
∙如果选中的是普通的HTML 元素,它添加或修改Class 特性。
∙如果选中一段HTML 内容,它添加一个<span>或<div>元素,然后设置它的Class 特性。
VS 还提供了更多的样式表助手,下面这些特性可以帮助你在平时管理样式:∙“管理样式”窗口:打开一个Web 页面,可以选择“视图” -> “管理样式”。
∙样式表工具条:它提供修改现有样式以及新增样式的按钮。
(右击工具栏并勾选“样式表”复选框)。
∙“CSS属性”窗口:这个窗口允许仔细检查样式表并修改它的格式化属性。
(“视图”-> “CSS属性”)。
CSS 规则只限于一组固定的样式特性,它们允许重用特定的格式化细节(字体、边框、前景色和背景色等),但它们显然不能控制 控件的其他方面。
例如,CheckBoxList 控件有一些用于控制如何把项组织为行或列的属性。
虽然这些属性影响的是控件的可视外观,但它们在CSS 的范围之外,所以必须手工设置。
此外,你可能还希望在定义控件格式的同时定义控件的部分行为。
例如,你可能希望标准化Calender 控件的选择模式或者TextBox 控件的折行。
显然,这些都不可能通过CSS 实现。
主题弥补了这一缺陷。
和CSS 相似,主图允许定义一组作用于多个页面中控件的样式特性。
不过,和CSS 不同的是,主题不是由浏览器实现的。
相反,它们是在服务器上实现的 自有的解决方案。
主题不会代替样式,但它们可以提供CSS 不能提供的一些特性。
下面是它们的主要区别:∙主题基于控件而不是HTML。
主题允许定义和重用几乎所有的控件属性。
例如,可以在主题中定义一组通用的节点图片并把它们应用于多个TreeView 控件,还可以为多个GridView 控件定义一组模版。
CSS 只是直接作用于HTML的样式特性。
∙主题应用在服务器上。
主题作用到页面时,样式化后的最终页面被传送给用户。
而使用样式表时,浏览器同时接收到页面和样式信息并在客户端合并它们。
∙主题不会像CSS 那样层叠。
如果在一个主题和另一个控件里同时指定了一个属性,那么主题里定义的值会覆盖控件的属性。
不过,有一个方法可以改变这个行为,提高页面属性的优先级,这样主题的行为将更像样式表。
所有的主题都是与应用程序相关的。
要在Web 应用程序里使用主题,必须创建一个定义它的文件夹,这个文件夹必须放在一个叫做App_Themes 的文件夹里,而App_Themes 又必须位于Web 应用程序的顶层目录中。
只要每个主题都在一个单独的文件夹里,应用程序就可以定义多个主题。
对于一个给定的页面,每次只能有一个主题处于活动状态。
要让主题真正有效,必须在主题文件夹里创建至少一个外观文件。
外观文件是一个使用 .skin 扩展名的文本文件。
不会直接提供外观文件,相反,它们用于在幕后定义主题。
外观文件从本质上来说是一些控件标签(稍有些变形)。
外观文件里的控件标签不必完整定义控件,它们只有一组你希望标准化的属性。
例如,如果希望应用一个一致的颜色方案,可能只需设置ForeColor 和BackColor 之类的属性。
若在外观文件中为ListBox 控件添加控件标签,代码看起来应该是这样的:<asp:ListBox runat="server" ForeColor="White" BackColor="Orange" /> runat="server" 是必需的,其他所有部分都是可选的。
id 特性不允许在主题里使用,因为它必须唯一区别实际网页中的每个控件。
你可以决定是创建多个外观文件还是把所有的控件标签都放到一个外观文件里。
这两种方式等效,因为 把同一个主题目录里的所有外观文件都看成是同一个主题定义的一部分。
通常,把复杂控件(如数据控件)的控件标签单独放在外观文件里比较有意义。
VS 没有为创建主题提供任何设计时支持,因此从其他Web 页面复制和粘贴控件标签是个好的选择,现在创建一个外观文件如下:<asp:TextBox runat="server"ForeColor="White"BackColor="Orange"/><asp:ListBox runat="server"ForeColor="White"BackColor="Orange"/><asp:Button runat="server"ForeColor="White"BackColor="Orange"/>让一个页面应用主题,需要在Page指令内加上Theme 特性(也可以在设计时从属性窗口中选中“Document”对象设置它的Theme 属性):<%@ Page Language="C#" AutoEventWireup="true" ... Theme="FunkyTheme" %>当某个主题应用到页面后, 会考虑Web 页面上的每个控件并检查外观文件以便查看它们是否为控件定义了属性,如果发现了匹配的标签,那么从外观文件获得的信息会覆盖控件的当前属性。
如果控件的属性和主题定义的属性产生冲突,总是优先使用主题定义的属性。
不过,有时候你可能希望改变这一行为,以便使控件可以覆盖某些特定的细节从而优化主题。
允许这么做,不过这个选项要么对整个页面的所有控件起作用,要么都不起作用。
要实现这样的变化,只要再Page 指令里用StyleSheetTheme 特性替代Theme 特性即可,下面是一个示例:<%@ Page Language="C#" AutoEventWireup="true" ...StylesheetTheme="FunkyTheme" %>另一个办法是配置特定控件,从而使它完全忽略主题,只需把该控件的EnableTheming 属性设为false 。
<asp:TextBox ID="TextBox1"runat="server"Width="130px"EnableTheming="false">Test</asp:TextBox>把每个控件锁定于某个单一格式有利于标准化,不过对于实际的应用程序而言,这可能不够灵活。