Placer le code CSS dans un fichier externe améliore la réutilisabilité, facilite la maintenance, améliore les performances, facilite la collaboration en équipe et optimise la mise en cache du navigateur : créez un fichier texte avec une extension .css. Écrivez des styles CSS dans un fichier. Utilisez l'élément <link> dans le <head> du fichier HTML pour créer un lien vers un fichier CSS externe.
Méthode d'écriture CSS externe HTML
Comment placer du code CSS dans un fichier externe ?
Pour écrire du code CSS dans un fichier externe, veuillez suivre ces étapes :
-
Créer un fichier CSS : Créez un nouveau fichier texte et enregistrez-le avec l'extension ".css". Par exemple, "styles.css".
-
Écrire le code CSS dans un fichier : Écrivez les styles CSS requis dans un fichier, similaire aux styles en ligne dans un fichier HTML.
-
Lien vers le fichier CSS dans le fichier HTML : L'élément
<head>部分中，使用<link> dans le fichier HTML renvoie vers un fichier CSS externe. Par exemple :
<code class="html"><head>
<link rel="stylesheet" href="styles.css">
</head></code>
Copier après la connexion
Avantages
Les avantages de l'utilisation de fichiers CSS externes incluent :
-
Réutilisabilité : Les fichiers CSS externes peuvent être référencés par plusieurs fichiers HTML, permettant la réutilisation des styles.
-
Facile à entretenir : Tous les styles sont concentrés dans un seul fichier pour une modification et une maintenance centralisées.
-
Amélioration des performances : Les fichiers CSS externes peuvent réduire la taille des fichiers HTML, améliorant ainsi la vitesse de chargement.
-
Collaboration en équipe : Les fichiers CSS externes permettent à plusieurs développeurs de travailler sur des styles simultanément sans conflits.
-
Cache du navigateur : Les fichiers CSS externes sont généralement mis en cache par le navigateur et n'ont pas besoin d'être retéléchargés lors des chargements ultérieurs.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
