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 :
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 :
