4 Ways and priority issues for CSS to control page styles

Source: Internet
Author: User
Keywords Web page production CSS Tutorials
Tags code content control different example file files how to
This section mainly explains, two content,


First: CSS How to control the page style, there are several ways;


Second: The precedence of these methods when they appear on the same page.


The use of XHTML+CSS layout page, which has a very important feature is the content and appearance of the separation, content refers to HTML page code, image is CSS code, if the page as if the person wearing clothes, people is HTML, is content, and clothes is the CSS, is the table
Like, now the problem is, how to let CSS to control the page? Or, how to let clothes wear on people, a good embodiment of the style characteristics of people; different CSS can make the page appear different styles apply to different sites, and different clothes, people put on after will reflect
Different occupations.

First: How to let CSS to control the effect of HTML pages?
There are 4 kinds of ways, inline mode, embedded mode, link way, import way

1) in-line mode
Inline mode is the most direct and simplest of the 4 styles, and directly applies style= "" to HTML tags, for example:

<p style= "color: #F00; Background: #CCC; font-size:12px; " ></p>

Although this method is more direct, in the production of the page when the need for a lot of tags set style property, so will cause HTML page is not pure, file volume is too large, not conducive to search spiders crawling, resulting in high maintenance costs later.

2 inline mode
The inline approach is to write CSS code between <head></head> and declare it in <style></style>, for example:

&lt;! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "&gt;


&lt;html xmlns= "http://www.w3.org/1999/xhtml" &gt;


&lt;head&gt;


&lt;meta http-equiv= "Content-type content=" HTML; charset=gb2312 "/&gt;


&lt;title&gt; Untitled Document &lt;/title&gt;


&lt;style type= "Text/css" &gt;


&lt;!--


#div1 {width:64px; height:64px; float:left;}


#div1 img{width:64px height:64px;


--&gt;


&lt;/style&gt;


&lt;/head&gt;


&lt;body&gt;


&lt;div id= "Div1" &gt;&lt;img src= "Http://www.cssxuexi.cn/index/images/ico/2days.gif"/&gt;&lt;/div&gt;


National CSS enthusiasts converge on this, if not, you will out ~ our slogan is:


"Share your own joys and pains, share your own experiences and insights, share your own information and resources"


If you would like to, join us ~


&lt;/body&gt;


&lt;/html&gt;

Embedded way, we should also be aware that even if there is a common CSS code, but also every page to define, if a site has a lot of pages, each file will become larger, later maintenance is also large, if the file is very small, CSS code is not much, this way is very good
Of。

3) Link Way
Link is the most frequently used, most practical way, only need to add between <head></head>

&lt;link href= "style.css" type= "Text/css" rel= "stylesheet"/&gt;

, you can do this by dividing HTML files and CSS files into two completely
or more than one file, to achieve the page framework HTML code and art CSS complete separation of the code, making pre-production and later maintenance is very convenient, and if you want to maintain the unity of the page style, just want to keep these common CSS files in a separate file, other pages
Face can be called their own CSS file, if you need to change the style of the site, only need to modify the public CSS file on the OK, quite convenient, this is our XHTML+CSS production page to promote the way.
HTML code

&lt;! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "&gt;


&lt;html xmlns= "http://www.w3.org/1999/xhtml" &gt;


&lt;head&gt;


&lt;meta http-equiv= "Content-type content=" HTML; charset=gb2312 "/&gt;


&lt;title&gt; Untitled Document &lt;/title&gt;


&lt;link href= "style.css" type= "Text/css" rel= "stylesheet"/&gt;


&lt;/head&gt;


&lt;body&gt;


&lt;div id= "Div1" &gt;&lt;img src= "Http://www.cssxuexi.cn/index/images/ico/2days.gif"/&gt;&lt;/div&gt;


National CSS enthusiasts converge on this, if not, you will out ~ our slogan is:


"Share your own joys and pains, share your own experiences and insights, share your own information and resources"


If you would like to, join us ~


&lt;/body&gt;


&lt;/html&gt;

CSS Code

#div1 {width:64px; height:64px; float:left;}


#div1 img{width:64px height:64px;

4 Import method
Import styles and link styles are similar and import CSS style sheets, which are imported into the HTML file as part of the file, similar to the second inline method, when HTML is initialized.
What is the difference between the specific import style and link style, you can see this article "CSS: @import and link specific differences," but I suggest you use the link way!

Number two: priority of four styles
If two of the above four methods are used for the same page, there will be a priority problem, and I will not give an example to illustrate the following conclusions

The four styles have priority levels (from high to low): inline, inline, link, and import styles.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.