Maison > Article > interface Web > Comment écrire le style CSS dans une page Web HTML
Comment écrire le style CSS dans une page Web HTML
- PHPzoriginal
- 2023-04-23 16:41:503336parcourir
HTML et CSS sont l'un des deux composants les plus importants du développement Web. HTML est responsable de la définition de la structure et du contenu d'une page Web, tandis que CSS est responsable de la définition du style et de la présentation d'une page Web. Il existe trois façons d'écrire du CSS : les styles en ligne, les styles internes et les feuilles de style externes.
1. Style en ligne
Le style en ligne est un style CSS directement appliqué aux éléments HTML. Lors de l'utilisation de styles en ligne, le style CSS sera écrit dans l'attribut style de l'élément HTML. Par exemple :
<p style="color: red;">这是一段红色的文字</p>
La couleur : rouge dans l'attribut style signifie définir la couleur du texte sur rouge.
Les styles en ligne ne nécessitent pas de fichiers CSS spéciaux et les styles peuvent être rapidement ajoutés et modifiés dans des éléments HTML individuels. Cependant, cela peut rendre les fichiers HTML difficiles à lire et à maintenir, car les styles et le texte sont mélangés. De plus, si vous devez modifier un ensemble de styles en ligne, vous devez modifier manuellement chaque élément, ce qui est assez gênant.
2. Style interne
Le style interne utilise la balise style pour intégrer les styles CSS dans le document HTML. Intégrez la balise de style dans la zone d'en-tête du document HTML, puis écrivez le style CSS dans la balise, comme indiqué ci-dessous :
<head>
<title>标题</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是一段红色的文字</p>
</body>
Le code ci-dessus définit la couleur du texte sur rouge. Les styles internes séparent les documents HTML des styles CSS, ce qui rend la maintenance des styles plus pratique. Cependant, si vous devez ajouter de nombreux styles au même document HTML, l'utilisation de styles internes augmentera la taille du fichier et allongera le temps de téléchargement du fichier.
3. Feuille de style externe
La feuille de style externe utilise la balise de lien pour lier le document HTML à la feuille de style CSS externe. Les feuilles de style externes contiennent généralement tous les styles et peuvent être réutilisées dans plusieurs documents HTML. Comme indiqué ci-dessous :
Introduisez une feuille de style externe dans le fichier html :
<head> <title>标题</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>这是一段红色的文字</p> </body>
Définissez le style CSS dans le fichier style.css :
p {
color: red;
}
L'utilisation d'une feuille de style externe peut séparer complètement le code HTML et CSS, ce qui le rend plus pratique pour maintenir et modifier les styles. De plus, comme il peut être réutilisé dans plusieurs fichiers HTML, il peut réduire la taille du fichier et augmenter la vitesse de chargement des pages. Par conséquent, les feuilles de style externes sont la méthode recommandée pour écrire du CSS.
Résumé
Il existe trois façons ci-dessus d'écrire du CSS en HTML : les styles en ligne, les styles internes et les feuilles de style externes. Les styles en ligne et les méthodes de style internes conviennent aux situations où les styles doivent être écrits et modifiés rapidement, tandis que les feuilles de style externes conviennent aux situations où plusieurs fichiers HTML contiennent le même style. Selon la situation, vous pouvez choisir une méthode d'écriture CSS qui vous convient pour mettre en œuvre le style de conception de la page 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!
Articles Liés
Voir plus- Problème de transmission de la valeur du composant parent aux graphiques du composant enfant dans Vue
- Quelques réflexions sur React cette liaison
- Django utilise la requête pour obtenir les paramètres envoyés par le navigateur
- Opération DOM dans JQuery - wrap
- Explication du contenu associé du prototype et de la chaîne de prototypes