Comment importer du CSS en externe

Méthodes d'introduction externe du CSS : 1. Utilisez le lien pour appeler des fichiers CSS externes, et la balise définit la relation entre le document et les ressources externes ; 2. Utilisez @import pour référencer les fichiers CSS externes.

L'environnement d'exploitation de cet article : système Windows 7, version css3, ordinateur Dell G3

Comment introduire le CSS externe ?

Méthode 1 : Utilisez le lien pour appeler un fichier CSS externe

Utilisez< dans la paire de balises link> pour introduire des fichiers de feuille de style externes et utiliser des règles HTML pour introduire des CSS externes. La balise

définit la relation entre le document et les ressources externes. L'utilisation la plus courante de la balise

Syntaxe :

<link rel="stylesheet" href="css文件路径" type="text/css" />

Explication de la structure du contenu de la balise de lien lors d'un lien vers des styles CSS externes :

href : est l'adresse de la ressource externe, voici l'adresse de le css

rel : définit la relation entre le document courant et le document lié, voici la feuille de style css externe, c'est à dire stylesheet

type : précise la classe MIME du document lié , ici la valeur est text/css

Remarque :

Cette méthode chargera le fichier CSS avant de charger le corps principal du fichier de la page Web, donc la page Web affichée aura un effet de style depuis le début. Elle ne sera pas affichée sans style comme la méthode importée, puis affichera la page Web stylisée.

Méthode 2 : Utiliser @import pour référencer des fichiers CSS externes

Les règles CSS @import sont utilisées pour importer des règles de style à partir d'autres feuilles de style. Ces règles doivent précéder tous les autres types de règles, @import ne peut pas être utilisé dans les règles d'un groupe conditionnel.

Syntaxe de la règle @import

@import url("文件路径");

Explication :

Cette méthode chargera le fichier CSS une fois la page Web entière chargée, cela provoque donc un problème si la page Web Si elle est relativement grande, la page sans style apparaîtra pendant un moment. Après un flash, le style de la page web apparaîtra. Il s’agit d’un défaut inhérent aux importations.

La différence entre les deux méthodes d'appel de styles CSS externes :

@import est la règle de syntaxe fournie par CSS, qui n'a pour fonction que d'importer des feuilles de style, le lien est la balise fournie par ; HTML, qui peut non seulement charger des fichiers CSS, vous pouvez également définir des attributs RSS, des connexions relatives, etc.

Lorsque la page est chargée, le CSS introduit par la balise link est chargé en même temps ; le CSS introduit par @import sera chargé après le chargement de la page.

@import est une syntaxe uniquement disponible dans CSS2.1, elle ne peut donc être reconnue que dans IE5+ ; la balise de lien est un élément HTML et ne présente aucun problème de compatibilité.

Vous pouvez utiliser DOM via JS et insérer des balises de lien pour changer le style ; puisque la méthode DOM est basée sur des documents, vous ne pouvez pas utiliser @import pour insérer des styles.

Le poids des styles introduits par lien est supérieur à celui des styles introduits par @import.

Étude recommandée : "Tutoriel vidéo 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!