First, there are several ways for CSS to control page styles;
Second, the priority of these methods on the same page.
Use XHTML + CSS to layout pages. One of the most important features is that the content is separated from the representation. The content refers to the HTML page code, and the representation is the CSS code, if we think of the page as a person wearing clothes, the person is HTML, the content, and the clothes are CSS and the appearance. The problem now is, how can we let CSS control the page? Or, how to make clothes wear on people to reflect the characteristics of their own style; Different CSS can make the pages show different styles for different websites, and different clothes, people will have different occupations after wearing them.
First, how can we allow CSS to control the HTML page effect?
There are four methods: Intra-row mode, embedded mode, link mode, and import mode.
1) In-row Mode
The in-row mode is the most direct and simplest of the four styles, and applies style = "" to HTML tags directly. For example:
<p style="color:#F00; background:#CCC; font-size:12px;"></p>
Although this method is more direct, you need to set style attributes for many labels when creating pages. As a result, the HTML page is not pure enough and the file size is too large, which is not conducive to crawling by search spider, this results in high maintenance costs.
2) embedded Mode
The embedded method is to write the CSS code between Copy content to clipboard
<! 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>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
<Style type = "text/CSS">
<! --
# Div1 {width: 64px; Height: 64px; float: Left ;}
# Div1 IMG {width: 64px; Height: 64px ;}
-->
</Style>
</Head>
<Body>
<Div id = "div1"> </div>
CSS fans all over the country gather here. If you don't come, you will be out ~ Our slogan is:
"Share your joy and pain, share your experiences and experiences, and share your own materials and resources"
If you want to, join us ~
</Body>
</Html>
Code embedding means that everyone should be aware that even if there is public CSS Code, every page should be defined. If a website has many pages, each file will become larger and the maintenance will be large in the future, if there are few files and few CSS code, this method is quite good.
3) Connection Method
The connection method is the most frequently used and most practical. You only need to add
<link href="style.css" type="text/css" rel="stylesheet" />
In this way, the HTML and CSS files are completely divided into two or more files, achieving the complete separation of the HTML code of the page framework from the CSS code of the artist, this makes it very convenient for both pre-production and post-maintenance. To maintain a uniform page style, you only need to save these public CSS files as one file separately, other pages can call their own CSS files. If you need to change the website style, you only need to modify the public CSS file and it is quite convenient, this is the method we advocate for making pages with XHTML + CSS.
HTML code
<! 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>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
<Link href = "style.css" type = "text/CSS" rel = "stylesheet"/>
</Head>
<Body>
<Div id = "div1"> </div>
CSS fans all over the country gather here. If you don't come, you will be out ~ Our slogan is:
"Share your joy and pain, share your experiences and experiences, and share your own materials and resources"
If you want to, join us ~
</Body>
</Html>
CSS code
Copy content to clipboard Code:#div1{width:64px; height:64px; float:left;}
#div1 img{width:64px; height:64px;}
4) import Method
The imported style is similar to the link style. When you import a CSS style sheet, it is imported to an HTML file during HTML initialization to become part of the file, similar to the second embedded method.
For details about the differences between the imported style and the link style, see CSS: @ import and link in this article. However, we recommend that you use the link method!
Second: Priority of the four styles
If two of the above four methods are used for the same page, there will be a priority problem. Here I will not give an example to illustrate it. You can prove the following conclusions by yourself:
The priority of the four styles is (from high to low): Intra-row styles, embedded styles, link styles, and import styles.
From: CSS Learning Forum
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
