TUTORIEL
FEUILLES DE STYLES
(Cascading Style Sheets)
Ce premier paragraphe illustre le style para1 défini précédement dans la section <HEAD> de cette page.
Ce deuxième paragraphe devrait être indenté de 2cm de plus que le précédent et représente le style para2 de la page. Dans certains cas c'est plus simple de faire la présentation du texte avec un style plutôt que d'utiliser les listes pour indenter et en plus on peut définir tous les autres éléments du style de texte.
Ce paragraphe, para3, reçoit une indentation de 6cm à gauche et 6cm à droite et est en italique - il pourrait servir pour une citation, par exemple. Notez aussi que la taille du texte est définie à 12 points (12pt) plutôt que 12 pixels (12px) - c'est préferable quand on est habitué à travailler en points - dans ce cas, 12pt semble un peu plus gros que 14px.
Voici un tableau illustrant le nom des couleurs que vous pouvez utiliser en créant les classes:
| Black |
Maroon |
Green |
Olive |
| Navy |
Purple |
Teal |
Gray |
| Silver |
Red |
Lime |
Yellow |
| Blue |
Fuchsia |
Aqua |
White |
| Brown |
Orange |
Magenta |
Gold |
Voici maintenant un tableau des propriétés utilisées pour définir les styles:
| Style Sheet
Definitions Quick Reference |
| Attribute |
Description |
Values |
Example |
| font-size |
Sets size of text. |
points (pt)
inches (in)
centimeters (cm)
pixels (px) |
{font-size: 12pt} |
| font-family |
Sets typeface. |
typeface name
font family name |
{font-family: courier} |
| font-weight |
Sets thickness of type. |
extra-light
light
demi-light
medium
demi-bold
bold
extra-bold |
{font-weight: bold} |
| font-style |
Italicizes text. |
normal
italic |
{font-style: italic} |
| line-height |
Sets the distance between
baselines. |
points (pt)
inches (in)
centimeters (cm)
pixels (px)
percentage (%) |
{line-height: 24pt} |
| color |
Sets color of text. |
color-name
RGB triplet |
{color: blue} |
| text-decoration |
Underlines or otherwise
highlights text. |
none
underline
italic
line-through |
{text-decoration: underline} |
| margin-left |
Sets distance from left edge of
page. |
points (pt)
inches (in)
centimeters (cm)
pixels (px)* |
{margin-left: 1in} |
| margin-right |
Sets distance from right edge of
page. |
points (pt)
inches (in)
centimeters (cm)
pixels (px)* |
{margin-right: 1in} |
| margin-top |
Sets distance from top edge of
page. |
points (pt)
inches (in)
centimeters (cm)
pixels (px)* |
{margin-top: -20px} |
| text-align |
Sets justification. |
left
center
right |
{text-align: right} |
| text-indent |
Sets distance from left margin. |
points (pt)
inches (in)
centimeters (cm)
pixels (px)* |
{text-indent: 0.5in} |
| background |
Sets background images or colors.
|
URL,
color-name
RGB triplet |
{background: #33CC00} |
On peut définir ses propres styles d'entêtes au lieu d'utiliser H1..H6 du HTML
Ceci est un H1 ordinaire de HTML
Ceci est mon style H1
Pour assigner un style à un élément de texte on utilise le tag
<DIV> et on nomme le style avec le paramètre
class= comme ceci:
Pour décrire les styles on utilise le tag <STYLE> .... </STYLE> dans la section <HEAD> de la page.
La liste des propriétés est assez longue; vous voyez les principales dans les exemples ci-haut et nous en étudierons plusieurs autres au cours des prochaines leçons. Cependant, si vous utilisez un éditeur HTML vous pouvez toujours consulter la fonction "Aide" du logiciel pour en apprendre davantage.
Il y a 3 façons de définir les styles:
- Style en ligne: le style est défini dans l'élément de texte lui-même - ceci n'est pas d'une grande utilité.
- Feuille de styles globale: c'est ce qui est décrit içi - les styles sont décrits au début de la page, dans l'entête, et sont utilisés par tous les éléments de la page - c'est la façon la plus commune.
- Feuille de styles liée: la feuille de style est stockée dans un fichier séparé qui porte l'extension .css - le lien est décrit au début de la page comme:
<LINK REL="stylesheet" TYPE="text/css" HREF="styles.css">
ceci a l'avantage que les styles qu'on a créé sont disponibles à toutes les pages du site sans avoir à les recréer à chaque page. Le fichier .css ne doit contenir aucun codes HTML (même pas les tags <STYLE> ... </STYLE>) - il ne contient que les commandes de mise en page.
Accueil
