On utilise les conventions suivantes :
{propriété : valeur1 | valeur2 | valeur3} :
propriété peut prendre l'une des trois valeurs,
{propriété : [valeur1 | valeur2 | valeur3]{1,4}} :
propriété peut prendre l'une des trois valeurs de un à quatre
fois,
{propriété : <valeur>} : propriété
peut prendre une valeur représentée par valeur,
{propriété : valeur1 || valeur2 || valeur3} : Les
valeurs valeur1, valeur2 et valeur3 peuvent
être présentes simultanément.
Voici une liste des propriétés que l'on peut fixer en CSS1 :
Spécifie si l'image reste fixe avec les déplacements d'écran
(scroll par défaut).
Syntaxe : scroll | fixed
Exemple :
BODY { background: red url(pendant.gif); background-attachment:
fixed }
Couleur du fond d'écran (transparent par défaut).
Syntaxe : <color> | transparent
Exemple : H1 { background-color: #F00 }
Image de fond d'écran (none par défaut).
Syntaxe : <url> | none
Exemple : BODY { background-image: url(ungi.gif)}
Position de l'image de fond par rapport au coin supérieur gauche de la
fenêtre (0%,0% par défaut).
Syntaxe :
[<pourcentage>|<longueur>]{1,2} |
[top|center|bottom] ||
[left|center|right]
Exemple :
BODY { background: url(http://www.ungi.com/banner.jpg) right top }
Façon de répéter l'image du fond de l'écran (repeat par défaut).
repeat-x et repeat-y permettent respectivement de
répéter une image horizontalement et verticalement.
Syntaxe : repeat | repeat-x | repeat-y | no-repeat
Exemple :
BODY { background-image: url(ungi.gif); background-repeat: repeat-y }
Regroupe les différentes propriétés de fond d'écran.
Syntaxe :
<background-color> ||
<background-image> ||
<background-repeat> ||
<background-attachment> ||
<background-position>
Exemple :
P { background: url(hess.gif) green 50% repeat fixed }
Regroupe toutes les propriétés des bordures basses: épaisseur, style et couleur.
Syntaxe : <border-top-width> ||
<border-style> || <couleur>
Exemple : H1 { border-bottom: thick solid red }
Épaisseur du bord supérieur (medium par défaut).
Syntaxe : thin | medium | thick |
<longueur>
Exemple : H1 { border-bottom-width: 0.5em }
Couleur des bordures (black par défaut).
Syntaxe : <couleur>{1,4}
Exemple : H1 { border-color: red }
Regroupe toutes les propriétés des bordures gauches: épaisseur, style et couleur.
Syntaxe : <border-top-width> ||
<border-style> || <couleur>
Exemple : H1 { border-left: thick solid red }
Épaisseur du bord gauche (medium par défaut).
Syntaxe : thin | medium | thick |
<longueur>
Exemple : H1 { border-left-width: 0.5em }
Regroupe toutes les propriétés des bordures droites: épaisseur, style et couleur.
Syntaxe : <border-top-width> ||
<border-style> || <couleur>
Exemple : H1 { border-right: 1em }
Épaisseur du bord droit (médium par défaut).
Syntaxe : thin | medium | thick |
<longueur>
Exemple : H1 { border-rigth-width: 0.5em }
Donne le style de la ligne de remplissage de la bordure (none
par défaut).
Syntaxe : none | dotted | dashed | solid | double |
groove | ridge | inset | outset
Exemple : #xy34 { border-style: solid dotted }
Regroupe toutes les propriétés des bordures hautes : épaisseur, style et couleur.
Syntaxe : <border-top-width> ||
<border-style> || <couleur>
Exemple :H1 { border-top: thick }
Épaisseur du bord haut (médium par défaut).
Syntaxe : thin | medium | thick |
<longueur>
Exemple : H1 { border-top-width: 0.5em }
Regroupe les différentes propriétés de border-width en une ligne
(medium par défaut).
Syntaxe : [thin | medium | thick |
<longueur>]{1,4}
Exemple : H1 { border-width: thin }
Regroupe toutes les propriétés des bordures.
Syntaxe : <border-width> || <border-style>
|| <color>
Exemple : P { border: solid red }
Permet à un élément d'être positionné sur le côté spécifié
(none par défaut).
Syntaxe : none | left | right | both
Exemple : H1 { clear: left }
Couleur d'un texte (black par défaut).
Syntaxe : <couleur>
Exemple :
P { color: red }
EM{color:rgb(255,0,0)}
EM { color: #f00 }
Spécifie où l'élément est affiché (none par défaut).
Syntaxe : block | inline | list-item | none
Exemple : P { display: block }
Positionne l'élément là où il apparaît ou à gauche ou à droite
(none par défaut).
Syntaxe : left | right | none
Exemple : IMG.icon { float: left; margin-left: 0;
}
Nom et famille de la police.
Syntaxe : [[<nom> | <famille>],*]
Exemple : BODY {font-family: gill, helvetica, sans-serif}
Taille de la police.
Syntaxe :
<xx-small | x-small | small | medium | large | x-large | xx-large> | <larger | smaller> | <taille> | <pourcentage%>
Exemple :
P { font-size: 12pt};
BLOCKQUOTE {font-size: larger};
EM {font-size:150%};
I {font-size:1.5em};
Style de la police (normal, italique et oblique).
Syntaxe : normal | italic | oblique
Exemple : H1, H2, H3 {font-style: italic}
Style petites polices ou normal (normal par défaut).
Syntaxe : normal | small-caps
Exemple: : H3 {font-variant: small-caps}
Épaisseur de la police (normal par défaut).
Syntaxe :
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Exemple : EM {font-weight: bolder}
Regroupe les différentes propriétés de polices en une ligne.
Syntaxe :
[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Exemple :
P { font: 12pt/14pt sans-serif };
P { font: 80% sans-serif };
P { font: x-large/110% "new century schoolbook", serif };
P { font: bold italic large Palatino, serif };
P { font: normal small-caps 120%/120% fantasy };
Donne la longueur d'un élément texte ou image (auto par
défaut).
Syntaxe : <longueur> | auto
Exemple : IMG.icon { height: 100px }
Distance d'espacement entre caractères (normal par défaut).
Syntaxe : normal | <length>
Exemple : EM { letter-spacing: 0.1em }
Espace entre deux lignes adjacentes (normal par défaut).
Syntaxe : normal | <nombre> | <longueur>
| <pourcentage>
Exemple : DIV { line-height: 1.2; font-size: 10pt
}
Permet de remplacer les types de numérotation de list-style-type par une
image (none par défaut).
Syntaxe : <url> | none
Exemple : UL { list-style-image: url(ungi.gif) }
Définit le type de numérotation, de bullet dans les listes
(disc par défaut).
Syntaxe :
disc | circle | square | decimal |
lower-roman | upper-roman |
lower-alpha | upper-alpha |
none
Exemple : OL { list-style-type: lower-roman }
Spécifie si les bullets ou numérotation ou images sont à l'intérieur ou
à l'extérieur du texte (outside par défaut).
Syntaxe : inside | outside
Exemple : UL { list-style-position: outside }
Permet de regrouper les différentes catégories de list-style.
Syntaxe :
(disc | circle | square | decimal |
lower-roman | upper-roman |
lower-alpha | upper-alpha |
none) ||
<url> | none || inside | outside
Exemple : UL { list-style: upper-roman inside }
Valeur de la marge basse (auto par défaut).
Syntaxe : <longueur> | <pourcentage> |
auto
Exemple : H1 { margin-bottom: 3px }
Valeur de la marge gauche (auto par défaut).
Syntaxe : <longueur> | <pourcentage> |
auto
Exemple : H1 { margin-left: 3px }
Valeur de la marge droite (auto par défaut).
Syntaxe : <longueur> | <pourcentage> |
auto
Exemple : H1 { margin-rigth: 3px }
Valeur de la marge haute (auto par défaut).
Syntaxe : <longueur> | <pourcentage> |
auto
Exemple : H1 { margin-top: 3px }
Regroupe les différentes propriétés de marge en une ligne.
Syntaxe : [ <longueur> | <pourcentage> |
auto ]{1,4}
Exemple : BODY { margin: 1em 2em 3em }
Valeur de remplissage bas (0 par défaut).
Syntaxe : <longueur> | <pourcentage>
Exemple : H1 { padding-bottom: 3px }
Valeur de remplissage gauche (0 par défaut).
Syntaxe : <longueur> | <pourcentage>
Exemple : H1 { padding-left: 3px }
Valeur de remplissage droit (0 par défaut).
Syntaxe : <longueur> | <pourcentage>
Exemple : H1 { padding-right: 3px }
Valeur de remplissage haut (0 par défaut).
Syntaxe : <longueur> | <pourcentage>
Exemple : H1 { padding-top: 3px }
Regroupe les différentes propriétés de padding en une ligne (0
par défaut).
Syntaxe : [<longueur> |
<pourcentage>]{1,4}
Exemple : H1 { padding: 1em 2em }
Place le texte à gauche, à droite, au centre ou le justifie (la valeur par défaut dépend du navigateur).
Syntaxe : left | right | center | justify
Exemple : P { text-align:justify}
Spécifie si le texte est souligné, surligné, barré ou clignotant
(none par défaut).
Syntaxe : none | [ underline || overline ||
line-through || blink ]
Exemple : A:link, A:visited, A:active {
text-decoration: none }
Valeur de l'indentation avant la première ligne (0 par défaut).
Syntaxe : <longueur> | <pourcentage>
Exemple : P { text-indent: 3em }
Force les caractères en majuscule (uppercase) ou en minuscule
(lowercase); capitalize force en majuscule le premier caractère
(none par défaut).
Syntaxe : capitalize | uppercase | lowercase |
none
Exemple : H2 { text-transform: uppercase }
Alignement vertical du texte par rapport au reste (baseline par
défaut).
Syntaxe :
baseline | sub | super | top | text-top | middle | bottom |
text-bottom | <pourcentage>
Exemple : EM {vertical-align: sub}
Donne la largeur d'un élément texte ou image (auto par défaut).
Syntaxe : <longueur> | <pourcentage> |
auto
Exemple : IMG.icon { width: 100px }
Type d'espace blanc (normal par défaut).
Syntaxe : normal | pre | nowrap
Exemple : PRE { white-space: pre }
Distance d'espacement entre les mots (normal par défaut).
Syntaxe :normal | <longueur>
Exemple : H1 { word-spacing: 0.4em}