This article has participated in the Denver Nuggets Creators Camp 3 “More Productive writing” track, see details: Digg project | creators Camp 3 ongoing, “write” personal impact.
1. The difference between
-
Link is an XHTML tag that not only introduces CSS files, but also introduces web site ICONS or sets up media queries.
@import is a syntax rule provided by the CSS and can only be used to load the CSS.
@import must be written before any CSS rule except @charset, otherwise it will be ignored by the browser. Also, if there is another style after @import, the semicolon after @import must be written and cannot be omitted.
CSS <link rel="icon" href="favicon.ico"> // Set the media query <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">Copy the code
- Link introduces the CSS file, the page loads the CSS file at the same time, @import loads the CSS file after the page is fully loaded, and on slow networks there is no CSS style at first.
- Link has no compatibility issues in browsers. @import stated in css2.1 that older browsers will not support it.
- The CSS in link can be retrieved by javascript to control the DOM, whereas @import does not.
2. CSS import mode
2.1 Inline style
Write styles directly on the label. Only the current label is valid.
<div style="height:100px; width:100px"></div>Copy the code
2.2 Embedding Style
In addition, write CSS. Only valid for the current page.
<head>
<style>
p{
color:red;
}
</style>
</head>
Copy the code
2.3 Link Styles
Use the LINK tag to import CSS.
<link rel="stylesheet" type="text/css" href="style.css"></link>
Copy the code
2.4 Import Styles
Import the CSS using @import
<style>
@import url(style.css);
<style>
Copy the code
Or in a CSS file
@charset "utf-8"; @import url(style.css); *{ margin:0; padding:0; }Copy the code