Use styles, themes, and skins in ASP. NET 2.0

The theme and skin features of ASP. net2.0 allow you to store style and layout information in a group of independent files, which are called theme ). Next, we can apply this topic to any site to change the appearance and feeling of pages and controls in the site. By changing the content of the topic, you can easily change the style of the site without changing a single page of the site. Topics can also be shared among developers.

ASP. NET contains a large number of features for customizing the appearance and feeling of pages and controls of applications. Controls Support Using Style object models to set format attributes (such as font, border, background and foreground color, width, height, and so on ). You can also use a style sheet (CSS) to set the style of a widget. You can use the control property or CSS to define the style information of the control, or store the definition information in a separate set of files (called themes ), then it is applied to all or part of the page of the program. A separate control style is specified by the skin attribute of the topic.

This article uses a large number of examples to demonstrate how to use styles, themes, and skin features in ASP. NET 2.0.

Apply a style to the control

The Web user interface is very flexible, and the appearance and feeling of different web sites are completely different. Currently, the widely used style sheet (CSS) is mainly responsible for processing the rich design requirements encountered on the web. ASP. net html server controls and web server controls are designed to support CSS style sheets preferentially. This section discusses how to use styles on server controls and demonstrates the subtle control of the appearance and feeling of the web forms they provide.

Apply styles to HTML controls

Standard HTML tags support CSS by using style attributes. You can set them using a semicolon-isolated attribute/value pair (pair. All ASP. net html server controls can accept styles in the form of standard HTML tags. The following example demonstrates a large number of styles applied to HTML server controls. In the source code, you can see that these styles are passed to the browser when the control is displayed.

<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 also defines the class attribute. You can set it to the CSS style definition included in <style>... </style> in the document. The class attribute allows you to define styles at a time and use them on multiple server tags to avoid repeated styles. You can set the style attribute of the HTML Server Control in this way, as shown below:

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

When analyzing the ASP. NET page, in the system. Web. UI. htmlcontrols. htmlcontrol class, the style information is filled with the style attribute of the cssstylecollection type. This attribute is essentially a dictionary that exposes the style of the control to a set of string-indexed values for each style property key. For example, you can use the following code to set and retrieve the width style attribute of the htmlinputtext Server Control:

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

The following example shows how to use the style set attribute to control the style of the HTML Server Control:

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