There are two forms of css external links: 1. Link the css external style to the HTML page through the link tag. The link tag needs to be placed in the head tag area, and the syntax is " "; 2. Link through the "@import" rule in the style tag, with the syntax "@import url("css file path");".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
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 an 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.
As shown below, it is an external style sheet:
So how to link the css external style sheet to the HTML document?There are two ways to use external style sheets:
1), using link
The link style refers to defining the CSS style sheet externally and forming it as .CSS file extension, and then link to the page through thelink tag in the page, and the link statement must be placed in the
Syntax:
2), use @import
Import is through@importin
Simple example:
css external style sheet style.css
h1{
color:red;
}
p{
font-size:14px;
color:green;
}HTML Document
link标签或@import的应用
外部定义CSS样式表以.CSS为扩展名文件，然后在页面中通过link标签或@import链接到页面中。
Implementation effect:
##The difference between link and @import:
1. Difference in affiliation @import is the syntax rule provided by CSS, which only has the function of importing style sheets; link is the tag provided by HTML, which can not only load CSS files, but also define RSS, rel connection attributes, etc. . 2. Difference in loading orderWhen the page is loaded, the CSS introduced by the link tag is loaded at the same time; the CSS introduced by @import will be loaded after the page is loaded. 3. Compatibility difference@import is a syntax only available in CSS2.1, so it can only be recognized in IE5; the link tag is an HTML element and has no compatibility issues. 4. The difference in DOM controllabilityYou can operate DOM through JS and insert link tags to change the style; because the DOM method is based on documents, you cannot use @import to insert styles. (Learning video sharing:Getting started with web front-end)
The above is the detailed content of What are the forms of css external links?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
