Asp. NET hands-on Tutorials (5)

Apply styles to HTML server controls

Web is a flexible user interface environment, different sites in the visual and sensory changes in the way. The extensive application of cascading style sheets (CSS) greatly enriches the design of the web. All asp.net HTML server controls and Web server controls have been designed to provide Best-in-class CSS style support. This section discusses how to apply styles to server controls, and demonstrates the finer appearance control that server controls provide in Web Forms.

Apply styles to HTML server controls

The standard HTML tag supports the Css,style property by using the Style property, defined by a series of pairs of attributes/values that appear to be semicolon-separated. For example {font:12pt verdana; font-weight:700;color:orange;}. For more information on IE browser support for CSS properties, refer to the MSDN Web Workshop CSS Attributes Reference page. All asp.net HTML server controls can accept CSS styles like standard HTML flags. The following examples illustrate the application of some styles to different HTML server controls. If you look at the source program returned to the client, you will find that the styles referenced in the control are delivered to the client.

CSS also defines the class attribute and sets CSS styles by including <style>...</style> in the document. The advantage of this property is that it needs to be defined once, and it can be applied to different labels without redefining the style of the label itself. The style of HTML server controls can also be managed in this way. Take a look at the following example:

When the ASP.net page is parsed, the style information is assembled onto the style attribute on the System.Web.UI.HtmlControls.HtmlControl class (type is CssStyleCollection). This property creates a dictionary that populates each style property value of the applied control style with the values in the collection of the string index. For example, you can use the following code to set and retrieve the width style property value of the HtmlInputText server control.

The following are the referenced contents: <script language= "C #" runat= "Server" > void Page_Load (Object sender, EventArgs E) { mytext.style["width" = "90px"; Response.Write (mytext.style["width"]); } </script> <input type= "text" id= "MyText" runat= "Server"/>

The following example shows you how to manipulate the style of HTML server controls using the Style collection properties

Apply styles to Web server controls

Web server controls provide an additional level of support for styles that add several strongly-typed properties to common style settings. Common styles include background color, foreground color, font name and size, width, font aggravation, and so on. These style properties are a subset of the style behavior that can be used in HTML and are expanded directly in the System.Web.UI.WebControls.WebControl base class as a "platform" property. The advantage of using these properties is that they provide compile-time type checking and state completion in development tools, such as vs.net.

The following example shows a calendar control that has several styles applied (as a control and includes a calendar control that does not use a style). Note that when you set a property of a class type, such as font, you need to use the Child Attribute syntax property name-the child attribute name.

Namespace System.Web.UI.WebControls contains a style base class that encapsulates commonly used style attributes (other style classes, such as TableStyle and TableItemStyle, are inherited from this base class).

Many server controls extend this type of property to specify the style of the branch element of the control. For example, calendar controls extend many style properties: DayStyle, WeekendDayStyle, TodayDayStyle, SelectedDayStyle, OtherMonthDayStyle, and NextPrevStyle, among others. You can use the Child attribute syntax property name-the child attribute name to set the branch properties of these styles, as in the following example:

A subtle differential syntax that allows you to declare each style property, nested as a child element in the Web Server Control tab.

The following are the referenced contents: <asp:calendar runat= "Server" > <titlestyle bordercolor= "Darkolivegreen" borderwidth= "3" Backcolor= "Olivedrab" height= "50px"/> </ASP:Calendar>

The following example shows the alternating display syntax, but functionally the same as the previous one.

As with HTML server controls, you can use CSS class definitions to apply styles to Web server controls. The WebControl base class extends a string property named CssClass, which is used to set the style class:

If the property set to the server control does not conform to any of the strongly typed properties of the control, the property and value are placed in the attributes collection of the control. By default, server controls are returned to the requesting browser client without a modified reference to these properties. This means that the properties of styles and classes can be applied directly to server controls without using the strongly typed properties of those controls. Of course, knowing this concept requires understanding the actual reference of the control, and he is also a flexible way of applying the style. This method is especially useful for standard form input controls. Take a look at the following example:

By using the ApplyStyle method of the WebControl base class, the style of the Web server control can also be set with the program, as in the following code:

The following are the referenced contents: <script language= "C #" runat= "Server" > void Page_Load (Object Src, EventArgs E) { Style style = new style (); Style. BorderColor = Color.Black; Style. BorderStyle = borderstyle.dashed; Style. BorderWidth = 1; Mylogin.applystyle (style); Mypassword.applystyle (style); Mysubmit.applystyle (style); } </script> Login: <asp:textbox id= "MyLogin" runat= "Server"/>/<p/> Password: <asp:textbox id= "MyPassword" textmode= "Password" runat= "Server"/> View: <asp:dropdownlist id= "Myselect" runat= "Server" > ... </ASP:DropDownList>

section of this chapter:

1. ASP. NET's HTML server controls and the WEB server control family provide Best-in-class CSS style support.

2. You can apply styles by setting the style or class properties of the control. These settings can be accessed using a program from the attributes collection of controls. For HTML server controls, the branch value of a style property can be obtained from the control's style collection.

3. Most commonly used style settings are already strong-typed properties of the Web server control itself

4. The System.Web.UI.WebControls namespace contains a style base class that encapsulates the commonly used type attributes. Many Web server controls extend this property as a branching reference element.

5. For server controls, the ApplyStyle method using the WebControl base class can use programs to set styles.