CSS du texte
LE FORMATAGE DU TEXTE
Ce texte est stylé avec quelques-unes des propriétés de formatage de texte. Le titre utilise le text-align, text-transform, et les propriétés de couleur. Le paragraphe est en retrait, aligné, et l'espace entre les caractères est spécifié. Le trait de soulignement est supprimé de la "Essayez vous-même" lien.
Couleur du texte
La propriété de couleur est utilisé pour définir la couleur du texte.
Avec CSS, une couleur est le plus souvent indiquée par:
- une valeur HEX - comme "# FF0000"
- une valeur RVB - comme "rgb (255,0,0)"
- un nom de couleur - comme "rouge"
Regardez les valeurs de couleur CSS pour une liste complète des valeurs de couleur possibles.
La couleur par défaut pour une page est définie dans le sélecteur de corps.
Pour le W3C CSS conforme: Si vous définissez la propriété de couleur, vous devez également définir la propriété background-color.Alignement du texte
La propriété text-align est utilisée pour définir l'alignement horizontal d'un texte.
Le texte peut être centré ou aligné à gauche ou à droite ou justifié.
Lorsque text-align est réglé à "justifier", chaque ligne est étirée de telle sorte que chaque ligne a une largeur égale, et les marges gauche et droite sont droites (comme dans les magazines et journaux).
Exemple
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
p.date {text-align:right;}
p.main {text-align:justify;}
Essayez vous-même »
Décoration du texte
La propriété text-decoration est utilisée pour définir ou supprimer des décorations à partir du texte.
La propriété text-decoration est surtout utilisé pour supprimer le soulignement des liens à des fins de conception:
Il peut également être utilisé pour décorer le texte:
Exemple
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
Essayez vous-même »
Il est recommandé de ne pas souligner le texte qui n'est pas un lien, car cela confond souvent les utilisateurs.La transformation du texte
La propriété text-transform est utilisé pour spécifier des lettres majuscules et minuscules dans un texte.
Il peut être utilisé pour tout transformer en lettres majuscules ou minuscules, ou majuscule la première lettre de chaque mot.
Exemple
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Essayez vous-même »
Retrait du texte
La propriété text-indentation est utilisé pour spécifier l'indentation de la première ligne d'un texte.
Exemples
Spécifiez l'espace entre les caractères
Cet exemple montre comment augmenter ou diminuer l'espace entre les caractères.
Cet exemple montre comment augmenter ou diminuer l'espace entre les caractères.
Spécifiez l'espace entre les lignes
Cet exemple montre comment spécifier l'espace entre les lignes d'un paragraphe.
Cet exemple montre comment spécifier l'espace entre les lignes d'un paragraphe.
Définissez le sens du texte d'un élément
Cet exemple montre comment modifier l'orientation du texte d'un élément.
Cet exemple montre comment modifier l'orientation du texte d'un élément.
Augmenter l'espace blanc entre les mots
Cet exemple montre comment augmenter l'espace blanc entre les mots dans un paragraphe.
Cet exemple montre comment augmenter l'espace blanc entre les mots dans un paragraphe.
Désactiver l'habillage du texte dans un élément
Cet exemple montre comment désactiver l'habillage du texte dans un élément.
Cet exemple montre comment désactiver l'habillage du texte dans un élément.
L'alignement vertical d'une image
Cet exemple montre comment définir l'alignement vertical d'une image dans un texte.
Cet exemple montre comment définir l'alignement vertical d'une image dans un texte.
Toutes les propriétés de texte CSS
| Propriété | Description |
|---|---|
| couleur | Définit la couleur du texte |
| direction | Spécifie le texte de direction / direction de l'écriture |
| letter-spacing | Augmente ou diminue l'espace entre les caractères dans un texte |
| la hauteur de ligne | Définit la hauteur de la ligne |
| texte-aligner | Spécifie l'alignement horizontal du texte |
| text-decoration | Spécifie la décoration ajoutée au texte |
| text-indent | Spécifie l'indentation de la première ligne dans un texte-bloc |
| text-shadow | Indique l'effet d'ombre a ajouté au texte |
| texte-transformer | Contrôle la casse du texte |
| unicode-bidi | |
| vertical-align | Définit l'alignement vertical d'un élément |
| espace blanc | Indique comment white-space intérieur d'un élément est géré |
| word-spacing | Augmente ou diminue l'espace entre les mots dans un texte |
0 commentaires:
Post a Comment
HELLO VISITORS THANKS FOR YOUR VISIT AND COMMENT