La couleur du texte peut être définie avec color. Une valeur de couleur est attendue.
p {
color: red;
}Vous pouvez spécifier des mots de couleur ou une valeur de couleur hexadécimale comme valeur.
Définir la direction de l'écriture
Avec la propriété direction, vous pouvez forcer la direction de l'écriture des éléments. La direction de l'écriture inverse est intéressante en relation avec les langues qui s'écrivent de droite à gauche.
De plus, cela permet de déterminer de quel côté les contenus surdimensionnés sont coupés avec un débordement.
• ltr - de gauche à droite
• rtl - de droite à gauche
L'exemple suivant montre comment utiliser cette propriété.
.normal {direction:ltr;}
.rueckwaerts {direction:rtl;}
Deux classes ont été définies ici.
<p class="normal">Texte écrit de gauche à droite. 1 2 3 4 5 6 7 8 9 0</p> <p class="rueckwaerts">Texte écrit de droite à gauche. 1 2 3 4 5 6 7 8 9 0</p>
Le résultat dans le navigateur ressemble à ceci :
Alignement horizontal des textes
Avec la propriété text-align, l'alignement horizontal des paragraphes de texte et autres éléments de texte en blocs ou éléments en ligne contenus est défini. La valeur par défaut est un alignement à gauche.
• left - alignement à gauche
• right - alignement à droite
• center - centré
• justify - justifier le texte
Voici un exemple :
<p style="text-align:right;">
Bienvenue
</p>
Le rendu est le suivant :
Alignement vertical
Avec la propriété vertical-align, l'alignement vertical du texte dans une ligne par rapport à la hauteur de ligne est déterminé. La spécification se réfère toujours à l'élément parent, qui doit être un élément en ligne. De plus, le texte peut être aligné dans les tableaux.
Les valeurs suivantes sont disponibles:
.baseline {
vertical-align: baseline;
}
Remarquez que les valeurs de vertical-align sont interprétées de manière assez inégale par les différents navigateurs. Vous devriez donc absolument tester les résultats avant de publier les pages en ligne.
Définir la décoration du texte
text-decoration est utilisé pour attribuer des propriétés supplémentaires aux textes ou hyperliens.
• none - aucune décoration de texte
• underline - souligné
• overline - sur ligné
• line-through - barré
• blink - clignotant
Voici un exemple:
a:link {
text-decoration: none;
}
Cela retire les soulignements des liens de la page.
Vous pouvez également déterminer explicitement l'espacement entre les mots.
<span style="word-spacing:0.5em">Bienvenue sur PSD-Tutorials.de!</span><br /> <span style="word-spacing:1em">Bienvenue sur PSD-Tutorials.de!</span>
Une valeur numérique est attendue. Les pourcentages ne sont pas pris en charge. Similaire à word-spacing, letter-spacing permet de définir l'espacement entre les lettres d'un texte. Des valeurs numériques sont également utilisées ici, mais pas en pourcentage.
<span style="letter-spacing:0.1em">Texte d'exemple avec un espacement de 0.1em entre les caractères</span><br> <span style="letter-spacing:0.3em">Texte d'exemple avec un espacement de 0.3em entre les caractères</span><br>
Avec la propriété text-transform, vous pouvez déterminer si le texte doit être en majuscules ou en minuscules. Et ce, indépendamment de la notation effective dans le code source. Vous pouvez également forcer des petites capitales.
• lowercase - minuscules
• uppercase - majuscules
• capitalize - les débuts de mots en majuscules
• none - aucune transformation du texte
Exemple:
.klein {
text-transform: lowercase;
}Im Browser sieht das Ergebnis folgendermaßen aus:
Espaces et sauts de ligne
Avec la propriété white-space, on définit comment les espaces et les sauts de ligne présents dans le texte source doivent être affichés dans le navigateur.
• normal - un saut de ligne automatique est inséré. De plus, plusieurs espaces sont regroupés en un seul.
• pre - Les sauts de ligne sont affichés comme ils sont dans le texte source.
• nowrap - aucun saut de ligne automatique n'est effectué.
• pre-line - plusieurs espaces sont regroupés en un seul. De plus, un saut de ligne est fait si la boîte d'affichage n'est pas assez grande.
• pre-wrap - un saut de ligne est fait si la boîte d'affichage n'est pas assez grande.
Un exemple à ce sujet :
<pre class="brush:xml;"><!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Absatz 1</p>
<p>Absatz 2</p>
<p>Absatz 3</p>
<div>
<p>Absatz 4</p>
</div>
</body>
</html></pre>Im Browser sieht das folgendermaßen aus:
Mise en place d'une ombre
Avec la propriété text-shadow, on peut forcer une ombre sur du texte. Notez que cette propriété est prise en charge uniquement par les navigateurs relativement récents. Les navigateurs qui ne peuvent pas interpréter text-shadow affichent le texte sans ombre.text-shadow est utilisé comme suit :
text-shadow: hV vV blur #xxxxxx;
Et voici ce que signifient les valeurs :
• hV - Décalage horizontal
• vV - Décalage vertical
• blur - Flou
• #xxxxxx - La couleur de l'ombre
L'exemple suivant montre une application typique de text-shadow.
.schatten {
color: #444;
font-size: 34px;
text-shadow: 2px 2px 3px #333;
}
La classe définie est ensuite appliquée à un titre de premier niveau.
<h1 class="schatten">PSD-Tutorials.de</h1>
Et encore une fois, voici le résultat :
Comme décrit précédemment, vous pouvez utiliser text-shadow sans problème, car une non-interprétation par les navigateurs n'a pas d'effets négatifs. Le texte sera simplement affiché sans ombre.
