Parlons 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导入的方式：

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

Priorité : style d'intégration> Feuille de style interne> Feuille de style d'importation (lien dans la feuille de style)

La méthode d'importation est très similaire à la méthode de lien, mais la méthode réelle est équivalente à existant dans la feuille de style interne Cependant, sa priorité est toujours inférieure à celle de la feuille de style interne, et la priorité entre elle et la feuille de style liée dépend de l'ordre de position, qui la définit plus tard, celui qui a 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.

Ils ont un total de 5 différences (à notre connaissance, j'en ajouterai d'autres 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 le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!