Four ways to introduce CSS in HTML, novices must see!

The four ways to introduce CSS are super simple!

1. In-line formula

<h1 style="color:hotpink;">写你想写的字<h1>`

Insert picture description here
You can change the style of the label by directly adding the style style to the label.

2. Embedded

<head>
	<style>
	h1{
	color:red;
	}
	</style>
</head>

Insert picture description here
Note: <style> </style> should be written between <head> and </head >! The braces after h1 cannot be omitted!

3. External formula

<link href="填CSS的路径" rel="stylesheet" type="text/css" />

Insert picture description here
First, you need to create a new CSS file, that is, the file with the suffix of .css. Create a new file that you should know. Dear~ Write h1{ color:purple} in it and set the font color of h1 to purple.
Pay special attention to the path here, don’t
write it wrong~ Please understand the absolute path and relative path by yourself♪ (´▽｀) <link> should be written between <head> and </head >, of course write outside It's fine, but it breaks the rules. . .
"stylesheet" type="text/css" means to quote style, copy it up, don’t change it randomly! You can change it too! ヽ(✿ﾟ▽ﾟ)ノ

4. Imported

<head>
	<style>
		@import url (CSS的路径)
	</style>
<head>

Insert picture description here
<style> </style> should be written between <head> and </head >!

这四种方式说法不一样，什么内链式啊，内部样式，外链式，五花八门的，总之你记住我说的就对了，简单~~~

priority:

Inline> Embedded> External> Imported

How to choose the above four methods, why not recommend importing? ? ?

① Question 1: How to choose?

The third method is generally used. The second method is rarely recommended for styles that need to be added. There are requirements for priority and fewer styles to be added. You can choose the first method, depending on your personal preference! ! !

②Question 2: Why is it not recommended to import?

Limitations: @import can only be used to load CSS, and only IE 5 or above can be recognized
Loading order: the CSS referenced by @import waits until all the content of the page is loaded before being loaded
Uncertainty: the network is stuck, which will cause some loading problems, such as flickering, no display style, etc
Slow speed: using @import method will increase http requests and affect loading speed, so use it with caution

It is forbidden to reprint without permission. I typed them one by one. Well original, thank you for your support, thank you!