Les feuilles de style

Définitions

Dans un fichier séparé

<link rel="stylesheet" type="text/css" href="monstyle.css">
 

Dans le fichier HTML

<style type="text/css">
   ...
</style>

Dans un élément HTML

<élément style=" ... "> ... </élément>

Polices de caractères

Propriété Signification
font-family Liste des polices de caractères à utiliser comme:Arial, Courier, Helvetica, Times Roman, etc.  
font-style Style de la police. Les valeurs possible sont: italic, oblique, normal
font-variant Variation de la police: small-caps, normal
font-size Grandeur des caractères.  On peut donner cette valeur
  • de façon absolue à l'aide d'une unité appropriée
  • de façon relative en pourcentage de la grandeur de l'élément parent
  • de façon approximative à l'aide des mots-clés suivants: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger.
font-weight Graisse de la police.  Les valeurs possible sont: bold, bolder, lighter, normal, 100 (très fin), 200, 300, 400, 500, 600, 700, 800, 900 (très gras)
font-stretch Étirement de la police de caractère avec des valeurs comme: wider, narrower, condensed, semi-condensed, extra-condensed, ultra-condensed, expanded, semi-expanded, extra-expanded, ultra-expanded, normal.  Cette propriété n'est pas encore supportée par les navigateurs.
font Cette propriété est un résumé des propriétés précédentes.  On peut donner plusieurs valeurs séparées par des blancs et ce dans n'importe quel ordre.
word-spacing Espacement entre les mots.  On donne une valeur absolue à l'aide d'une unité appropriée.
letter-spacing Espacement entre les caractères.  On donne une valeur absolue à l'aide d'une unité appropriée.
text-decoration Décoration du texte.  Les valeur possibles sont: underline, overline, line-through, blink, none.
text-transform Transformation du texte.  Les valeurs possibles sont: capitalize, uppercase, lowercase, none.
color Couleur du texte.  On peut utiliser n'importe quelle mention de couleur.
text-shadow Création d'un effet d'ombrage.  On peut utiliser n'importe quelle mention de couleur.  Cette propriété n'est pas encore supportée par les navigateurs.

On peut aussi contrôler le formatage du texte avec un fichier de police de caractère.

Paragraphe

Propriété Signification
text-indent Application d'un retrait à la première ligne d'un paragraphe.  Une valeur négative est acceptée.
line-height Valeur de l'interligne en numérique.
vertical-align Alignement vertical du texte.  Les valeurs possibles sont: top, middle, bottom, baseline, sub, super, text-top, text-bottom.
text-align Alignement horizontal du texte.  Les valeurs possibles sont: left, center, right, justify.
white-space Spécification de la césure.  Les valeurs possibles sont: normal, pre, nowrap.

Marges

Propriété Signification
margin-top Marge du haut en numérique
margin-bottom Marge du bas en numérique
margin-left Marge de gauche en numérique
margin-right Marge de droite en numérique
margin Marge en général.  La signification dépend du nombre de valeurs fournies.
  1. Les quatre marges auront cette valeur.
  2. Le haut et le bas auront la première valeur et la gauche et la droite la deuxième.
  3. La première valeur pour le haut, la deuxième pour la droite et la gauche et la dernière pour le bas.
  4. La première valeur pour le haut, la deuxième pour la droite, la troisième pour le bas et la dernière pour la gauche.

Remplissage intérieur

Propriété Signification
padding-top Espacement entre la limite supérieure d'un élément et son contenu.  On donne une valeur numérique.
padding-bottom Espacement entre le contenu d'un élément et sa limite inférieur en numérique.
padding-left Espacement entre la limite gauche d'un élément et son contenu en numérique.
padding-right Espacement entre le contenu d'un élément et sa limite droite en numérique.
padding Espacement entre le contenu d'un élément et ses quatre limites.

Bordure

Propriété Signification
border-top-width
border-left-width
border-right-width
border-bottom-width
Épaisseur de la bordure en numérique ou en utilisant: thin, medium, thick.
border-width Épaisseur des bordures.  Selon le nombre de valeurs mentionnées on aura:
  1. Les quatre bordures sont pareilles.
  2. La première valeur sera pour le haut et le bas et l'autre pour la gauche et la droite.
  3. La première valeur sera pour le haut, la deuxième pour la gauche et la droite et la dernière pour le bas.
  4. La première valeur sera pour le haut, la deuxième pour la droite, la troisième pour le bas et la dernière pour la gauche.
border-top-color
border-left-color
border-right-color
border-bottom-color
Couleur de la bordure.
border-color Même remarque que pour border-width.
border-top-style
border-left-style
border-right-style
border-bottom-style
Décoration de la bordure.  Les valeurs possibles sont: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
border-style Même remarque que pour border-width.
border-top
border-left
border-right
border-bottom
Bordure en général.  On donne les caractéristiques de la bordure séparées par des espaces et dans un ordre quelconque.
border Bordure en général.  Les quatre bordures auront les mêmes caractéristiques.

Arrière-plan

Propriété Signification
background-color Couleur de l'arrière-plan
background-image Image d'arrière-plan utilisée comme papier peint.  Si l'image est trop petite elle sera répétée soit horizontalement, soit verticalement, soit les deux.  Si, par contre elle est trop grande elle sera coupée à la grandeur voulue.  Pour spécifier le fichier utilisez la syntaxe suivante: url(...fichier...)
background-repeat Mode de répétition de l'image d'arrière-plan.  Les valeurs possibles sont: repeat, repeat-x, repeat-y, no-repeat.
background-attachment Effet de filigrane.  Les valeurs possibles sont: scroll, fixed.
background-position Position du coin supérieur gauche de l'image d'arrière-plan.  On peut fournir deux coordonnées numériques ou utiliser les valeurs suivantes: top, center, middle, bottom, left, right.
background Résumé des valeurs précédentes.

Listes

Propriété Signification
list-style-type Type de liste.  Les valeurs possibles sont: decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-latin, upper-latin, disc, circle, square, none.  Il existe en plus: lower-greek, hebrew, decimal-leading-zero, cjk-ideographic, hirigana, katakana, hiragana-iroha, katakana-iroha.
list-style-position Retrait par rapport à la liste.  Les valeurs possibles sont: inside, outside.
list-style-image Image à utiliser au lieu des puces.  url(...)
list-style Résumé des propriétés précédentes.

Tableaux

Propriété Signification
caption-side Position du titre du tableau.  Les valeurs possibles sont: top, bottom, left, right.
table-layout Respect des largeurs spécifiées au moyen de l'attribut WIDTH.  Les valeurs possibles sont: fixed, auto.
border-collapse Coïncidence des bordures des cellules.  Les valeurs possibles sont: separate, collapse.
border-spacing Espacement entre les bordures des cellules en numérique.
empty-cells Affichage des cellules vides.  Les valeurs possibles sont: show, collapse.

Les pseudo-formats

Pseudo-format Signification
:link pour les liens non encore visités
:visited pour les liens déjà visités
:hover pour le lien sur lequel on passe le curseur de la souris
:active pour le lien sur lequel on clique
:focus pour le lien qui a le focus lors d'une recherche par tabulation
:first-line la première ligne de l'élément
:first-letter la première lettre de l'élément
:first-child le premier élément enfant
:before Texte à insérer avant l'élément
:after Texte à insérer après l'élément

Positionnement et affichage

Propriété Signification
position Mode de positionnement.  Les valeurs possibles sont: absolute, fixed, relative, static.
top Position à partir du haut en numérique.
left Position à partir de la gauche en numérique.
bottom Position à partir du bas en numérique.
right Position à partir de la droite en numérique.
width Largeur en numérique
min-width Largeur minimale
max-width Largeur maximale
height Hauteur
min-height Hauteur minimale
max-height Hauteur maximale
overflow Comportement pour les contenu trop volumineux.  Les valeurs possibles sont: visible, hidden, scroll, auto.
direction Direction de l'écriture.  Les valeurs possibles sont: ltr, rtl.
float Flottement de l'élément.  Les valeurs possibles sont: left, right, none.
clear Suite du texte après un float.  Les valeurs possibles sont: left, right, both, none
z-index Position de la couche en cas de superposition.  On donne un nombre arbitraire en relation avec les autres couches.
display Mode d'affichage.  Les valeurs possibles sont: block, inline, list-item, marker, run-in, compact, none.
visibility Visibilité de l'élément.  Les valeurs possibles sont: hidden, visible.
clip Limites de l'affichage. Par exemple: clip:rect(haut, droite, bas, gauche). Si on emploi le mot auto pour une ou plusieurs des valeurs numériques, cela signifie de ne pas couper l'élément.

Fenêtre d'affichage

Propriété Signification
cursor Type de curseur.  Les valeurs possibles sont: auto, default, crosshair, pointer, move, n-resize, ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw-resize, text, wait, help, url(...)
scrollbar-base-color Couleur de base
scrollbar-3dlight-color Couleur des effets 3D
scrollbar-arrow-color Couleur des pointeurs de défilement
scrollbar-darkshadow-color Couleur des ombrages
scrollbar-face-color Couleur de la surface
scrollbar-highlight-color Couleur pour les bords gauche et haut
scrollbar-shadow-color Couleur pour les bords droit et bas
scrollbar-track-color Couleur pour la barre de défilement non cachée par le pointeur de défilement.