"; 2. Introduction through the link tag, the syntax ""."/> "; 2. Introduction through the link tag, the syntax "".">

Home  >  Article  >  Web Front-end  >  There are several ways to introduce external css

There are several ways to introduce external css

青灯夜游
青灯夜游Original
2021-10-12 16:51:089543browse

There are two ways to introduce external css, namely: 1. Introduction through the "@import" instruction, the syntax "@import url (css file path);>"; 2. Introduction through the link tag, Syntax "dad787fd9a4de016ac75acf980452869".

There are several ways to introduce external css

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

Two ways to introduce CSS

1. Import through the @import directive

@import directive is part of the CSS language. When using it, add this directive to a c9ccee2e6ea535a969eb3f532ad9fe89 tag in HTML;

<style type="text/css">    
    @import url(css/styles.css);
</style>

2. Introduction through tags (the most common way)

<link type="text/css" href="style.css" rel="stylesheet" />

The difference between the two methods

  • tag belongs to the html tag, and @import is a tag provided by css In this way, tags 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, and the css referenced by @import will not be loaded until all other elements have been downloaded;

  • Difference in compatibility: @import was only proposed in CSS2.1 , so it is only supported in IE5 and above, and lower version browsers do not support it, but tags do not have this problem;

  • When using javascript to control the DOM to change the style, only tags can be used. Because @import is not controllable by DOM.

(Learning video sharing: css video tutorial)

The above is the detailed content of There are several ways to introduce external css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:What is a css file?Next article:What is a css file?