CSS – Mise en forme du texte
Couleurs et arrières-plans
La couleur d’avant-plan : la propriété ‘color’
La propriété color décrit la couleur d’avant-plan d’un élément.
Par exemple, les titres rouge foncé. h1.
h1 { color: #ff0000; }
La propriété ‘background-color’
La propriété background-color décrit la couleur d’arrière-plan.
Pour changer la couleur d’arrière-plan d’une page entière, il faudrait l’ appliquer à l’élément body.
Exp: Les couleurs d’arrière-plan différentes sont appliquées aux éléments body et h1.
body { background-color: #FFCC66; }
h1 { color: #990000;
background-color: #FC9804; }
Les images d’arrière-plan [background-image]
background-image : insérer une image d’arrière-plan.
body
{ background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1
{ color: #990000;
background-color: #FC9804;
}
Répéter l’image d’arrière-plan [background-repeat]
Le tableau décrit les quatre valeurs différentes de background-repeat.
| Valeur | Description |
| Background-repeat: repeat-x | L’image se répète horizontalement |
| background-repeat: repeat-y | L’image se répète verticalement |
| background-repeat: repeat | L’image se répète horizontalement et verticalement |
| background-repeat: no-repeat | L’image ne se répète pas |
Pour éviter la répétition d’une image d’arrière-plan:
body
{
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1
{
color: #990000;
background-color: #FC9804;
}
background-attachment: pour fixer ou défiler l’image d’arrière-plan avec l’élément conteneur.
| Valeur | |
| Background-attachment: scroll | |
| Background-attachment: fixed |
La famille de polices [font-family]
font-family : indique la liste prioritaire des polices à utiliser pour l’affichage d’un élément donné ou d’une page Web. Si la première police de la liste n’est pas disponible sur l’ordinateur utilisé pour accéder au site, la police suivante est essayée et ainsi de suite.
La différence entre les polices :
On commence par la police préférée suivie par des polices de remplacement.
Il est recommandé de terminer la liste par une famille générique. Ainsi, la page s’affichera au moins avec une police de la même famille si aucune des polices indiquées n’était disponible.
Exp :
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Le style des polices [font-style]
La propriété font-style définit le style de la police concernée être normal, italic ou oblique.
Exp:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;
font-style: italic;}
La propriété font-variant sert à choisir entre les variantes normal ou small-caps d’une police.
Une police small-caps utilise des lettres en capitales de taille réduite à la place des lettres en minuscules.
Exp :
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
La graisse des polices [font-weight]
Font-weight décrit le degré de graisse de la police. Elle peut avoir une graisse normal ou bold.
Exp:
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif;
font-weight: bold;}
Le corps des polices [font-size]
Le corps d’une police se règle par la propriété font-size.
On peut choisir parmi beaucoup d’unités différentes (par exemple, pixels et pourcentages) pour décrire les corps des polices.
Exp :
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Il existe une différence essentielle entre les quatre unités précédentes. Les unités « px » et « pt » font que le corps de la police est absolu, tandis que « % » et « em » permettent à l’utilisateur de l’ajuster si nécessaire. Il est souhaitable utiliser des unités ajustables telles que « % » ou « em ».
Concision [font]
Avec la propriété raccourcie font, il est possible de couvrir toutes les différentes propriétés de police en un coup.
Exp:
p { font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif; }
Avec la propriété raccourcie, on peut simplifier le code :
p { font: italic bold 30px arial, sans-serif; }
L’ordre des valeurs de la propriété font est le suivant :
font-style | font-variant | font-weight | font-size | font-family
L’indentation du texte [text-indent]
La propriété text-indent permet d’ajouter une touche d’élégance aux paragraphes de texte en appliquant une indentation à la première ligne du paragraphe.
Exp:
p { text-indent: 30px; }
L’alignement du texte [text-align]
La propriété CSS text-align correspond à l’attribut align utilisé dans le HTML. Le texte peut être aligné à gauche (left), à droite (right) ou centré (center). La valeur justify étirera chaque ligne de sorte que les marges à gauche et à droite soient droites toutes les deux.
Exp:
th { text-align: right; }
td { text-align: center; }
p { text-align: justify; }
La décoration du texte [text-decoration]
La propriété text-decoration permet d’ajouter des « effets » différents au texte. Par exemple, on peut souligner le texte, le barrer, ou tracer un trait au-dessus.
Exp:
h1 { text-decoration: underline; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
L’espacement des lettres [letter-spacing]
L’espacement entre les caractères du texte peut être défini avec la propriété letter-spacing. La valeur de la propriété est celle de l’espacement désiré.
Exp:
h1 { letter-spacing: 6px; }
p { letter-spacing: 3px; }
La transformation du texte [text-transform]
La propriété text-transform contrôle la capitalisation du texte. On peut choisir une capitalisation initiale, une mise en majuscules ou une mise en minuscules, indépendamment de l’aspect du texte original dans le code HTML.
Exp: le mot « titre » que l’on peut présenter à l’utilisateur comme « TITRE » ou « Titre ».
La propriété text-transform admet quatre valeurs possibles :
Capitalize: Elle capitalise la première lettre de chaque mot.
Uppercase: Elle convertit toutes les lettres en majuscules.
Lowercase: Elle convertit toutes les lettres en minuscules.
None: Aucune transformation n’est appliquée.
Exp:
h1 { text-transform: uppercase; }
li { text-transform: capitalize; }