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

  1. 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
  1. 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.
  2. Link has no compatibility issues in browsers. @import stated in css2.1 that older browsers will not support it.
  3. 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