Alignement et Décoration du Texte
L'alignement et la décoration du texte sont des aspects essentiels de la mise en forme d'une page web. Les propriétés CSS dédiées à ces aspects offrent un contrôle précis sur l'apparence visuelle du texte.
Alignement du Texte (text-align
)
La propriété text-align
contrôle l'alignement horizontal du texte.
p {
text-align: justify; /* Justifie le texte des paragraphes */
}
h2 {
text-align: center; /* Centre le texte des titres de niveau 2 */
}
nav {
text-align: right; /* Aligne le texte de la navigation à droite */
}
- Explication : La première règle justifie le texte des paragraphes, la deuxième règle centre le texte des titres de niveau 2, et la troisième règle aligne le texte de la navigation à droite.
Décoration du Texte (text-decoration
)
La propriété text-decoration
permet d'ajouter des décorations au texte.
a {
text-decoration: underline; /* Souligne les liens */
}
del {
text-decoration: line-through; /* Ajoute une ligne au milieu du texte des éléments <del> */
}
- Explication : La première règle souligne les liens, et la deuxième règle ajoute une ligne au milieu du texte des éléments
<del>
.
Transformation du Texte (text-transform
)
La propriété text-transform
modifie la casse du texte.
h3 {
text-transform: uppercase; /* Met en majuscules le texte des titres de niveau 3 */
}
blockquote {
text-transform: lowercase; /* Met en minuscules le texte des blocs de citation */
}
- Explication : La première règle met en majuscules le texte des titres de niveau 3, et la deuxième règle met en minuscules le texte des blocs de citation.
Espacement de la Lettre Capitale (letter-spacing
)
La propriété letter-spacing
ajuste l'espacement entre les lettres.
span.initials {
letter-spacing: 3px; /* Ajoute 3 pixels d'espacement entre les lettres des éléments avec la classe "initials" */
}
- Explication : Cette règle ajoute 3 pixels d'espacement entre les lettres des éléments avec la classe "initials".
Conclusion
En utilisant ces propriétés, vous pouvez personnaliser l'alignement, la décoration et d'autres aspects visuels du texte sur votre site web. Expérimentez avec ces propriétés pour atteindre le style textuel souhaité.