CSS in conjunction with HTML documents in the 4 method:
1 using <link> elements to link to external style files
2 Use the "style" element in the 3 Importing a style sheet using the CSS @import tag
4 Define a style using the "style" attribute in elements inside <body>
An example:
<title>css demo</title>
<link rel=stylesheet type= "text/css" href= "http://www.php1.cn/" > <style>
@import URL (css/name2.css);
H1 {color:red}
<style>
<body>
<H1>CSS Demo by jet<p style= "Color:blue" >good luck.
</body>
1 using link for reference
<link rel= "stylesheet" type= "Text/css" href= "http://www.php1.cn/" >
2 referencing with Import
<style type= "Text/css" >
@import URL (my.css);
</style>
The first is to write the CSS directly on the HTML page, while the second and third is to extract the files separately using the external reference style.
Question 1: What is the difference between link and @import?
Let's take a look at their definition first.
LINK element
Both HTML and XHTML have a structure that allows Web page authors to add additional information related to HTML documents. These additional resources can be style information (CSS), navigation assistants, other forms of information (RSS), contact information, and so on.
@import
Specifies the imported external style sheet and target device type.
In fact, the most fundamental difference between link and @import is that link is a tag of HTML, and @import is a tag of CSS,
Besides calling CSS, link can have other functions such as declaring page link properties, declaring directories, RSS, and so on, while @import can only
Call CSS. If you refer to CSS separately from outside, their role is basically the same, but the top of the boss is not the same. ：）
Question 2.link What's better about that?
It said that because the top of the boss is not the same, so in the use of there will be some details of the difference, can not say overall who good who bad,
Can only say the specific situation specific analysis.
1) I want to use JavaScript for style selection;
This is the time to use link, because link is an HTML element that can be used to control DOM elements in the end to change the style of the effect.
Look at the following code
<link rel= "stylesheet" href= "http://www.php1.cn/" > <link rel= "stylesheet" href= "http://www.php1.cn/" > <link rel= "Alternate stylesheet" href= "http://www.php1.cn/" > <link rel= "Alternate stylesheet" href= "/http www.php1.cn/"> <link rel=" Alternate stylesheet "href=" http://www.php1.cn/"> This is a very classic code to change the style of the page, Because we're mainly talking about link and import today, I'm just going to list the reference CSS section here.
Let's take a look at the link inside all the attributes are expressed what meaning:
[1]rel: Used to declare the role or type of a linked object.
For example, the above code: "stylesheet" means to link a default CSS, while "alternate stylesheet" means alternative CSS
[2]href: This does not need me to say, referring to the CSS file path.
[3]tyle: File type
[4]media: Applied Device, "screen" is a description applied on the screens.
[5]title: Is the name of the CSS.
There are 5 CSS in this code, the first one is the basic style, while the other four are style styles, and using JavaScript to control the default display of the style title is OK.
2) I want to apply the print style;
The print style is as its name implies when printing a page.
This style is not effective under normal browsing and only works when printed.
Link and @import are all available if you want to reference the print style individually for the page.
Link Code
<link rel= "stylesheet" href= "http://www.php1.cn/" >
@import code
<style type= "Text/css" >
@import URL (foo.css) print;
</style>
There is another way for CSS to @media:
@media Print {
@import "Print.css"
}
Use @media to first make the device print, then use the @impor link
3) I want to cite multiple styles;
If you want to refer to multiple style combinations on a single page, both link and @import are also available.
Link Code
<link rel= "stylesheet" href= "http://www.php1.cn/" > <link rel= "stylesheet" href= "http://www.php1.cn/" >
@import code
<style type= "Text/css" >
@import URL (.. /CSS/BASE/MY.LAYOUT.CSS);
@import URL (.. /CSS/BASE/MY.TYPO.CSS);
</style>
But personally, it's more clear when you use @import to quote multiple files.
There is also a combination of link to @import for multiple styles.
Use link to refer to a CSS file first
<link rel= "stylesheet" href= "http://www.php1.cn/" > then reference it in this CSS file.
<style type= "Text/css" >
@import URL (.. /CSS/BASE/MY.LAYOUT.CSS);
@import URL (.. /CSS/BASE/MY.TYPO.CSS);
</style>
The advantage of this is that if you have a site all the page references are the same style,
And there are multiple CSS, if you add 4 per page, 5 of the same CSS style, but it is a waste of code and energy,
So as to do so, all a page refers to a CSS, and then a CSS in the reference to multiple CSS, convenient
Management and maintenance.
Loading CSS link and @import difference: In fact, Link and @import in the display effect is still very different, basically see the link will be added in the page before the full, and @import will be read after the file is added, Therefore, if the network speed is very good or very fast, there will be a first no CSS definition, and then load the CSS definition. @import the moment the page is loaded, it will blink (a page without a style sheet) before it returns to normal (the page after the style is loaded), and link does not have this problem.
They are the same way, just a bit of a gap in the browser recognition, link in support of CSS browser support and @import only in 5.0 line version valid, but also can be used for browser filtering is the use of hack, compatible with some of the old version of the browser. So it's better to use link general-purpose, but it's the same for a high-level browser, which is now a browser, which is a less significant distinction.
@import best-written: The @import is generally written in the following ways:
@import ' style.css '//windows ie4/ns4, Mac OS X IE5, Macintosh IE4/IE5/NS4 not recognized
@import "Style.css"//windows ie4/ns4, Macintosh IE4/NS4 does not recognize
@import URL (style.css)//windows NS4, Macintosh NS4 does not recognize
@import url (' style.css ')//windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 not recognized
@import url ("style.css")//windows NS4, Macintosh NS4 does not recognize
From the above analysis, @import URLs (style.css) and @import URLs ("Style.css") are the best choice, compatible browsers are also the most. From a byte-optimized point of view, the @import URL (style.css) deserves the most recommended notation.
CSS code format can reduce the size of the style sheet file
When writing a CSS stylesheet, we write each piece of code on one line to make it easier to read the style definition code later. But I found that this does not seem good, because the CSS code is not like the program code has a strong logic, it is mainly in the name and value of the corresponding way to write. So writing on the same line does not particularly affect reading. Instead, it reduces the size of the stylesheet file because it reduces the number of newline and spacer characters. I tested it. The size of the found file can be reduced by about 12%. If the style sheet file is larger or more files, it will significantly reduce the number of client downloads, improve the speed of web pages.
Note Do not write spaces between the colon of the style name and the value that follows, except that the two styles are separated by a space.
The specific format is as follows:
Program code:
div {margin:20px; padding:10px; Background-color: #F00;}
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
