What is the difference between link and @import when introducing CSS files into html?-CSS Tutorial-php.cn

What is the difference between link and @import when introducing CSS files into html?

yulia

Release： 2018-09-17 14:02:17

Original

3469 people have browsed it

Previously introduced How to introduce CSS files into HTML. There are four ways to import CSS into HTML, namely inline, embedded, and external styles. External styles are divided into import style and link style. It is also an external style, so what is the difference between link and @import? Those who want to know, please continue reading below.

1. Differences in import methods

link link type:

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

Copy after login

import import type:

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

Copy after login

II , Differences in browsers

link will not cause compatibility issues, while @import needs to be implemented in IE5 or above.
During the page loading process, if it is a CSS style file imported by link, the CSS style will be loaded at the same time as the content. If it is a CSS file introduced by @import, the style will be loaded after the page is loaded.

3. Differences in dependency relationships

@import is a syntax rule provided by CSS and only has the function of importing style sheets. Link is a tag provided by HTML. It can not only load CSS files, but also define RSS, rel connection attributes, etc.

4. Differences in DOM control style

When you need javascript to control the DOM to change the style, you can only use the link tag, because @import cannot be controlled by the DOM.

5. The difference between CSS priorities

The priorities of CSS styles with equal weight from high to low are: inline style, inline style, and external style. , import styles. If both the external link style and the imported style have a div{color:XX}, the final div style is the div style defined in the external link style.

Example: Give the div inline style, inline style, external style, and imported style respectively to see what effect it will have in the end.



 
  
  
  
  <link rel="stylesheet" type="text/css" href="css/green.css"/>
 
 
  have a nice day

Copy after login

Rendering:

What is the difference between link and @import when introducing CSS files into html?

##As can be seen from the picture, the div finally appears purple, and purple is set by the inline style, which has the highest priority. Let’s continue to look at it. If it is an inline style and an imported style, what effect will it have?

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css"> 
  div{background: yellow;}  
   @import url("css/red.css");   
  </style>
 </head>
 <body>
  <div style="width: 150px;height: 150px;">have a nice day </div>
 </body>
</html>

Copy after login

Rendering:

What is the difference between link and @import when introducing CSS files into html?

Obviously, the div eventually appears yellow, and the yellow color is the inline style, which has a higher priority than the imported style.

Summary: The above describes the difference between link and import in

CSS. In general, it is best not to use the import import style. If the style loaded by the import is relatively large, it is easy to load. Delay and even screen flickering. For now, it is recommended for small websites to use link import. Of course, if we need to modularize CSS in the future, @import will be used. This depends on the situation.

The above is the detailed content of What is the difference between link and @import when introducing CSS files into html?. For more information, please follow other related articles on the PHP Chinese website!