Propriété Text CSS

Le langage CSS est doté d'un certain nombre de propriétés permettant de réaliser la mise en forme d'un texte en toute aisance:

1. La propriété text-align

Cette propriété permet de définir l'aligement d'un texte

Exemple


2. La propriété color

C'est une propriété qui sert à personnaliser la couleur du texte

Exemple

On peut aussi utiliser les codes de couleurs:

3. La propriété text-decoration

Cette commande permet de décorer un texte avec une ligne en bas, au dessus, barré...

  1. valeur = none -> aucune décoration
  2. valeur = underline -> texte souligné
  3. valeur = overline -> ligne au dessus
  4. valeur = line-through -> texte barré
  5. valeur = blink -> texte qui clignote

Remarque

La propriété blink fonctionne uniquement  avec Mozilla.

Exemple




4. La propriété text-indent

C'est une propriété permettant de spécifier le décalage de la première ligne de chaque paragraphe.

Exemple

5. La propriété Text-shadow

Cette commande permet de décorer un texte avec un ombre, la syntaxe est :

où :

  1. valeur1 : mesure le décalage de l'ombre horizontalement à droite en pixels
  2. valeur2 : mesure le décalage de l'ombre en bas verticalement en pixels
  3. valeur3 : mesure l'épaisseur de l'ombre
  4. couleur : couleur de l'ombre

Exemple

Exemple complet

Ce qui affiche à l'execution:

6. La propriété Text-transform

Cette commande permet de modifier la casse d'un texte elle a pour valeurs :

  1. lowercase : transforme tout le texte en miniscule
  2. capitalize : transforme la première lettre de chaque mot en majuscule
  3. uppercase : transforme tout le texte en majuscule
  4. inherit : hérite des parents

Exemple

Ce qui affiche à l'exécution





7. la propriété overflow

La propriété text-overflow dans CSS est utilisée pour spécifier l'affichage d'un certain texte qui a survolé et caché de la vue. La propriété white-space doit être définie sur nowrap et la propriété overflow doit être définie sur hidden. Le contenu débordant peut être tronqué, afficher des points de suspension ("...") ou afficher une chaîne personnalisée.

Syntaxe

  1. clip: le texte est tronqué et ne peut être vu! C'est la valeur par défaut
  2. string: la partie tronquée est représentée à l'aide d'une chaine personnalisable
  3. ellipsis: la partie tronquée est remplacée par des caractères comme '...'
  4. initial: définit la propriété à sa valeur par défaut
  5. inherit: définit la propriété sur la valeur de l'élément parent

Exemple

Vous avez bien remarqué que le texte a été tronqué!

Exemple(ellipsis)

Younes Derfoufi
CRMEF OUJDA

Leave a Reply

Your email address will not be published. Required fields are marked *