Style des en-têtes en CSS
Les en-têtes sont des éléments importants sur une page Web, car ils sont chargés d'indiquer la hiérarchie du contenu et d'aider l'utilisateur à comprendre la structure du site. De plus, le style des titres peut avoir un impact direct sur l'apparence et la lisibilité du texte.
Sélectionner les en-têtes
Pour styliser les en-têtes en CSS, il est nécessaire de sélectionner l'élément HTML correspondant. Les en-têtes sont représentés par les balises <h1>, <h2>, <h3>, <h4>, <h5> et <h6>.
Pour sélectionner toutes les rubriques à la fois, nous pouvons utiliser le sélecteur universel * combiné avec le sélecteur de type h1, par exemple :
* {
famille de polices : Arial, sans empattement ;
}
h1 {
taille de police : 36px ;
font-weight : gras ;
couleur : #333 ;
}
Dans cet exemple, tous les éléments de la page auront la police définie sur Arial, ou une police sans empattement si Arial n'est pas disponible. Les en-têtes <h1> auront une taille de police de 36 pixels, en gras et en noir.
Style de chaque en-tête individuellement
Si vous devez styliser chaque en-tête individuellement, vous pouvez utiliser des sélecteurs de classe ou d'ID. Par exemple :
Continuez dans notre application.
Vous pouvez écouter le livre audio écran éteint, recevoir un certificat gratuit pour ce cours et accéder également à 5 000 autres cours en ligne gratuits.
Ou poursuivez votre lecture ci-dessous...
Téléchargez l'application
<h1 class="main-title">Titre principal</h1>
.titre principal {
taille de police : 48px ;
couleur : #ff0000 ;
}
Dans ce cas, seul l'en-tête avec la classe main-title aura une taille de police de 48 pixels et une couleur rouge.
Autres propriétés de style
En plus des propriétés de police, nous pouvons utiliser d'autres propriétés CSS pour styliser les en-têtes, telles que :
background-color: définit la couleur de fond de l'en-tête ;padding: définit l'espacement interne de l'en-tête ;margin: définit l'espacement extérieur de l'en-tête ;text-align: définit l'alignement du texte dans l'en-tête ;border: définit la bordure de l'en-tête.
Avec ces propriétés, vous pouvez créer des en-têtes personnalisés qui correspondent à la conception du site et rendent la lecture plus agréable pour l'utilisateur.
Conclusion
Le style des en-têtes CSS est un élément important de la conception de pages Web, car il aide à indiquer la hiérarchie du contenu et améliore la lisibilité du texte. Avec les bonnes propriétés CSS, vous pouvez créer des en-têtes personnalisés qui correspondent à la conception de votre site et rendent l'expérience utilisateur plus agréable.
