En CSS, il est bien pratique de mettre en forme un texte et le définir une seule fois dans sa feuille de style.
- color: Gestion de la couleur du texte
- letter-spacing: Espace entre les lettres
- text-align: Alignement d'un texte
- text-decoration: Habillement d'un texte
- text-indent:Espace avant un texte
1. Couleur
Vous pouvez fixer la couleur d'un texte comme suivant :
color: valeur;
Les différentes valeurs sont :
-
Nom de la couleur - exemple:(red, black...)
-
Nombre hexadecimal - exemple:(#ff0000, #000000)
-
Code RGB - exemple:(rgb(255, 0, 0), rgb(0, 0, 0))
2. Espace entre les lettres
Vous pouvez ajuster les espaces entre les lettres dans un texte.
Vous pouvez mettre une valeur négative.
letter-spacing: valeur;
Les valeurs possibles sont :
3. Alignement d'un texte
Vous pouvez ajuster la position d'un texte
text-align: valeur;
Les valeurs possibles sont :
- Gauche
- droite
- centre
- justifié
4. Décoration du texte
Vous pouvez habiller (barré, souliger...) un texte comme suivant :
text-decoration: valeur;
Les valeurs possibles sont :
- none (rien)
- underline (souligner
- overline (ligne au dessus)
- line through (barrer)
- blink (clignoter)
5. Espace avant un texte
Vous laisser un espace avant un texte comme suivant :
text-indent: valeur;
Les valeurs possibles sont :
- valeur : en px
- valeur : pourcentage
Exemple:
1. Ouvrir l'éditeur de texte.
Si vous utilisez Notepad++, pensez à aller dans le menu "Langage / CSS" pour activer la coloration du CSS. Vous penserez à enregistrer votre fichier en .css au lieu de .html.
2. Créons un modèle de texte
Cette page sera un fichier CSS nommée: styles_polices2.css
#police {
color: #0000FF;
letter-spacing: 0.3em;
text-align: center;
text-decoration: underline;
}
3. Ecrire les codes Html suivants dans le fichier polices.htm
Pour inclure notre CSS dans notre page HTML, il nous suffit d'insérer le code suivant entre les balises <head> et </head>:
<link rel="stylesheet" type="text/css" href="styles_polices2.css">, pour indiquer le chemin du fichier styles_polices2.css
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<link href="styles_polices2.css" rel="stylesheet" type="text/css">
<title>Positionnement CSS</title>
</head>
<body>
<div id="police">Ceci est une police de couleur bleu, un espacement de 0.3em, un alignement centré et une décoration soulignée
</div>
</body>
</html>