How to import css externally

Methods for externally introducing css: 1. Use link to call external css files, and the tag defines the relationship between the document and external resources; 2. Use @import to reference external CSS files.

The operating environment of this article: Windows7 system, css3 version, Dell G3 computer

How to introduce external css?

Method 1: Use link to call external css file

Use< in the tag pair of the web page link> tag to introduce external style sheet files, and use html rules to introduce external css.

The tag defines the relationship between the document and external resources. The most common use of the tag is to link style sheets.

Grammar:

<link rel="stylesheet" href="css文件路径" type="text/css" />

Explanation of the content structure of the link tag when linking to external css styles:

href: is the external resource address, here is the address of css

rel: Defines the relationship between the current document and the linked document, here is the external css style sheet, that is, stylesheet

type: Specifies the MIME class of the linked document, here the value is text/css

Note:

This method will load the CSS file before loading the main body of the web page file. Therefore, the displayed web page will have a style effect from the beginning. It will not be displayed without style first like the imported method. web page, and then display the styled web page.

Method 2: Use @import to reference external CSS files

CSS @import rules are used to import style rules from other style sheets. These rules must precede all other types of rules, and @import cannot be used in rules of a conditional group.

@import rule syntax

@import url("文件路径");

Explanation:

This method will load the CSS file after the entire web page is loaded, so this leads to a problem. If the web page If it is relatively large, the page without style will appear for a while. After a flash, the style of the web page will appear. This is an inherent flaw of imports.

The difference between the two methods of calling external css styles:

@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 , you can also define RSS, rel connection attributes, etc.

When 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.

@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.

You can operate DOM through JS and insert link tags to change the style; since the DOM method is based on documents, you cannot use @import to insert styles. The weight of styles introduced by

link is greater than the styles introduced by @import.

Recommended learning: "css video tutorial"

The above is the detailed content of How to import css externally. For more information, please follow other related articles on the PHP Chinese website!