This section mainly explains, two content,
First: CSS How to control the page style, there are several ways;
Second: These methods appear in the same page at the priority level.
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:
<! 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 ">
<!--
#div1 {width:64px; height:64px; Float:left}
#div1 img{width:64px; height:64px;}
</style>
</head>
<body>
<div id= "Div1" ><img src= "Http://www.cssxuexi.cn/index/images/ico/2days.gif"/></div>
CSS enthusiasts around the country come together and if you don't, you're out. Our slogan is:
"Share your own joys and pains, share your experiences, share your own information and resources"
If you like, join us.
</body>
</html>
Inline, you should also be aware that even if there is a publicCSS 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
.
3) Link Way
Link is the most frequently used, most practical way, only need to add between <head></head>
<link href= "Style.css" type= "Text/css" rel= "stylesheet"/>
, 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>
The national CSS enthusiasts converge on this, if not, you are out ~ Our slogan is:
"Share your own joys and pains, share your experiences and experience, share your own information and resources"
If you like, 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.
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
