ASP. compared with static websites, the dynamic website created by NET adds content dynamically generated by code running on the server based on the static website, the code running on the server includes the background code in the code page and controls on the front-end page.
Static webpage styles are also suitable for static content of dynamic webpages.
I. Style
1. Intra-row styles (inside HTML elements, styles can be directly defined using styles)
[Html]
<Head runat = "server">
<Title> ASP. NET style </title>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<P style = "background-color: # FF0000"> ASP. NET style </p>
</Div>
</Form>
</Body>
<Head runat = "server">
<Title> ASP. NET style </title>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<P style = "background-color: # FF0000"> ASP. NET style </p>
</Div>
</Form>
</Body>
2. Internal style (use the style label to define the style in the <Head id = "Head1" runat = "server">
<Title> ASP. NET style </title>
<Style type = "text/css">
P
{
Background-color: # FF7F00;
}
</Style>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<P style = "background-color: # FF0000"> ASP. NET style </p>
</Div>
</Form>
</Body>
<Head id = "Head1" runat = "server">
<Title> ASP. NET style </title>
<Style type = "text/css">
P
{
Background-color: # FF7F00;
}
</Style>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<P style = "background-color: # FF0000"> ASP. NET style </p>
</Div>
</Form>
</Body>
3. External styles (define styles in another style sheet file)
(1) external style table file:
(2) Introduce a style sheet through link labels
[Html]
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head id = "Head1" runat = "server">
<Title> ASP. NET style </title>
<Link href = "App_Themes/MyTheme/StyleSheet.css" rel = "stylesheet" type = "text/css"/>
<Style type = "text/css">
P
{
Background-color: # FF7F00;
}
</Style>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<P style = "background-color: # FF0000"> ASP. NET style </p>
</Div>
</Form>
</Body>
</Html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head id = "Head1" runat = "server">
<Title> ASP. NET style </title>
<Link href = "App_Themes/MyTheme/StyleSheet.css" rel = "stylesheet" type = "text/css"/>
<Style type = "text/css">
P
{
Background-color: # FF7F00;
}
</Style>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<P style = "background-color: # FF0000"> ASP. NET style </p>
</Div>
</Form>
</Body>
</Html>
Obviously, the priority of these three styles is: Intra-row styles> internal styles> external styles.
Because ASP. NET is compiled and run on multiple servers than static Web pages, style sheets often fail to control the style of controls.
Ii. Appearance
You can set the appearance of a widget directly or in an external appearance file.
The appearance file is usually stored in the topic folder together with the style and appearance file, which is called the ASP. NET topic together with the image that sets the style and appearance. That is to say, ASP. NET themes mainly include style sheets, appearance files, and images.
The Theme or StylesheetTheme attribute of the Page is used instead of the link label.
Note that the label head must have the runat = "server attribute. Otherwise, an error occurs:
1. Create an appearance File
2. Use Theme to set a topic
[Html]
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Default4.aspx. cs" Inherits = "Default4" Theme = "MyTheme" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> No title page </title>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Asp: Label ID = "lblMessage" runat = "server" Text = "ASP. NET skin" BackColor = "#00FF00"> </asp: Label>
</Div>
</Form>
</Body>
</Html>
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Default4.aspx. cs" Inherits = "Default4" Theme = "MyTheme" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> No title page </title>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Asp: Label ID = "lblMessage" runat = "server" Text = "ASP. NET skin" BackColor = "#00FF00"> </asp: Label>
</Div>
</Form>
</Body>
</Html>
3. Use StylesheetTheme to set a topic
[Html]
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Default4.aspx. cs" Inherits = "Default4" StylesheetTheme = "MyTheme" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> No title page </title>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Asp: Label ID = "lblMessage" runat = "server" Text = "ASP. NET skin" BackColor = "#00FF00"> </asp: Label>
</Div>
</Form>
</Body>
</Html>
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Default4.aspx. cs" Inherits = "Default4" StylesheetTheme = "MyTheme" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> No title page </title>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Asp: Label ID = "lblMessage" runat = "server" Text = "ASP. NET skin" BackColor = "#00FF00"> </asp: Label>
</Div>
</Form>
</Body>
</Html>
It is not hard to see that the main difference between Theme and StylesheetTheme is the priority. Compared with the appearance attribute in the row, the priority of the three is: Theme> In-row appearance> StylesheetTheme. That is to say, you can use StylesheetTheme, the displayed appearance is green in the line, while Theme is used to display the blue in the appearance file.
For static webpage content, the priority of Them and StylesheetTheme settings is:
Internal style> external style set by Theme> internal style> external style set by StylesheetTheme
4. Set the topic in the Web. config file
You can set the subject of the entire website in the System. web section of the Web. config file in the following format:
<Pages theme = "MyTheme"/>
Or
<Pages styleSheetTheme = "MyTheme"/>
5. A webpage does not use a topic.
If a webpage uses a separate topic, you can set the Theme attribute separately on the webpage. If a webpage does not use a topic, you can use either of the following methods:
Theme = "" Or StylesheetTheme = "" (Note that there cannot be spaces in the quotation marks );
EnableTheming = "false"
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
