Feuilles de style
Liste des propriétés

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