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

How to allow external network access to mysql and modify mysql account password

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

How to allow external network access to mysql and modify mysql account password

Vue ElementUI implements asynchronous loading tree

What you need to know about creating MySQL indexes

Native JS implements a very good-looking counter

Front-end JavaScript housekeeper package.json

Detailed tutorial on installing Protobuf 3 on Ubuntu

MySQL Optimization Summary - Total Number of Query Entries

Nginx location matching rule example

Win10 install Linux ubuntu-18.04 dual system (installation guide)

Summary of common operation skills of MySQL database

Recommend

Detailed explanation of data type issues in JS array index detection

Common operations of web front-end (including JS/HTML/CSS and other aspects of knowledge)

Win10 uses Tsinghua source to quickly install pytorch-GPU version (recommended)

Troubleshooting the security group ports added by Alibaba Cloud and the inability to access them after adding them

Detailed explanation of the text-fill-color property in CSS3

Detailed graphic tutorial on how to install the unzipped version of MySQL under Windows 10

Detailed explanation of the execution process of mysql update statement

Simply understand the writing and execution order of MySQL statements

Implementing a simple timer in JavaScript

Detailed explanation of the two modes of Router routing in Vue: hash and history

Detailed explanation of MySQL limit usage and performance analysis of paging query statements

MySQL 8.0.21 installation tutorial under Windows system (illustration and text)

JavaScript microtasks and macrotasks explained

Manually implement js SMS verification code input box

Docker installs the official Redis image and enables password authentication