2. Customization主题—— 掌握控制权!前一个示例中的页面使用了Theme属性,这意味着在这个示例中使用了Customization主题为页面设置样式。Customization主题对页面元素的样式有最终决定作用。如果手动设置页面元素的样式,而该页面由Customization主题控制,那么这些样式只有在主题中不包含对应元素的样式时才能得以应用。
3. Stylesheet主题—— 服务器控件的CSS如果希望将主题像样式表那样使用,则只需要在页面的顶部使用StyleSheetTheme属性。这个变化意味着开发人员可以在每个标记的style属性中设置少量的样式,同时在主题内为站点提供一个一致的外观。
比较两种方式差别的最好方法是实际应用一下,所以在下面的“试一试”练习中将修改前面的示例以查看差别所在。
试一试:Customization主题与Stylesheet主题(1) 打开ThemeDefault.aspx页面并在代码中为文本“Styled label”添加Font-Bold=“true”。或者,可以切换到Design View,选中Styled label并在Properties窗格中将字体设置为粗体:
<asp:Label ID="Label1" SkinID="textLabel" runat="server"
Text="Styled label" Font-Bold="True"></asp:Label>
(2) 现在运行该页面可以看到字体已经变成粗体,如图5-23所示。
图 5-23
(3) 在BlueBits.skin文件中编辑带有SkinID=“textLabel”的标签,并添加下面的字体声明:
<asp:Label SkinId="textLabel" runat="server" Font-Names="Century Gothic"
Font-Size="10pt" ForeColor="MidnightBlue" Font-Bold="False"></asp:Label>
(4) 再次运行该页面,可以看到字体不再是粗体,如图5-24所示。
图 5-24
(5) 将ThemeDefault.aspx页面顶部的Theme属性修改为StyleSheetTheme。或者,可以切换到Design View,在Properties窗格中将页面的StyleSheetTheme属性设置为Blue,并删除Theme属性的值。重新运行这个页面将看到字体再次变为粗体。
操作回顾这个练习中的第一步是为标签控件添加Font-Bold=“True”属性。由于粗体属性在Customizaton主题中没有指定,因此页面上的这个样式将成功地得以应用,同时控件的文本将显示为蓝色粗体。
但是,在皮肤文件中为textLabel控件添加Font-Bold=“False”将覆盖在页面上指定的样式,因为页面仍然在使用Customization主题(由页面顶部的Theme属性表示)。结果,第二次运行页面的时候,页面上就不存在蓝色粗体文本了。
最后一个步骤是将页面顶部的Theme属性修改为StyleSheetTheme。这使得页面上指定的样式具有较高的优先级,因此第三次运行页面的时候将再次看到蓝色粗体文本。
使用Stylesheet主题或者Customization主题完全由开发人员决定。选择Customization主题使得站点的设计人员能够更多地控制站点的外观,而Stylesheet主题则使得开发人员能够定义控件的外观。然而,必须记住,如果为控件自行添加样式属性,那么如果修改主题的内容、或者直接切换到一个完全不同的主题之后,可能会发现站点的外观看起来有些奇怪。
4. Stylesheet主题和Customization主题ASP.NET中没有任何规则指定在页面中只能使用Stylesheet主题或Customization主题。如果希望可以在页面中使用两种级别的样式,无论是出于强制的原因还是最佳的决定,完全可以在站点中使用这两种主题。
例如,可能会指定不同页面之间的主要元素必须在外观上保持一致。页面的<body>标记内必须总是一种特定的字体,Menu控件必须总是包含特定样式的节点,但您也许希望只是将Label控件所应用的样式作为参考或默认样式。因此可以创建一个为主要的页面元素和Menu控件定义样式的主题,并将其用作Customization主题。然后可以使用其他样式信息创建一个不同的主题并在创建站点的时候应用它覆盖特定元素的样式,接着将这个主题用作Stylesheet主题。下面的列表是为应用程序设置样式的顺序:
(1) Stylesheet主题
(2) CSS样式
(3) Element样式
(4) Customization主题
在Customization主题中指定的样式总是会覆盖其他所有的样式。z鉙