Technologie Internet - Université de Genève, CUI ©

Résumé des propriétés utilisées dans des directives de style

Note: les conventions d'écriture employées dans la table ci-dessous sont décrites au bas de ce document. Il en est de même pour les abréviations employées dans la colonne %.

Propriété Valeurs possibles Valeur
initiale 		Portée %
font-family [[<family-name>|<generic-family>],]* [<family-name> | <generic-family>]
<generic-family>:
serif | sans-serif | cursive | fantasy | monospace
<family-name>:
helvetica | times | zapf-chancery | western | courier | ...
dépend du
butineur 		tout -
font-style normal | italic | oblique normal tout -
font-variant normal | small-caps normal tout -
font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 normal tout -
font-size <absolute-size> | <relative-size> | <length> | <percentage>
<absolute-size>:
[xx-small | x-small | small | medium | large | x-large | xx-large ]
<relative-size>:
[larger | smaller]
<length>:
#pt | #em | #ex
<percentage>:
#%
medium tout PFS
font [<font-style> || <font-variant> || <font-weight>]? <font-size> [/<line-height>]? indéfinie tout PFS
FS
color <couleur prédéfinie> | rgb(#, #, #) dépend du
butineur 		tout -
background-
color 		<color> | transparent transparent tout -
background-
image 		<url> | none none tout -
background-
repeat 		repeat | repeat-x | repeat-y | no-repeat repeat tout -
background-
attachment 		scroll | fixed scroll tout -
background-
position 		[<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right] 0% 0% bloc ou externe S
background <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> indéfinie tout S
word-spacing normal | <length> normal tout -
letter-spacing normal | <length> normal tout -
text-decoration none | [ underline || overline || line-through || blink ] none tout -
vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> baseline éléments "inline" LH
text-transform capitalize | uppercase | lowercase | none none tout -
text-align left | right | center | justify dépend du
butineur 		bloc -
text-indent <length> | <percentage> 0 bloc PW
line-height normal | <number> | <length> | <percentage> normal tout FS
margin-top <length> | <percentage> | auto 0 tout PW
margin-right <length> | <percentage> | auto 0 tout PW
margin-bottom <length> | <percentage> | auto 0 tout PW
margin-left <length> | <percentage> | auto 0 tout PW
margin [ <length> | <percentage> | auto ]{1,4} indéfinie tout PW
padding-top <length> | <percentage> 0 tout PW
padding-right <length> | <percentage> 0 tout PW
padding-bottom <length> | <percentage> 0 tout PW
padding-left <length> | <percentage> 0 tout PW
padding [ <length> | <percentage> ]{1,4} 0 tout PW
border-top-
width 		thin | medium | thick | <length> medium tout -
border-right-
width 		thin | medium | thick | <length> medium tout -
border-bottom-
width 		thin | medium | thick | <length> medium tout -
border-left-
width 		thin | medium | thick | <length> medium tout -
border-width [thin | medium | thick | <length>]{1,4} indéfinie tout -
border-color <color>{1,4} valeur de la propriété "color" tout -
border-style none | dotted | dashed | solid | double | groove | ridge | inset | outset none tout -
border-top <border-top-width> || <border-style> || <color> indéfinie tout -
border-right <border-right-width> || <border-style> || <color> indéfinie tout -
border-bottom <border-bottom-width> || <border-style> || <color> indéfinie tout -
border-left <border-left-width> || <border-style> || <color> indéfinie tout -
border <border-width> || <border-style> || <color> indéfinie tout -
width <length> | <percentage> | auto auto bloc ou externe PW
height <length> | auto auto bloc ou externe -
float left | right | none none tout -
clear none | left | right | both none tout -
display block | inline | list-item | none block tout -
white-space normal | pre | nowrap normal bloc -
list-style-type disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none disc display = list-item -
list-style-image <url> | none none display = list-item -
list-style-
position 		inside | outside outside display = list-item -
list-style <list-style-type> || <list-style-position> || <url> indéfinie display = list-item -

Abréviations utilisées dans la colonne "%"

Abréviation Signification
PFS relative to Parent's Font Size
FS relative to Font Size of element
S relative to Size of element
LH relative to Line-Height of element
PW relative to Parent's Width
 

Conventions d'écriture:

Notation Signification
x | y x ou y (exclusion mutuelle)
x || y x ou y ou les deux (ou non-exclusif)
[ x ]* x répété 0, 1 ou plusieurs fois
[ x ]+ x répété 1 ou plusieurs fois
[ x ]? x est optionnel
[ x ]{A,B} x répété au moins A fois et au plus B fois
# valeur numérique quelconque

Unités de longueur:

  • relatives:
    • em: hauteur de la fonte de l'élément courant
    • ex: hauteur de la lettre 'x'
  • absolues:
    • px: pixels
    • in: pouce (inch)
    • pt: 1/72 pouce (inch)
    • cm: centimètres
    • mm: millimètres
    • pc: picas (1pc = 12pt)
Bertrand Ibrahim

Site Hosting: Bronco