ASPNET中的CSS主题和母版页.docx
- 文档编号:6507369
- 上传时间:2023-01-07
- 格式:DOCX
- 页数:13
- 大小:70.93KB
ASPNET中的CSS主题和母版页.docx
《ASPNET中的CSS主题和母版页.docx》由会员分享,可在线阅读,更多相关《ASPNET中的CSS主题和母版页.docx(13页珍藏版)》请在冰豆网上搜索。
ASPNET中的CSS主题和母版页
主题和母版页(层叠样式表、主题)
整合网站的第一步是采用一组一致的可视化样式。
CSS为格式化Web页面提供了跨平台的解决方案,它可以和HTML或则XHTML一起工作并几乎被所有的现代浏览器支持。
创建CSS层叠样式表
使用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;
}
这种自动的样式表看起来很有用,但它在ASP.NET里却不是那么方便。
通常你直接处理的是控件而不是独立的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页面里使用某个规则,首先页面要链接到适当的样式表,可在
节中添加如下代码(可在VS中拖动样式表进入head):--对于普通控件应用样式,可设置CssClass属性.-->
LabelID="Label1"runat="server"Text="ThisLabelusestheheading1style." CssClass="heading1">
Label>
--对于一段普通的HTML,要使用class特性-->
ThisparagraphusestheblockTextstyle.
也可通过“应用样式”窗口来指定具体的规则应用(视图->应用样式),这个设计可以实现一个预览的效果,不过注意以下几点:
∙如果选中的是Web控件,它添加或修改CssClass属性。
∙如果选中的是普通的HTML元素,它添加或修改Class特性。
∙如果选中一段HTML内容,它添加一个或 VS还提供了更多的样式表助手,下面这些特性可以帮助你在平时管理样式: ∙“管理样式”窗口: 打开一个Web页面,可以选择“视图”->“管理样式”。 ∙样式表工具条: 它提供修改现有样式以及新增样式的按钮。 (右击工具栏并勾选“样式表”复选框)。 ∙“CSS属性”窗口: 这个窗口允许仔细检查样式表并修改它的格式化属性。 (“视图”->“CSS属性”)。 主题 CSS规则只限于一组固定的样式特性,它们允许重用特定的格式化细节(字体、边框、前景色和背景色等),但它们显然不能控制ASP.NET控件的其他方面。 例如,CheckBoxList控件有一些用于控制如何把项组织为行或列的属性。 虽然这些属性影响的是控件的可视外观,但它们在CSS的范围之外,所以必须手工设置。 此外,你可能还希望在定义控件格式的同时定义控件的部分行为。 例如,你可能希望标准化Calender控件的选择模式或者TextBox控件的折行。 显然,这些都不可能通过CSS实现。 主题弥补了这一缺陷。 和CSS相似,主图允许定义一组作用于多个页面中控件的样式特性。 不过,和CSS不同的是,主题不是由浏览器实现的。 相反,它们是在服务器上实现的ASP.NET自有的解决方案。 主题不会代替样式,但它们可以提供CSS不能提供的一些特性。 下面是它们的主要区别: ∙主题基于控件而不是HTML。 主题允许定义和重用几乎所有的控件属性。 例如,可以在主题中定义一组通用的节点图片并把它们应用于多个TreeView控件,还可以为多个GridView控件定义一组模版。 CSS只是直接作用于HTML的样式特性。 ∙主题应用在服务器上。 主题作用到页面时,样式化后的最终页面被传送给用户。 而使用样式表时,浏览器同时接收到页面和样式信息并在客户端合并它们。 ∙主题不会像CSS那样层叠。 如果在一个主题和另一个控件里同时指定了一个属性,那么主题里定义的值会覆盖控件的属性。 不过,有一个方法可以改变这个行为,提高页面属性的优先级,这样主题的行为将更像样式表。 主题文件夹和外观 所有的主题都是与应用程序相关的。 要在Web应用程序里使用主题,必须创建一个定义它的文件夹,这个文件夹必须放在一个叫做App_Themes的文件夹里,而App_Themes又必须位于Web应用程序的顶层目录中。 只要每个主题都在一个单独的文件夹里,应用程序就可以定义多个主题。 对于一个给定的页面,每次只能有一个主题处于活动状态。 要让主题真正有效,必须在主题文件夹里创建至少一个外观文件。 外观文件是一个使用.skin扩展名的文本文件。 ASP.NET不会直接提供外观文件,相反,它们用于在幕后定义主题。 外观文件从本质上来说是一些控件标签(稍有些变形)。 外观文件里的控件标签不必完整定义控件,它们只有一组你希望标准化的属性。 例如,如果希望应用一个一致的颜色方案,可能只需设置ForeColor和BackColor之类的属性。 若在外观文件中为ListBox控件添加控件标签,代码看起来应该是这样的: ListBoxrunat="server"ForeColor="White"BackColor="Orange"/> runat="server"是必需的,其他所有部分都是可选的。 id特性不允许在主题里使用,因为它必须唯一区别实际网页中的每个控件。 你可以决定是创建多个外观文件还是把所有的控件标签都放到一个外观文件里。 这两种方式等效,因为ASP.NET把同一个主题目录里的所有外观文件都看成是同一个主题定义的一部分。 通常,把复杂控件(如数据控件)的控件标签单独放在外观文件里比较有意义。 应用简单主题 VS没有为创建主题提供任何设计时支持,因此从其他Web页面复制和粘贴控件标签是个好的选择,现在创建一个外观文件如下: TextBoxrunat="server"ForeColor="White"BackColor="Orange"/> ListBoxrunat="server"ForeColor="White"BackColor="Orange"/> Buttonrunat="server"ForeColor="White"BackColor="Orange"/> 让一个页面应用主题,需要在Page指令内加上Theme特性(也可以在设计时从属性窗口中选中“Document”对象设置它的Theme属性): <%@PageLanguage="C#"AutoEventWireup="true"...Theme="FunkyTheme"%> 当某个主题应用到页面后,ASP.NET会考虑Web页面上的每个控件并检查外观文件以便查看它们是否为控件定义了属性,如果发现了匹配的标签,那么从外观文件获得的信息会覆盖控件的当前属性。 处理主题冲突 如果控件的属性和主题定义的属性产生冲突,总是优先使用主题定义的属性。 不过,有时候你可能希望改变这一行为,以便使控件可以覆盖某些特定的细节从而优化主题。 ASP.NET允许这么做,不过这个选项要么对整个页面的所有控件起作用,要么都不起作用。 要实现这样的变化,只要再Page指令里用StyleSheetTheme特性替代Theme特性即可,下面是一个示例: <%@PageLanguage="C#"AutoEventWireup="true"...StylesheetTheme="FunkyTheme"%> 另一个办法是配置特定控件,从而使它完全忽略主题,只需把该控件的EnableTheming属性设为false。 TextBoxID="TextBox1"runat="server"Width="130px"EnableTheming="false">Test TextBox> 为同一控件创建多个主题 把每个控件锁定于某个单一格式有利于标准化,不过对于实际的应用程序而言,这可能不够灵活。 例如,根据文本框出现的位置以及它们包含的数据类型,你可能需要几种不同的文本框;而对于标签,当它们用作标题或者正文文字的时候可能更需要差异化。 一般而言,如果为同一个控件创建了不止一个主题,那么ASP.NET会给出一个编译错误,提示每个控件只可以有一个默认外观。 要解决这个问题,需要指定SkinID特性来创建一个被命名的外观。 下面是一个示例: TextBoxrunat="server"ForeColor="White"BackColor="Orange"/> ListBoxrunat="server"ForeColor="White"BackColor="Orange"/> Buttonrunat="server"ForeColor="White"BackColor="Orange"/> TextBoxrunat="server"ForeColor="White"BackColor="Orange" Font-Bold="True"SkinID="Dramatic"/> Buttonrunat="server"ForeColor="White"BackColor="Orange" Font-Bold="True"SkinID="Dramatic"/> 这种方式的缺点是不能像默认外观一样自动被应用。 要使用命名外观,必须指定Web页面上匹配控件的SkinID属性。 TextBoxID="TextBox1"runat="server"SkinID="Dramatic">Test TextBox> 如果你不喜欢为主题默认加入的类型,可以把所有的外观都变成命名的,这样,除非设置了控件的SkinID属性,否则它们不会被应用。 SkinID不必保持唯一,它只要对每个控件唯一即可。 例如,对于显示大量信息的页面,你可以创建新的Button、TextBox以及Label控件,并给它们相同的外观名称(例如Smaller)。 含有模版和图片的外观 到目前为止,你见到的主题示例都只应用了相对简单的属性。 其实,你可以在外观文件里创建更加详细的控件标签。 大多数属性都支持主题,如果某个属性不能在主题里声明,尝试运行应用程序时会得到一个编译错误。 很多控件支持指定一组格式化信息的样式。 数据控件是一个这样的例子,Calender控件也是。 为了匹配主题,你可以在外观文件中如下定义Calender样式: Calendarrunat="server"BackColor="White"BorderColor="Black"BorderStyle="Solid"CellSpacing="1" Font-Names="Verdana"Font-Size="9pt"ForeColor="Black"Height="250px"Width="500px" NextPrevFormat="ShortMonth"SelectionMode="Day"> ForeColor="White"Height="12pt"/> Calendar> 这个外观定义了Calender的字体,颜色和样式,还设置了选择模式、月份导航链接的格式和日历的大小。 外观的另一个强大技能是把图片作为主题的一部分而重用它们。 假设你完善了一幅图片,想把它应用于整个网站的“确定”按钮,你还有另一幅图片想要用于所有的“取消”按钮。 1.把图片加到主题文件夹(为了达到最好的组织效果,应该为存放图片创建一个或多个子文件夹)。 1. 2.创建使用这些图片的外观。 此时,所有这些标签必须是已命名的外观,因为你定义的标准化按钮类型应该只在需要时才被页面使用。 你不是在定义一个作用于所有按钮的默认样式。 (在外观文件里添加对图片的引用时,一定要保证图片的URL是相对于主题文件夹而不是页面所在的文件夹。 主题应用到控件时,ASP.NET自动在URL开始处插入Themes\ThemeName) ImageButtonrunat="server"SkinID="OKButton"ImageUrl="ButtonImages/buttonOK.jpg"/> ImageButtonrunat="server"SkinID="CancelButton"ImageUrl="ButtonImages/buttonCancel.jpg"/> 3.现在就可以应用这些图片了,在Web页面里创建一个引用相应外观名称的ImageButton(你可以使用同样的技术为其他使用图片的控件创建外观,例如可以标准化TreeView中使用的节点图片、BulletList控件的列表图片或者GridView里使用的图标): <%@PageLanguage="C#"AutoEventWireup="true"CodeFile="ImageInTheme.aspx.cs"Inherits="Chapter16_ImageInTheme"Theme="FunkyTheme"%> DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> //www.w3.org/1999/xhtml"> ImageButtonID="ImageButton1"runat="server"SkinID="OKButton"/> ImageButtonID="ImageButton2"runat="server"SkinID="CancelButton"/>