Skip to content
✨ Les cours suivant sont disponible : Html, Css, React, Algorithme ✨
cours
✨ Css
2.0 Propriétés CSS pour la mise en forme du texte
2.3 Alignement et Décoration du Texte

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é.