La balise utilisée pour introduire les styles CSS est "". La balise link est utilisée pour définir la relation entre le document et les ressources externes. L'utilisation la plus courante consiste à créer un lien vers une feuille de style CSS externe. La syntaxe est "". . Lorsque la page est chargée, les styles CSS introduits par la balise de lien seront chargés en même temps.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
La balise utilisée pour introduire les styles CSS est "".
Les feuilles de style externes CSS doivent être importées dans le document Web avant de pouvoir être reconnues et analysées par le navigateur. Les fichiers de feuilles de style externes peuvent être importés dans des documents HTML de deux manières.
Utilisez la balise pour importer
Utilisez le mot-clé @import pour présenter
L'article suivant parlera en détail de la balise La balise
définit la relation entre le document et les ressources externes. Son utilisation la plus courante consiste à lier des feuilles de style.
Remarque :
En HTML, la balise n'a pas de balise de fermeture.
En XHTML, la balise doit être correctement fermée.
Utilisez la balise link pour introduire la syntaxe du style CSS
<link href="外部样式表文件路径" rel="stylesheet" type="text/css" />
Explication de chaque attribut :
L'attribut href définit l'adresse du fichier de feuille de style externe, qui peut être une adresse relative ou absolue adresse. L'attribut
rel définit le document associé, c'est-à-dire ici la feuille de style associée. L'attribut
type définit le type de fichier importé. Comme l'élément style, text/css indique un fichier texte CSS.
Remarque :
Généralement, lors de la définition de la balise , les trois attributs de base ci-dessus doivent être définis, parmi lesquels href est un attribut obligatoire.
Vous pouvez également ajouter l'attribut title dans l'élément link pour définir le titre de la feuille de style facultative. Autrement dit, lorsqu'un document Web importe plusieurs feuilles de style, vous pouvez sélectionner le fichier de feuille de style à appliquer via la valeur de l'attribut title. .
L'attribut title est lié à l'attribut rel. Selon le plan de l'organisation W3C, les futurs documents Web utiliseront plusieurs éléments fichiers personnels. Fichiers supplémentaires personnalisés. Après avoir importé autant de fichiers de types et de noms différents, vous pouvez utiliser l'attribut title pour sélectionner. À ce stade, le rôle de l'attribut rel devient apparent. Il peut spécifier le type de fichier importé appliqué lors de l'affichage initial du fichier de page Web. Actuellement, il ne peut être associé qu’au type de feuille de style CSS.
Les styles externes sont la meilleure solution pour les applications CSS. Un fichier de feuille de style peut être référencé par plusieurs pages Web, et un fichier de page Web peut importer plusieurs feuilles de style en utilisant à plusieurs reprises l'élément de lien pour importer différents fichiers de feuille de style.
Connaissances approfondies : La différence entre lien et @import
1. Différence d'affiliation
@import est une règle de syntaxe fournie par CSS, qui n'a pour fonction que d'importer des feuilles de style, le lien est une balise fournie par HTML ; , qui peut non seulement charger des fichiers CSS , vous pouvez également définir des attributs RSS, des connexions relatives, etc.
2. Différence dans l'ordre de chargement
Lors du chargement de la page, le CSS introduit par la balise de lien est chargé en même temps ; le CSS introduit par @import sera chargé après le chargement de la page.
3. Différence de compatibilité
@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é.
4. La différence dans la contrôlabilité du DOM
Vous pouvez utiliser le 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.
(Partage de vidéos d'apprentissage : tutoriel vidéo CSS, front-end web)
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!