What is the difference between using link and @ import when importing styles from a page?

2021-08-27 00:14:35 【Cherry dance】

This article has participated in the third phase of nuggets creators training camp 「 High yield Gengwen 」 Track , View details ： Project digging ｜ The third phase of the creator training camp is under way ,「 Write 」 Personal influence .

1. difference

link yes XHTML label , It can not only introduce css file , You can also introduce Website Icons or set up media queries .

@import yes CSS Grammar rules provided , Can only be used to load css.

@import Be sure to write in addition to @charset Anything else except CSS Before the rules , If placed in another location, it will be ignored by the browser . and , stay @import Then if there are other styles , be @import The semicolon after that must be written , Can't be omitted .

// introduce css
<link href="main.css" rel="stylesheet">
// Bring in the icon 
<link rel="icon" href="favicon.ico">
// Set media query 
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
 Copy code

link introduce css file , The page loads at the same time css file ,@import On the page Completely Load after load css file , When the network is slow, there will be no css style .
link There is no compatibility problem in the browser [email protected] stay css2.1 It is proposed that , Older browsers will not support .
link Medium css Can be javascript Acquire and then control DOM, and @import I won't support it .

2. css Introduction mode

2.1 inline style

Write the style directly on the label . Only valid for the current tag .

<div style="height:100px;width:100px"></div>
 Copy code

2.2 Embedded style

Adding , To write css. Only valid for the current page .

<head>
	<style>
		p{
			color:red;
		}
	</style>
</head>
 Copy code

2.3 Link style

Use link Introduced in tag css.

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

2.4 Import styles

Use @import Import css

<style>
	@import url(style.css);
<style>
 Copy code

Or in css Use... In the document

@charset "utf-8";
@import url(style.css);
*{ margin:0; padding:0;}
 Copy code

copyright notice
author[Cherry dance],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827001432579k.html

current position：Home>What is the difference between using link and @ import when importing styles from a page?