Page suivante Page précédente Table des matières

2. Liste CSS1

On utilise les conventions suivantes :

2.1 Liste des propriétés

Voici une liste des propriétés que l'on peut fixer en CSS1 :

background-attachment

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 }

background-color

Couleur du fond d'écran (transparent par défaut).

Syntaxe : <color> | transparent

Exemple : H1 { background-color: #F00 }

background-image

Image de fond d'écran (none par défaut).

Syntaxe : <url> | none

Exemple : BODY { background-image: url(ungi.gif)}

background-position

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 }

background-repeat

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 }

background

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 }

border-bottom

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 }

border-bottom-width

Épaisseur du bord supérieur (medium par défaut).

Syntaxe : thin | medium | thick | <longueur>

Exemple : H1 { border-bottom-width: 0.5em }

border-color

Couleur des bordures (black par défaut).

Syntaxe : <couleur>{1,4}

Exemple : H1 { border-color: red }

border-left

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 }

border-left-width

Épaisseur du bord gauche (medium par défaut).

Syntaxe : thin | medium | thick | <longueur>

Exemple : H1 { border-left-width: 0.5em }

border-right

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 }

border-right-width

Épaisseur du bord droit (médium par défaut).

Syntaxe : thin | medium | thick | <longueur>

Exemple : H1 { border-rigth-width: 0.5em }

border-style

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 }

border-top

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 }

border-top-width

Épaisseur du bord haut (médium par défaut).

Syntaxe : thin | medium | thick | <longueur>

Exemple : H1 { border-top-width: 0.5em }

border-width

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 }

border

Regroupe toutes les propriétés des bordures.

Syntaxe : <border-width> || <border-style> || <color>

Exemple : P { border: solid red }

clear

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 }

color

Couleur d'un texte (black par défaut).

Syntaxe : <couleur>

Exemple :


P { color: red }
EM{color:rgb(255,0,0)}
EM { color: #f00 }

display

Spécifie où l'élément est affiché (none par défaut).

Syntaxe : block | inline | list-item | none

Exemple : P { display: block }

float

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; }

font-family

Nom et famille de la police.

Syntaxe : [[<nom> | <famille>],*]

Exemple : BODY {font-family: gill, helvetica, sans-serif}

font-size

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};

font-style

Style de la police (normal, italique et oblique).

Syntaxe : normal | italic | oblique

Exemple : H1, H2, H3 {font-style: italic}

font-variant

Style petites polices ou normal (normal par défaut).

Syntaxe : normal | small-caps

Exemple: : H3 {font-variant: small-caps}

font-weight

É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}

font

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 };

height

Donne la longueur d'un élément texte ou image (auto par défaut).

Syntaxe : <longueur> | auto

Exemple : IMG.icon { height: 100px }

letter-spacing

Distance d'espacement entre caractères (normal par défaut).

Syntaxe : normal | <length>

Exemple : EM { letter-spacing: 0.1em }

line-height

Espace entre deux lignes adjacentes (normal par défaut).

Syntaxe : normal | <nombre> | <longueur> | <pourcentage>

Exemple : DIV { line-height: 1.2; font-size: 10pt }

list-style-image

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) }

list-style-type

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 }

list-style-position

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 }

list-style

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 }

margin-bottom

Valeur de la marge basse (auto par défaut).

Syntaxe : <longueur> | <pourcentage> | auto

Exemple : H1 { margin-bottom: 3px }

margin-left

Valeur de la marge gauche (auto par défaut).

Syntaxe : <longueur> | <pourcentage> | auto

Exemple : H1 { margin-left: 3px }

margin-right

Valeur de la marge droite (auto par défaut).

Syntaxe : <longueur> | <pourcentage> | auto

Exemple : H1 { margin-rigth: 3px }

margin-top

Valeur de la marge haute (auto par défaut).

Syntaxe : <longueur> | <pourcentage> | auto

Exemple : H1 { margin-top: 3px }

margin

Regroupe les différentes propriétés de marge en une ligne.

Syntaxe : [ <longueur> | <pourcentage> | auto ]{1,4}

Exemple : BODY { margin: 1em 2em 3em }

padding-bottom

Valeur de remplissage bas (0 par défaut).

Syntaxe : <longueur> | <pourcentage>

Exemple : H1 { padding-bottom: 3px }

padding-left

Valeur de remplissage gauche (0 par défaut).

Syntaxe : <longueur> | <pourcentage>

Exemple : H1 { padding-left: 3px }

padding-right

Valeur de remplissage droit (0 par défaut).

Syntaxe : <longueur> | <pourcentage>

Exemple : H1 { padding-right: 3px }

padding-top

Valeur de remplissage haut (0 par défaut).

Syntaxe : <longueur> | <pourcentage>

Exemple : H1 { padding-top: 3px }

padding

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 }

text-align

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}

text-decoration

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 }

text-indent

Valeur de l'indentation avant la première ligne (0 par défaut).

Syntaxe : <longueur> | <pourcentage>

Exemple : P { text-indent: 3em }

text-transform

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 }

vertical-align

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}

width

Donne la largeur d'un élément texte ou image (auto par défaut).

Syntaxe : <longueur> | <pourcentage> | auto

Exemple : IMG.icon { width: 100px }

white-space

Type d'espace blanc (normal par défaut).

Syntaxe : normal | pre | nowrap

Exemple : PRE { white-space: pre }

word-spacing

Distance d'espacement entre les mots (normal par défaut).

Syntaxe :normal | <longueur>

Exemple : H1 { word-spacing: 0.4em}


Page suivante Page précédente Table des matières