La propriété Text

1 – text-align

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

Exemple  :

//Ce code permet d'aligner tous les paragraphes à droite.

p { text-align:right ; } 

2 – Text-color

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

Exemple :

//cet exemple permet d'écrire toutes les balises h1 en bleu

h1 { color : blue ; }  

3 – text-decoration

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

{ text-decoration: valeur ; }
    valeur = none                   //aucune décoration
    valeur = underline        //texte souligné
    valeur = overline           // ligne au dessus
    valeur = line-through  // texte barré
    valeur = blink              

//texte clignottant ( fonctionne avec Mozilla et Netscape et non pas avec Internet explorer )   

 4 – text-indent

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

Exemple :

p { text-indent: 30px ; }

5 – letter-spacing

Cette propriété permet de spécifier l’espacement entre les caractères.

Exemple :

// espacement normal entre les caractères

p { letter-spacing: normal ; }  

Exemple :

//espacement de 3px entre les caractères

p {
letter-spacing: 3px ;
}

6 – line-height

Cette propriété permet de définir l’espace entre les lignes d’un paragraphe

Exemple :

p{ line-height: 20px ; }

7 – Text-shadow

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

{
text-shadow: valeur1 valeur2 valeur3 couleur;
}

où :

  • valeur1 :  mesure le décalage  de l’ombre horizontalement à droite en pixels
  • valeur2 : mesure le décalage  de l’ombre en bas verticalement en pixels
  • valeur3 : mesure l’épaisseur de l’ombre
  • couleur : couleur de l’ombre

Exemple :

p{
text-shadow:7px 5px 3px black;
}

Ce qui affiche à l’execution :

text-shadow-css

8 – Text-transform

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

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

Exemple :

<html>
<head>


<style>
p{
text-transform:uppercase;
}
</style>

</head>
<body>

Voici un exemple de texte transformé en majuscule
à l'aide de la commande CSS text-transform

</body>
</html>

Ce qui affiche à l’exécution :

text-transform-css

9 – Tutoriel Vidéo