现在的位置: 首页 > 综合 > 正文

主题和母版页(层叠样式表、主题)

2012年11月26日 ⁄ 综合 ⁄ 共 5653字 ⁄ 字号 评论关闭
文章目录

       整合网站的第一步是采用一组一致的可视化样式。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 中选择视图,其他窗口,文档大纲,可以清楚的罗列当前样式表中所有的规则,可以迅速定位到某一规则:

image

 

应用样式表

       要在 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 规则只限于一组固定的样式特性,它们允许重用特定的格式化细节(字体、边框、前景色和背景色等),但它们显然不能控制 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 控件添加控件标签,代码看起来应该是这样的:

<asp:ListBox runat="server" ForeColor="White" BackColor="Orange" />

       runat="server" 是必需的,其他所有部分都是可选的。id 特性不允许在主题里使用,因为它必须唯一区别实际网页中的每个控件。

 

       你可以决定是创建多个外观文件还是把所有的控件标签都放到一个外观文件里。这两种方式等效,因为 ASP.NET 把同一个主题目录里的所有外观文件都看成是同一个主题定义的一部分。通常,把复杂控件(如数据控件)的控件标签单独放在外观文件里比较有意义。

      

 

应用简单主题

       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" %>

       当某个主题应用到页面后,ASP.NET 会考虑 Web 页面上的每个控件并检查外观文件以便查看它们是否为控件定义了属性,如果发现了匹配的标签,那么从外观文件获得的信息会覆盖控件的当前属性。

 

 

处理主题冲突

       如果控件的属性和主题定义的属性产生冲突,总是优先使用主题定义的属性。不过,有时候你可能希望改变这一行为,以便使控件可以覆盖某些特定的细节从而优化主题。ASP.NET 允许这么做,不过这个选项要么对整个页面的所有控件起作用,要么都不起作用。

       要实现这样的变化,只要再 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>

 

 

为同一控件创建多个主题

       把每个控件锁定于某个单一格式有利于标准化,不过对于实际的应用程序而言,这可能不够灵活。例如,根据文本框出现的位置以及它们包含的数据类型,你可能需要几种不同的文本框;而对于标签,当它们用作标题或者正文文字的时候可能更需要差异化。

       一般而言,如果为同一个控件创建了不止一个主题,那么 ASP.NET 会给出一个编译错误,提示每个控件只可以有一个默认外观。要解决这个问题,需要指定 SkinID 特性来创建一个被命名的外观。下面是一个示例:

<asp:TextBox runat="server"  ForeColor="White" BackColor="Orange" />

<asp:ListBox runat="server" ForeColor="White" BackColor="Orange" />

<asp:Button runat="server" ForeColor="White" BackColor="Orange" />

 

<asp:TextBox runat="server"  ForeColor="White" BackColor="Orange" 

 Font-Bold="True" SkinID="Dramatic" />

<asp:Button runat="server"  ForeColor="White" BackColor="Orange" 

 Font-Bold="True" SkinID="Dramatic" />

       这种方式的缺点是不能像默认外观一样自动被应用。要使用命名外观,必须指定 Web 页面上匹配控件的 SkinID 属性。

<asp:TextBox ID="TextBox1" runat="server" SkinID="Dramatic">Test</asp:TextBox>

       如果你不喜欢为主题默认加入的类型,可以把所有的外观都变成命名的,这样,除非设置了控件的 SkinID 属性,否则它们不会被应用。

 

       SkinID 不必保持唯一,它只要对每个控件唯一即可。例如,对于显示大量信息的页面,你可以创建新的 Button、TextBox 以及 Label 控件,并给它们相同的外观名称(例如 Smaller)。

 

 

含有模版和图片的外观

       到目前为止,你见到的主题示例都只应用了相对简单的属性。其实,你可以在外观文件里创建更加详细的控件标签。大多数属性都支持主题,如果某个属性不能在主题里声明,尝试运行应用程序时会得到一个编译错误。

       很多控件支持指定一组格式化信息的样式。数据控件是一个这样的例子,Calender 控件也是。为了匹配主题,你可以在外观文件中如下定义 Calender 样式:

<asp:Calendar runat="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">

    <SelectedDayStyle BackColor="DarkOrange" ForeColor="White" />

    <DayStyle BackColor="Orange" Font-Bold="True" ForeColor="White" />

    <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" />

    <DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" Height="8pt" />

    <

抱歉!评论已关闭.