Maison >interface Web >tutoriel HTML >Comment mettre du CSS dans un fichier HTML
Comment mettre du CSS dans un fichier HTML
- 藏色散人original
- 2021-03-22 11:22:4229815parcourir
Comment mettre du CSS dans un fichier HTML : 1. Ajoutez du CSS directement à l'attribut style dans la balise HTML ; 2. Écrivez du CSS sous la balise style dans l'en-tête HTML ; fichiers CSS externes ; 4. Utilisez les règles CSS pour introduire des fichiers CSS externes.
L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3
Comment introduire CSS dans HTML
Il existe 4 façons d'introduire le CSS en HTML. Deux d’entre eux consistent à ajouter du code CSS directement dans le fichier HTML, et les deux autres consistent à introduire des fichiers CSS externes. Jetons un coup d'œil à ces méthodes ainsi qu'à leurs avantages et inconvénients.
Méthode en ligne
La méthode en ligne fait référence à l'ajout de CSS directement à l'attribut de style dans la balise HTML.
Exemple :
<div style="background: red"></div>
C'est généralement une mauvaise façon d'écrire, cela ne change que le style de la balise actuelle, si vous voulez que plusieurs dc6dce4a544fdca2df29d5ac0ea9906b pour ajouter à plusieurs reprises le même style à chaque dc6dce4a544fdca2df29d5ac0ea9906b. Si vous souhaitez modifier un style, vous devez modifier le code dans tous les styles. De toute évidence, l’introduction du code CSS en ligne rendra le code HTML verbeux et rendra la page Web difficile à maintenir.
Méthode intégrée
La méthode intégrée fait référence à l'écriture de code CSS sous la balise c9ccee2e6ea535a969eb3f532ad9fe89
Exemple :
<head>
<style>
.content {
background: red;
}
</style>
</head>Le CSS intégré n'est valable que pour la page Web actuelle. Étant donné que le code CSS se trouve dans le fichier HTML, le code est plus concentré, ce qui est généralement avantageux lorsque nous écrivons des modèles de pages Web. Parce que quelqu'un qui regarde le code du modèle peut voir la structure HTML et les styles CSS en un coup d'œil. Étant donné que le CSS intégré n'est valable que pour la page actuelle, lorsque plusieurs pages doivent introduire le même code CSS, écrire de cette manière entraînera une redondance du code et ne favorisera pas la maintenance.
Méthode Link
La méthode link fait référence à l'utilisation de la balise 93f0f5c25f18dab9d176bd4f6de5d30e dans l'en-tête HTML pour introduire des fichiers CSS externes.
Exemple :
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>C'est la manière la plus courante et la plus recommandée d'introduire CSS. En utilisant cette approche, tout le code CSS n'existe que dans un seul fichier CSS, il a donc une bonne maintenabilité. Et tout le code CSS n'existe que dans le fichier CSS. Le fichier CSS sera introduit lors de son premier chargement. Lors du prochain changement de page, il vous suffira de charger le fichier HTML.
Méthode d'importation
La méthode d'importation fait référence à l'utilisation de règles CSS pour introduire des fichiers CSS externes.
Exemple :
<style>
@import url(style.css);
</style>Comparez la méthode de lien et la méthode d'importation
La méthode de lien (remplacée par le lien ci-dessous) et la méthode d'importation (remplacée par @import ci-dessous) toutes deux introduisons la méthode de fichier CSS externe, comparons ces deux méthodes et expliquons pourquoi @import n'est pas recommandé.
link appartient au HTML, et les fichiers externes sont introduits via l'attribut href dans la balise 2cdf5bf648cf2f33323966d7f58a7f3f, tandis que @import appartient au CSS, donc l'instruction d'importation doit être écrite en CSS. l'instruction d'importation doit être écrite dans le style au début du tableau, sinon les fichiers externes ne peuvent pas être importés correctement
@import est un concept qui n'est apparu que dans CSS2.1, donc si la version du navigateur est inférieure ; , les fichiers de style externes ne peuvent pas être importés correctement ;
Quand Lorsque le fichier HTML est chargé, le fichier référencé par lien sera chargé en même temps, tandis que le fichier référencé par @import ne sera chargé qu'après la page. est complètement téléchargé ;
Résumé : Nous devrions essayer d'utiliser la balise 2cdf5bf648cf2f33323966d7f58a7f3f pour importer. Pour les fichiers CSS externes, évitez ou utilisez moins les trois autres méthodes.
[Apprentissage recommandé : 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!