Ceci est un morceau de texte rouge. <"/> Ceci est un morceau de texte rouge. <">
Maison >interface Web >Questions et réponses frontales >Comment écrire en style CSS
CSS (Cascading Style Sheets) est un langage utilisé pour décrire le style des pages Web. CSS fournit une multitude d'attributs de style qui nous permettent de contrôler de manière plus flexible le style des pages Web. Dans cet article, je partagerai quelques méthodes d'écriture de style CSS pour vous aider à mieux maîtriser le contrôle du style.
1. Style en ligne
Le style en ligne consiste à définir l'attribut style dans l'attribut style de la balise HTML, comme indiqué ci-dessous :
<p style="color: red;">这是一段红色的文字。</p>
Cette façon d'écrire est très intuitive, mais il n'est pas recommandé de l'utiliser fréquemment car cela rendra le changement de code HTML trop long et difficile à maintenir.
2. Style intégré
Le style intégré utilise des balises de style en tête du fichier HTML et y écrit du code CSS. Comme indiqué ci-dessous :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>嵌入式样式</title> <style type="text/css"> p { color: red; } </style> </head> <body> <p>这是一段红色的文字。</p> </body> </html>
Cette façon d'écrire est meilleure que le style en ligne car elle peut mettre tout le code de style dans l'en-tête et réduire la quantité de code dans la page. Toutefois, si plusieurs fichiers HTML doivent utiliser le même style, le code de style doit être copié à nouveau, ce qui entraîne une augmentation des coûts de maintenance.
3. Style externe
Le style externe consiste à placer le code de style dans un fichier CSS séparé, puis à l'introduire dans le fichier HTML. Comme indiqué ci-dessous :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>外部样式</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>这是一段蓝色的文字。</p> </body> </html>
Le code de style est placé dans le fichier de style style.css, comme indiqué ci-dessous :
p { color: blue; }
Cette façon d'écrire est la meilleure, car elle sépare le code de style et le code HTML, réduit la redondance du HTML code, et rend la mise en page entière plus claire. Parallèlement, si plusieurs fichiers HTML doivent utiliser ce style, il vous suffit de modifier le fichier de style et toutes les pages faisant référence à ce style seront automatiquement mises à jour.
De plus, il existe certaines méthodes d'écriture de style CSS qui sont également très courantes dans le développement réel :
4 Sélecteur
Selector est utilisé pour spécifier l'élément HTML auquel le style est appliqué. CSS prend en charge une variété de sélecteurs, les plus courants sont :
p { color: red; }
#myId { color: blue; }
.myClass { color: green; }
input[type="text"] { border: 1px solid red; }
5. Attributs de style
Les attributs de style sont utilisés pour décrire le style des éléments. CSS prend en charge de nombreux attributs de style, en voici quelques-uns courants :
p { color: red; }
p { font-size: 14px; }
p { font-family: Arial, sans-serif; }
p { background-color: yellow; }
p { border: 1px solid black; }
p { margin: 10px; }
p { padding: 5px; }
6. Pseudo-classes et pseudo-éléments
Les pseudo-classes et pseudo-éléments sont utilisés pour ajouter des styles à des états ou des parties d'éléments spécifiques.
a:hover { color: red; }
p::first-line { font-weight: bold; }
Ce qui précède est la manière courante d'écrire des styles CSS. Bien sûr, dans le développement réel, dans de nombreux cas, différents styles doivent être écrits dans différentes feuilles de style (comme les styles d'impression, les styles mobiles, etc.), et il faut également prêter attention à la relation entre ces feuilles de style. Dans le même temps, les problèmes de performances des styles CSS doivent également être pris en compte pour éviter une imbrication excessive et des sélecteurs trop complexes. J'espère que cet article vous sera utile.
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!