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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/*Ce code permet d'aligner les paragraphes à droite.*/ <!DOCTYPE html> <head> <title>Alignement d'un texte</title> <style> p { text-align:right ; } </style> </head> <body> <p>Texte aligné à droite</p> </body> </html> |
2. La propriété color
C'est une propriété qui sert à personnaliser la couleur du texte
Exemple
|
1 2 |
/*cet exemple permet d'écrire toutes les balises h1 en bleu*/ h1 { color : blue ; } |
On peut aussi utiliser les codes de couleurs:
|
1 2 |
/*colorer toutes les balises h1 en bleu*/ h1 { color : #0000FF ; } |
3. La propriété text-decoration
Cette commande permet de décorer un texte avec une ligne en bas, au dessus, barré...
|
1 |
{ 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 qui clignote
Remarque
La propriété blink fonctionne uniquement avec Mozilla.
Exemple
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <head> <title>Propriété text-decoration</title> </head> <body> <p style="text-decoration: underline red;">Soulignement au dessous</p> <p style="text-decoration: wavy overline blue;">Soulignement au dessus.</p> <p style="text-decoration: line-through;">Texte est barré.</p> <p style="text-decoration: none;">aucun soulignement</p> <p style="text-decoration: dashed underline overline;"> Soulignement en dessous et au dessus.</p> <p style="text-decoration: blink;">Texte qui clignote avec Mozilla.</p> </body> </html> |
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
|
1 |
p { text-indent: 30px ; } |
5. La propriété Text-shadow
Cette commande permet de décorer un texte avec un ombre, la syntaxe est :
|
1 2 3 |
{ 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
|
1 2 3 |
p{ text-shadow:7px 5px 3px black; } |
Exemple complet
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <head> <title>La propriété shadow</title> <style> p{ text-shadow:7px 5px 3px black; } </style> </head> <body> <p>Voici un exemplede texte shadow</p> </body> </html> |
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 :
- 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <head> <style> p{ text-transform:uppercase; } </style> </head> <body> <p> Voici un exemple de texte transformé en majuscule à l'aide de la commande CSS text-transform </p> </body> </html> |
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 |
text-overflow: clip|string|ellipsis|initial|inherit; |
- clip: le texte est tronqué et ne peut être vu! C'est la valeur par défaut
- string: la partie tronquée est représentée à l'aide d'une chaine personnalisable
- ellipsis: la partie tronquée est remplacée par des caractères comme '...'
- initial: définit la propriété à sa valeur par défaut
- inherit: définit la propriété sur la valeur de l'élément parent
Exemple
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <head> <title>Proprié text-overflow CSS </title> <style type="text/css"> div { width: 300px; font-size: 40px; white-space: nowrap; overflow: hidden; text-overflow: clip; } </style> </head> <body> <div>This is a simple example of overflow CSS property</div> </body> </html> |
Vous avez bien remarqué que le texte a été tronqué!
Exemple(ellipsis)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <head> <title>Proprié text-overflow CSS </title> <style type="text/css"> div { width: 300px; font-size: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <div>This is a simple example of overflow CSS property</div> </body> </html> |
Younes Derfoufi
CRMEF OUJDA
