ASP.NET包含了大量的用于定制应用程序的页面和控件的外观和感觉的特性。控件支持使用Style(样式)对象模型来设置格式属性(例如字体、边框、背景和前景颜色、宽度、高度等等)。控件也支持使用样式表(CSS)来单独设置控件的样式。你可以用控件属性或CSS来定义控件的样式信息,或者把这些定义信息存放到单独的一组文件中(称为主题),然后把它应用到程序的所有或部分页面上。单独的控件样式是用主题的皮肤(Skin)属性来指定的。
本文用大量的示例演示了在ASP.NET 2.0中如何使用样式、主题和皮肤特性。
给控件应用样式
Web用户界面是非常灵活的,不同的Web站点的外观和感觉是截然不同的。目前广泛采用的样式表(CSS)在很大程度上就是负责处理Web上遇到的丰富的设计需求的。ASP.NET的HTML服务器控件和Web服务器控件都被设计成优先支持CSS样式表。这一部分讨论如何在服务器控件上使用样式,并演示了它们所提供的Web窗体的外观和感觉的非常细微的控制。
给HTML控件应用样式
标准的HTML标记通过style属性来支持CSS,我们可以用分号隔离的属性/值对(pair)来设置它。所有的ASP.NET HTML服务器控件都可以采用标准HTML标记的方式来接受样式。下面的例子演示了大量的应用到HTML服务器控件的样式。在源代码中你可以看到,这些样式都是在控件显示的时候传递给浏览器的。
以下是引用片段:
<spanstyle="font:12ptverdana;color:orange;font-weight:700"runat="server">
Thisissomeliteraltextinsideastyledspancontrol</span>
<p><fontface="verdana"><h4>StyledButton</h4></font><p>
<buttonstyle="font:8ptverdana;background-color:lightgreen;border-color:black;width:100"runat="server">Clickme!</button>
CSS还定义了class属性,你可以把它设置为文档中<style>...</style>内包含的CSS样式定义。Class属性使你能够一次定义样式,在多个服务器标记上使用,避免了样式的重复定义。HTML服务器控件的style属性可以用这种方式来设置,如下所示:
以下是引用片段:
<style>
.spanstyle
{
font:12ptverdana;
font-weight:700;
color:orange;
}
.buttonstyle
{
font:8ptverdana;
background-color:lightgreen;
border-color:black;
width:100
}
……
</style>
<spanclass="spanstyle"runat="server">
Thisissomeliteraltextinsideastyledspancontrol
</span>
<p><fontface="verdana"><h4>StyledButton</h4></font><p>
<buttonclass="buttonstyle"runat="server">Clickme!</button>
在分析ASP.NET页面的时候,在System.Web.UI.HtmlControls.HtmlControl类中,样式信息被填充到CssStyleCollection类型的Style属性。这个属性本质上是一个字典,它把控件的样式暴露为每个样式属性键的按字符串索引的值集合。例如,你可以使用下面的代码设置和检索HtmlInputText服务器控件的width样式属性:
以下是引用片段:
<scriptlanguage="VB"runat="server">
SubPage_Load(SenderAsObject,EAsEventArgs)
MyText.Style("width")="90px"
Response.Write(MyText.Style("width"))
EndSub
</script>
<inputtype="text"id="MyText"runat="server"/>
下面的例子显示了如何编程使用Style集合属性来控制HTML服务器控件的样式:
以下是引用片段:
<scriptlanguage="VB"runat="server">
SubPage_Load(SrcAsObject,EAsEventArgs)
Message.InnerHtml&="<h5>AccessingStyles...</h5>"
Message.InnerHtml&="Thecolorofthespanis:"&MySpan.Style("color")&"<br>"
Message.InnerHtml&="Thewidthofthetextboxis:"&MyText.Style("width")&"<p>"
Message.InnerHtml&="MySelect'sstylecollectionis:<br><br>"
DimKeysAsIEnumerator
Keys=MySelect.Style.Keys.GetEnumerator()
DoWhile(Keys.MoveNext())
DimKeyAsString
Key=CStr(Keys.Current)
Message.InnerHtml&="<li> "
Message.InnerHtml&=Key&"="&MySelect.Style(Key)&"<br>"
Loop
EndSub
SubSubmit_Click(SrcAsObject,EAsEventArgs)
Message.InnerHtml&="<h5>ModifyingStyles...</h5>"
MySpan.Style("color")=ColorSelect.Value
MyText.Style("width")="600"
Message.InnerHtml&="Thecolorofthespanis:"&MySpan.Style("color")&"<br>"
Message.InnerHtml&="Thewidthofthetextboxis:"&MyText.Style("width")
EndSub
</script>