Home >Web Front-end >CSS Tutorial >There are two reference methods for CSS external style sheets. What are they?
Method: 1. Reference through "@import" in the style tag, the syntax is "@import url(URL)"; 2. Reference through the link tag, the syntax "4c173f9ae075fbcd9d2871ee987cb8bb".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
CSS External Style Sheet
If the CSS style is placed in a file outside the web page document, it is called an external style sheet. A CSS style sheet document represents a External style sheet.
In fact, the external style sheet is a text file with the extension .css. When you copy the CSS style code into a text file and save it as a .css file, it is an external style sheet.
How to introduce external style sheets:
HTML files refer to style sheets with the extension .css. There are two ways: link type and import type. .
1. Introduction through the @import directive
The @import directive is part of the CSS language. When using it, add this directive to a c9ccee2e6ea535a969eb3f532ad9fe89 tag in HTML;
To associate with an external CSS file, you must use url instead of href, and put the path in parentheses;
<html>
<head>
<style type="text/css">
@import url(css/styles.css);
</style>
<!--此处的type属性是针对HTML4.01的，若在HTML5中则不需要加-->
</head>
<body>
......
</body>
</html[Recommended tutorial: CSS video tutorial 】
2. Introduction through the 2cdf5bf648cf2f33323966d7f58a7f3f tag (the most common method)
<link type="text/css" href="style.css" rel="stylesheet" /> <!--同理，type属性是针对HTML4.01的-->
The difference between the two methods
2cdf5bf648cf2f33323966d7f58a7f3f The tag belongs to the html tag, and @import is a method provided by css. The 2cdf5bf648cf2f33323966d7f58a7f3f tag can not only introduce css, but also do other things, while @import can only introduce css;
The difference in loading order : When a page is browsed, the css introduced by link will be loaded synchronously, while the css referenced by @import will not be loaded until all other elements have been downloaded;
Difference in compatibility: @import is CSS2.1 was only proposed, so it is only supported by IE5 and above. Lower version browsers do not support it. The 2cdf5bf648cf2f33323966d7f58a7f3f tag does not have this problem;
When using javascript to control the DOM to change the style, only The 2cdf5bf648cf2f33323966d7f58a7f3f tag can be used because @import is not controllable by the DOM.
For more programming related knowledge, please visit: Programming Video! !
The above is the detailed content of There are two reference methods for CSS external style sheets. What are they?. For more information, please follow other related articles on the PHP Chinese website!