Explication détaillée de la différence entre link et @import en CSS

Nous savons tous que link et @import peuvent introduire des feuilles de style CSS, alors quelle est la différence entre les deux ? Parlons d'abord de leurs méthodes de liaison respectives, puis parlons de leurs différences ~~~

La méthode de liaison :

<link rel="stylesheet" type="text/css" href="index.css">

@ import méthode d'importation :

<style type="text/css">   
 @import url(&#39;index.css&#39;);   
 </style>

Priorité : style intégré> Feuille de style interne> Importer une feuille de style (lien dans la feuille de style)

Importer La méthode est très similaire à la méthode de lien, mais en fait elle équivaut à exister dans la feuille de style interne. Même ainsi, sa priorité est toujours inférieure à la feuille de style interne, et sa priorité dépend de la priorité de la feuille de style liée. l'ordre de localisation, celui qui sera défini plus tard aura la priorité la plus élevée.

Remarque : Lors de l'importation d'une feuille de style externe, son emplacement doit être en haut de la feuille de style, c'est-à-dire devant les autres styles.

Il y a 5 différences entre eux (pour autant que je sache jusqu'à présent, je les ajouterai s'il y a de nouvelles découvertes dans le futur).

1 : le lien est une balise XHTML. En plus de charger du CSS, il peut également définir d'autres transactions telles que RSS. @import appartient à la catégorie CSS et ne peut charger que du CSS.

Deux : Lorsque le lien fait référence à CSS, il est chargé en même temps que la page est chargée ; @import doit attendre que la page soit complètement chargée avant de se charger.

Trois : le lien est une balise XHTML, il n'y a pas de problème de compatibilité pour @import, les navigateurs de versions inférieures ne le supportent pas.

Quatre : link prend en charge l'utilisation de javascript pour contrôler le DOM afin de changer le style alors que @import ne le prend pas en charge.

5 : @import peut réintroduire d'autres feuilles de style dans le fichier CSS.

Ce qui précède est la différence entre le lien et @import en CSS introduit par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra. dans le temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour des explications plus détaillées sur les différences entre link et @import en CSS, veuillez faire attention au site Web PHP chinois !