Feuilles de style
La liste complète (et officielle) des propriétés et recommandations
concernant les feuilles de style version 1 peut être trouvée à l'adresse
http://www.w3.org/pub/WWW/TR/REC-CSS1 . En voici une sélection :
1. Les styles de police
font-family
- définit un nom de police ou une famille de police
- <nom> ou <famille>
police précise (Arial, Times, Helvetica...) ou famille (serif,
sans-serif, cursive, fantasy, monospace)
- H3 {font-family: Arial}
font-style
- définit le style de l'écriture
- normal ou italique ou oblique
H3 {font-style: italic}
font-weight
- définit l'épaisseur de la police
- normal ou bold ou bolder ou lighter ou valeur numérique soit
(100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900)
- P {font-weight: bold}
font-size
- définit la taille de la police
- xx-small ou x-small ou small ou médium ou large ou x-large ou
xx-large
ou larger ou smaller
ou taille précise en points (pt), inches (in), centimétres (cm),
pixels (px)
ou pourcentage (%)
- P {font-size: 12pt}
font-variant
- définit une variante par rapport à la normale
- normal ou small-caps
- P {font-variant: small-caps}
font
- raccourci pour les différentes propriétés de police
- P {font: bold italic}
2. Les styles du texte
text-align
- définit l'alignement du texte
- left ou center ou right ou justify
- H1 {text-align: center}
text-indent
- définit un retrait dans la première ligne d'un bloc de texte
souvent utilisé avec <P>, n'oubliez pas dans ce cas </P>.
- spécifié en inches (in) ou en centimètres (cm) ou en pixels (px)
- P {text-indent: 1cm}
text-decoration
- définit une décoration (?) du texte soit barré, clignotant,
etc.
- blink ou underline ou line-through ou overline ou none
- A:visited {text-decoration: blink}
text-transform
- définit la casse du texte (majuscule, minuscule)
- uppercase (met les caractéres en majuscules) ou
lowercase (met les caractéres en minuscules) ou
capitalize (met le premier caractére en majuscule)
- P {text-transform: uppercase}
color
- définit la couleur du texte
- par exemple en hexadécimal
- H3 {color: #000080}
word-spacing
- définit l'espace entre les mots
- en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
- P {word-spacing: 5pt}
letter-spacing
- définit l'espace entre les lettres
- spécifiéen points (pt), inches (in), centimètres (cm), pixels
(px)
ou pourcentage (%)
- P {letter-spacing: 2pt}
line-height
- définit l'interligne soit l'espace entre les lignes du texte
- en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
- P {line-height: 10pt}
width
- détermine la longueur d'un élément de texte ou d'une image
- en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
- H1 {width: 200px}
height
- détermine la hauteur d'un élément de texte ou d'une image
- en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
- H1 {heigh: 100px}
white-space
- espace ou blanc
- normal ou pre ou nowrap
- PRE {white-space: pre}
3. Les arrière-plans
background-color
- définit la couleur de l'arrière-plan
- couleur (par exemple en hexadécimal) ou transparent
- H1 {background-color: #000000}
background-image
- définit l'image de l'arrière-plan
- URL de l'image
- BODY {background-image: image.gif}
background-repeat
- définit la façon de répéter l'image d'arrière-plan
- repeat ou no-repeat ou repeat-x (x = nombre de répétitions
horizontales) ou repeat-y (y = nombre de répétitions verticales
- P {background-image: image.gif; background-repeat: repeat-4}
background-attachment
- spécifie si l'image d'arrière-plan reste fixe avec les
déplacements de l'écran
- scroll ou fixed
- BODY {background-image: image.gif; background-attachement:
fixed}
background-position
- spécifie la position de l'image d'arrière-plan par rapport au
coin
supérieur gauche de la fenêtre
- {1, 2}
{top ou center ou bottom , left ou center ou right}
ou en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
- BODY {background-image: img.gif; background-position: right
top}
background
- raccourci pour les différentes propriétés d'arrière-plan
- P {background: image.gif fixed repeat}
4. Les marges
margin-top
- détermine la valeur de la marge supérieure
- en unitéde longueur ou auto
- { margin-top: 5px }
margin-right
- détermine la valeur de la marge droite
- en unité de longueur ou auto
- { margin-right: 5px }
margin-bottom
- détermine la valeur de la marge inférieure
- en unitéde longueur ou auto
- { margin-bottom: 5px }
margin-left
- détermine la valeur de la marge gauche
- en unité de longueur ou auto
- { margin-left: 5px }
margin
- regroupe les différentes propriétés de la marge
5. Les bords et les "enrobages"
border-top-width
- donne l'épaisseur du bord supérieur
- thin ou medium ou thick ou spécifié par l'auteur
- H3 {border-top-width: thin}
border-right-width
- donne l'épaisseur du bord droit
- thin ou medium ou thick ou spécifié par l'auteur
- H3 {border-right-width: medium}
border-bottom-width
- donne l'épaisseur du bord inférieur
- thin ou medium ou thick ou spécifié par l'auteur
- H3 {border-bottom-width: thick}
border-left-width
- donne l'épaisseur du bord gauche
- thin ou medium ou thick ou spécifié par l'auteur
- H3 {border-left-width: 0.5cm}
border-width
- regroupe les différentes propriétés de border-width
border-color
- détermine la couleur de la bordure
- H3 {border-color: yellow}
border-style
- détermine le style du trait de la bordure
- none ou solid ou dotted ou dashed ou double
ou groove ou ridge ou inset ou outset
- {border-style: solid dashed}
border
- regroupe toutes les propriétés des bords
padding-top
- valeur de remplissage haut entre l'élément et le bord
- en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
- H3 {padding-top: 3px}
padding-right
- valeur de remplissage droite entre l'élément et le bord
- en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
- H3 {padding-right: 3px}
padding-bottom
- valeur de remplissage bas entre l'élément et le bord
- en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
- H3 {padding-bottom: 3px}
padding-left
- valeur de remplissage gauche entre l'élément et le bord
- en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
- H3 {padding-left: 3px}
padding
- regroupe les différentes propriétés de remplissage
6. Les listes
list-style-type
- détermine le type de puces ou de numérotation
- disc ou circle ou square
decimal ou lower-roman ou upper-roman ou lower-alpha ou upper-alpha
- OL {list-style-type: square}
list-style-image
- permet de remplacer les puces par une image
- url ou none
- OL {list-style-image: image.gif}
list-style-position
- spécifie si les puces sont à l'intérieur ou à l'extérieur du
texte
- inside ou outside
- UL {list-style-position: inside}
list-style
- regroupe toutes les propriétés de liste
|