Asp2.0 theme and CSS (collect)

I. Differences between themes and styles:

1. A topic can define many attributes of a control or page, not just style attributes. For example, you can use a topic to specify the layout of the Treeview control and the template layout of the gridview control.
2. The topic can contain graphs.
3. The theme cascade method is different from that of the style sheet. For example, unless you explicitly apply a topic as a style sheet topic, the local attribute value is overwritten by default.
4. Only one topic can be applied to each page. You cannot apply multiple themes to one page. Different from a style sheet, you can apply multiple style sheets to one page.

The following describes theme and skin in msdn:

A topic is a set of property settings. These settings can be used to define the appearance of pages and controls, the appearance is then applied to all pages in a web application, the entire web application, or all web applications on the server.

Theme and Widget appearance

A topic consists of a group of elements: appearance, Cascading Style Sheets (CSS), images, and other resources. The topic will contain at least the appearance. The topic is defined in a special directory on a website or web server.

Appearance

The appearance file has the file extension. Skin, which contains various controls (for example, , , Or Control. The control appearance settings are similar to the control markup, but only include the attributes you want to set as part of the topic. For exampleButtonWidget appearance:

<asp:button runat="server" BackColor="lightblue" ForeColor="black" />

Create a. Skin file in the theme folder. A. Skin file can contain the appearance of one or more controls of one or more control types. You can define the appearance of each control in a separate file, or you can define the appearance of all themes in a file.

There are two types of controls-"Default appearance" and "named appearance ":

• When a topic is applied to a page, the default appearance is automatically applied to all controls of the same type. If the widget does not appearSkinidAttribute, which is the default appearance. For exampleCalendarControl to create a default appearance, the appearance of the control applies to allCalendarControl. (The default appearance is strictly matched by the control type, soButtonWidget exterior applies to allButtonControl, but not applicable Controls orButtonControls derived from objects .)

• The named appearance is set Properties. Named appearances are not automatically applied to controls by type. Instead, you should setSkinidProperty explicitly applies the named appearance to the control. By creating a named appearance, you can set different appearances for different instances of the same control in the application.

Cascading Style Sheets

The topic can also include a cascading table (.css file ). When you place the. CSS file in the topic directory, the style sheet is automatically applied as a part of the topic. Use the file extension. CSS to define a style sheet in the theme folder.

Theme graphics and other resources

A topic can also contain graphics and other resources, such as script files or sound files. For example, a part of a page topic may include Controls. You can include a chart in the topic that represents the expanded button and the collapsed button.

Generally, the resource files of a topic and the appearance files of the topic are located in the same folder, but they can also be located elsewhere in the Web application, for example, in a subdirectory of the topic directory. To reference resource files in a sub-folder of the topic directory, use Path displayed in the control's appearance:

<asp:Image runat="server" ImageUrl="ThemeSubfolder/filename.ext" />

You can also store resource files outside the topic directory. If you use the chunking character (~) Syntax to reference the resource file, the Web application will automatically find the corresponding image. For example, if you place the topic resources in a subdirectory of the application, you can use the format ~ The path of/subfolder/filename. Ext references these resource files, as shown in the following code example.

<asp:Image runat="server" ImageUrl="~/AppSubfolder/filename.ext" />

Topic Application Scope

You can define the topic of a single web application or global topics for all applications on the Web server. After defining a topic, you can use CommandThemeOrStylesheetthemeProperty to place the topic on a single page, or you can set The element applies to all pages in the application. If you have defined The topic is applied to all pages in the Web application on the server.

Page topic

A page topic is a theme folder that contains the control appearance, style sheets, graphic files, and other resources. This folder is created as a subfolders of the/app_themes folder on the website. Each topic is a different sub-folder in the/app_themes folder. The following code example demonstrates a typical page topic, which defines twoBlueThemeAndPinkTheme.

MyWebSiteApp_ThemesBlueThemeControls.skinBlueTheme.cssPinkThemeControls.skinPinkTheme.css

Global topic

Global themes are themes that can be applied to all websites on the server. When you maintain multiple websites on the same server, you can use the overall appearance of the global theme definition domain.

Global themes are similar to page themes because they all include attribute settings, style sheet settings, and graphics. However, the global theme is stored in the global folder named/themes on the Web server. Global themes can be referenced for any website on the server and any page on any website. Set topic priority

You can specify the priority of the topic setting relative to the local control by specifying the topic application mode.

If the page The control settings on the topic and page are merged to form the final settings of the control. If control settings are defined in both the control and the topic, the control settings in the topic override any page settings on the control. Even if the controls on the page already have their own property settings, this policy can make the theme have a consistent appearance on different pages. For example, it allows you to apply a topic to a page created in an earlier version of ASP. NET.

You can also set This attribute applies a topic to a style sheet. In this case, the settings on the local page take precedence over those defined in the topic (if both locations define the settings ). This is the model used by Cascading Style Sheets. If you want to be able to set the attributes of each control on the page and still apply themes to the overall appearance, you can apply themes as style sheet themes.

Attributes that can be defined by topic

Generally, you can use a topic to define attributes related to the appearance or static content of a page or control. Only those Attribute is setTrueProperty in the control class ).

The topic value is not accepted for properties that explicitly specify the control behavior rather than the specified appearance. For example, the topic cannot be used to setButtonControl Attribute. Similarly, topic cannot be set. Control Attribute or Attribute

 

ASP. NET provides a way to unify the interface style, that is, the skin theme.

Ii. CSS and themes

1. Overview
But the interface looks ugly. You can set the presentation attributes of each control to make the interface look better. However, this is too troublesome.
2. Add a topic
In Solution Explorer, right-click the site and select "add ASP. NET Folder/topic" to create a skin topic named "default.

We can see that two levels of directory "app_themes/Default" are automatically created on the website ". Multiple topics can be created in a project, but they must all be placed in the app_themes directory. The created default is a topic. The topic contains one skin file and multiple CSS files to set the interface style.

Right-click "default", select "Add new project", select "appearance file", and click "add" to create a skin file skinfile. Skin Under the default topic.

If you select "style sheet" when adding a new item, you can add a CSS file. We recommend two CSS files: gridstyle.css and stylesheet.css. The former is used to set the style of the gridview, and the latter is used to set the style of other controls.

Style Sheets are rich in content. You can learn from relevant materials. Here we just use a simple example to describe its usage.

2.1 stylesheet.css File
You can set multiple style units in a style sheet. Each unit has a name called a class name. In the file, type the following code.

Body

{

Font-size: 12px;

Margin: 0px;

Cursor: default;

Font-family: tahoma, verdana;

Background-color: # f2f2f2;

}

. Commontext

{

Font-size: 12px;

}

. Msgtext

{

Font-size: 12px;

Color: red;

}

. Prompttext

{

Font-size: 16px;

Color: #1275d2;

}

. Btnstyle

{

Font-size: 12px;

Text-Decoration: none;

Background-color: # ffffff;

Border-style: Groove

}

The body style is mainly used to set page information. We set the font size to 12px (font-size: 12px), font-family, and background color (backgroud-color: # f2f2f2) and other attributes.

For text, we have set three styles: commontext only sets the size of the text, msgtext is set to the red font, and prompttext is the blue 16px font. As for how programs distinguish them, we can see from skinfile. Skin.

Btnstyle is the button style.

2.2 skinfile. Skin File
First, there are three styles in the text in the CSS file. How can we differentiate them in skin? The answer is skinid, as shown in the following code:

<Asp: Label runat = "server" cssclass = "commontext"> </ASP: Label>

<Asp: Label runat = "server" cssclass = "msgtext" skinid = "msgtext"> </ASP: Label>

<Asp: Label runat = "server" cssclass = "prompttext" skinid = "prompttext"> </ASP: Label>

We have set three label styles. We can see that these three styles are separated by the cssclass attribute. The value in the quotation marks is the style class name in the CSS file. Two labels have the skinid attribute, while the other one is not set. If no skinid is set, the default style is used. If skinid is set, it is used only when the skinid of the control is specified and its name is the same. As for their usage, we will introduce them later.

Next, enter the following code in the skin file to create the dropdownlist, textbox skin style, and two button styles respectively. The difference between the two buttons is that no skinid has a fixed width of 65px and no skinid has a fixed width.

<Asp: dropdownlist runat = "server" cssclass = "commontext"> </ASP: dropdownlist>

<Asp: textbox runat = "server" cssclass = "commontext"> </ASP: textbox>

<Asp: button runat = "server" cssclass = "btnstyle" width = "65px"/>

<Asp: button runat = "server" cssclass = "btnstyle" skinid = "nowidthbtn"/>

3. Skin usage
3.1 Use themes on a single page
(1) Open the default. aspx file to enter the design mode.

(2) select Document in the top list box of the property.

(3) locate the theme attribute and click the arrow in the list box next to it. The newly added topic "default" is displayed and selected.

(4) When you run the program, you will see that the style without the skinid attribute is used throughout the page.

(5) select any label and find the skinid attribute, Which is empty. Click the list box arrow next to it and you will find two options: select one of the two topics of the label specified in the skin file, run and check the effect.

Through the above experiment, we can see that if the control does not specify the skinid, the skin file will be used for those styles without the skinid attribute; if it is specified, the style of skinid in the skin file with the same name is used.

3.2 use themes throughout the website
The topic usage method is described above. However, if you set a topic on an interface, it may be a bit difficult. Can you use the same topic on the entire website without setting it on every page.

Delete the theme attribute of the default. aspx file, open web. config, and find <system. Web>. Follow the following label and enter:

<Pages theme = "default"/>

Then run the code and find that the running effect is the same as that just now.

This statement uses the same topic default for all webpages. As mentioned above, we can create multiple themes on the website. How can we use other themes? If you have configured the default topic for Web. config, use this default topic on the page unless the theme attribute is set on the page to specify other topics.

4. Topics about the gridview
Select the gridview in the page and check the style group in its attributes. You will see many styles that need to be set.

Like the gridview control, it can set headerstyle, rowstyle of the display item, and alternatingrowstyle, which is used for even rows, the rowstyle is used for odd rows.

Then we need to set these styles.

4.1 gridstyle.css
This file sets several styles, some of which are used repeatedly in the skin file:

. Griditem

{

Font-size: 12;

Background-color: # d6ebff;

Text-align: left;

}

. Gridedit

{

Font-size: 12;

Background-color: # d6ebff;

Text-align: left;

}

. Gridheader

{

Font-size: 12;

Background-color: #00afe8;

Text-align: left;

}

. Gridalter

{

Font-size: 12;

Background-color: # d6dbef;

Text-align: left;

}

4.2 skinfile. Skin File
Add the following code to the topic file:

<Asp: gridview runat = "server" autogeneratecolumns = "false">

<Rowstyle cssclass = "griditem"/>

<Editrowstyle cssclass = "gridedit"/>

<Selectedrowstyle cssclass = "gridheader"/>

<Pagerstyle cssclass = "griditem"/>

<Headerstyle cssclass = "gridheader"/>

<Alternatingrowstyle cssclass = "gridalter"/>

</ASP: gridview>

We can see that the display item style rowstyle and pagination page pagerstyle use the same style griditem. The same style gridheader is used for the header and the selected item. Of course, you can also set different styles for them. I set them to the same to demonstrate that they can also be used in this way.

Run the program again to view the effect.

5. Simple theme setting method
In fact, you don't have to use CSS files for theme settings. You only need a skin file. The specific method is to first set the font, color, and other properties of the control from the web page to achieve the desired effect, enter the source mode, and copy the code of this control directly to the skin file, delete the property id = "XX" and try it.

Since this method is so simple, why should we use CSS? This is because the style in skin can only be applied to server-side controls, that is, those controls whose runat = "server. For HTML controls, the skin file does not work, and CSS is required. CSS is made separately, and you do not need to write it again when applying it to HTML controls.