在ASP.NET 2.0中使用样式、主题和皮肤

ChinaItLab

佚名

2007-1-20

保存本文

推荐给好友

收藏本页

欢迎进入.NET社区论坛，与200万技术人员互动交流 >>进入

　　ASP.NET 2.0的主题和皮肤特性使你能够把样式和布局信息存放到一组独立的文件中，总称为主题（Theme）。接下来我们可以把这个主题应用到任何站点，用于改变该站点内的页面和控件的外观和感觉。通过改变主题的内容，而不用改变站点的单个页面，就可以轻易地改变站点的样式。主题也可以在开发者之间共享。

　　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服务器控件的样式。在源代码中你可以看到，这些样式都是在控件显示的时候传递给浏览器的。

＜span style="font: 12pt verdana; color:orange;font-weight:700" runat="server"＞
This is some literal text inside a styled span control＜/span＞
＜p＞＜font face="verdana"＞＜h4＞Styled Button＜/h4＞＜/font＞＜p＞
＜button style="font: 8pt verdana;background-color:lightgreen;border-color:black;width:100" runat="server"＞Click me!＜/button＞

　　CSS还定义了class属性，你可以把它设置为文档中＜style＞...＜/style＞内包含的CSS样式定义。Class属性使你能够一次定义样式，在多个服务器标记上使用，避免了样式的重复定义。HTML服务器控件的style属性可以用这种方式来设置，如下所示：

＜style＞
.spanstyle
{
font: 12pt verdana;
font-weight:700;
color:orange;
}

.buttonstyle
{
font: 8pt verdana;
background-color:lightgreen;
border-color:black;
width:100
}
……
＜/style＞

＜span class="spanstyle" runat="server"＞
This is some literal text inside a styled span control
＜/span＞
＜p＞＜font face="verdana"＞＜h4＞Styled Button＜/h4＞＜/font＞＜p＞
＜button class="buttonstyle" runat="server"＞Click me!＜/button＞

　　在分析ASP.NET页面的时候，在System.Web.UI.HtmlControls.HtmlControl类中，样式信息被填充到CssStyleCollection类型的Style属性。这个属性本质上是一个字典，它把控件的样式暴露为每个样式属性键的按字符串索引的值集合。例如，你可以使用下面的代码设置和检索HtmlInputText服务器控件的width样式属性：

＜script language="VB" runat="server" ＞
Sub Page_Load(Sender As Object, E As EventArgs)
MyText.Style("width") = "90px"
Response.Write(MyText.Style("width"))
End Sub
＜/script＞

＜input type="text" id="MyText" runat="server"/＞

　　下面的例子显示了如何编程使用Style集合属性来控制HTML服务器控件的样式：

＜script language="VB" runat="server"＞
Sub Page_Load(Src As Object, E As EventArgs)
Message.InnerHtml &= "＜h5＞Accessing Styles...＜/h5＞"
Message.InnerHtml &= "The color of the span is: " & MySpan.Style("color") & "＜br＞"
Message.InnerHtml &= "The width of the textbox is: " & MyText.Style("width") & "＜p＞"
Message.InnerHtml &= "MySelect's style collection is: ＜br＞＜br＞"
Dim Keys As IEnumerator
Keys = MySelect.Style.Keys.GetEnumerator()
Do While (Keys.MoveNext())
Dim Key As String
Key = CStr(Keys.Current)
Message.InnerHtml &= "＜li＞ "
Message.InnerHtml &= Key & "=" & MySelect.Style(Key) & "＜br＞"
Loop
End Sub

Sub Submit_Click(Src As Object, E As EventArgs)
Message.InnerHtml &= "＜h5＞Modifying Styles...＜/h5＞"
MySpan.Style("color") = ColorSelect.Value
MyText.Style("width") = "600"
Message.InnerHtml &= "The color of the span is: " & MySpan.Style("color") & "＜br＞"
Message.InnerHtml &= "The width of the textbox is: " & MyText.Style("width")
End Sub
＜/script＞

[1] [2] [3] [4] [5] [6] 下一页