La propriété Text

PythonTechCSS ( cascading style sheets)1 Comment

 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

 

Post Views: 4 320
Acheter sur Très Facile !

1 thought on “La propriété Text”

  1. Ping : Liste des cours CSS | Très Facile !

Leave a Reply