What is the difference between css external links and imported css

The difference between the external link type and the imported type of css is: the external link type loads the css layout file into the web page file first, while the imported type loads the web page file first and then loads the layout file. Using import can avoid too many web page files pointing to a css layout file.

The difference analysis is as follows:

(Learning video recommendation: css video tutorial)

External Chained style

<link rel="stylesheet" href="css/test.css">

Imported style

@import "css/test.css";

The initial results of both are the same, which is to introduce independent css files into web page files.

But there are still subtle differences between the two. Link loads the css layout file into the web page file first, so no matter how slow the network speed is, the final web page effect will be the same. @import loads the web page file first, and then loads the layout file. If the network speed is too slow at this time, the web page effect without layout will appear first, which will look ugly.

But importing styles can avoid too many webpage files pointing to a css layout file. If you use a link, it may cause a slowdown due to too many webpage files using one layout file at the same time. But using a good hard drive will basically not cause this situation.

Related recommendations: CSS tutorial

The above is the detailed content of What is the difference between css external links and imported css. For more information, please follow other related articles on the PHP Chinese website!