4 Ways and priority issues for CSS to control page styles

Last Update:2017-09-14 Source: Internet

Author: User

Keywords Web page production CSS Tutorials

Tags code content control different example file files how to

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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:

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:

<! 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=" HTML; charset=gb2312 "/>

<title> Untitled Document </title>

<style type= "Text/css" >



</style>

</head>

<body>

<div id= "Div1" ><img src= "Http://www.cssxuexi.cn/index/images/ico/2days.gif"/></div>

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 ~

</body>

</html>

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>

, 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

<! 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=" HTML; charset=gb2312 "/>

<title> Untitled Document </title>

<link href= "style.css" type= "Text/css" rel= "stylesheet"/>

</head>

<body>

<div id= "Div1" ><img src= "Http://www.cssxuexi.cn/index/images/ico/2days.gif"/></div>

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 ~

</body>

</html>

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.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More