How to call external css in html

Calling method: 1. Use the statement ""; 2. Use " @import url (CSS file path address)" statement call.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

There are two ways for html to call external css

• Link style--use the tag

• Import type--Use the @import rule tag

1. Link type

In the

tag in the /head> tag pair to introduce external style sheet files, and use html rules to introduce external css.

Syntax:

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

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

2. Imported

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.

Introduce an independent .css file into the HTML file, use the css @import rule to introduce the external css file, write it in the

Syntax:

<style type="text/css">
@import url(CSS文件路径地址);
</style>

Compare the link method and the import method

The link method (replaced by link below) and the import method (replaced by @import below) both introduce external CSS files method, let’s compare these two methods below.

link belongs to HTML, and external files are introduced through the href attribute in the tag, while @import belongs to CSS, so the import statement should be written in CSS. It should be noted that the import statement should be written in the style at the beginning of the table, otherwise external files cannot be imported correctly;

@import is a concept that only appeared in CSS2.1, so if the browser version is lower, external style files cannot be imported correctly;

When When the HTML file is loaded, the file referenced by link will be loaded at the same time, while the file referenced by @import will wait until the page is completely downloaded before being loaded;

Recommended tutorial: "html video tutorial》

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