What are the ways to import CSS? What is the difference between link and @import? How to choose

I saw that Taobao’s webpage uses import, while many websites use link. Of course, there are also some websites with simpler pages and large traffic that directly write CSS in the HTML code? What is the difference between them? Is it better to use import or link for CSS? I got a general idea from the Classic Forum and another website.
Most of the Taobao pages are written like this :

Copy code

The code is as follows:

Many websites use link :

Copy code

The code is as follows:

Websites like Google, Baidu, 163, etc. are all written directly on the web pages. Of course, the advantage of using links and imports is that they are easy to maintain, but when the network speed is slow, loading interruptions will occur, resulting in page layout errors.
They have the same function, the only difference is that they serve different objects
@import for CSS
link serves the current page. Some netizens in Blue Classic said that @import will be executed first.
+++++++++++++++++++++++++++++++++++++++++++++++++
The difference between link and @import in external referenced CSS <br />I have just finished writing several ways to load CSS in XHTML these two days, among which external referenced CSS is divided into two ways: link and @import.
Essentially, both methods are for loading CSS files, but there are subtle differences.
Difference 1: Differences among ancestors
link is an XHTML tag, while @import is completely a method provided by CSS.
In addition to loading CSS, the link tag can also do many other things, such as defining RSS, defining rel connection attributes, etc., while @import can only load CSS.
Difference 2: Difference in loading order <br />When a page is loaded (that is, when it is browsed by the viewer), the CSS referenced by the link will be loaded at the same time, while the CSS referenced by @import will not be loaded until the entire page is downloaded. So sometimes when you browse a page that uses @import to load CSS, there will be no style at first (it will flicker), which is quite obvious when the network speed is slow.
Difference 3: Difference in compatibility <br />Since @import was proposed in CSS2.1, it is not supported by older browsers. @import can only be recognized by IE5 and above, while the link tag does not have this problem.
Difference 4: Difference when using DOM to control style <br />When using JavaScript to control DOM to change the style, you can only use the link tag because @import is not controllable by DOM.
Difference 5: @import can be used to import other style sheets into CSS .<br />For example, you can create a main style sheet and import other style sheets into the main style sheet.
These are basically the differences (if there are any other differences, please tell me and I will add them), the rest are the same. From the above analysis, it is better to use the link tag.

<<: Docker generates images through containers and submits DockerCommit in detail

>>: Application nesting of HTML ul unordered tables

When installing a virtual machine on Thinkpad VMware, the message "This host supports Intel VT-x, but Intel VT-x is disabled" appears (problem solution)

Today, when I was using VMware to install a new v...

What are the ways to import CSS? What is the difference between link and @import? How to choose

Concat() of combined fields in MySQL

How to use webpack and rollup to package component libraries

React implementation example using Amap (react-amap)

js to create a carousel effect

CSS3 gradient background compatibility issues

Detailed explanation of MySQL combined index and leftmost matching principle

Detailed explanation of the use of MySQL mysqldump

Detailed explanation of basic data types in mysql8.0.19

Commands to find domain IP address in Linux terminal (five methods)

Using CSS to implement loading animation of Android system

Recommend

Solution to MySQL connection exception and error 10061

Detailed steps to change the default password when installing MySQL in Ubuntu

Solution to the problem of eight hours difference in MySQL insertion time

Summary of MySQL InnoDB architecture

Interview question: Three-row and three-column layout, tables are merged and nested tables are not allowed

The MySQL server is running with the --read-only option so it cannot execute this statement

When installing a virtual machine on Thinkpad VMware, the message "This host supports Intel VT-x, but Intel VT-x is disabled" appears (problem solution)

Pure CSS code to achieve drag effect

Why the disk space is not released after deleting data in MySQL

Solve the margin: top collapse problem in CCS

How to retrieve password for mysql 8.0.22 on Mac

The use of MySQL triggers and what to pay attention to

MySQL database account creation, authorization, data export and import operation examples

Various methods to restart Mysql under CentOS (recommended)

CentOS 7 set grub password and single user login example code