La syntaxe de base:
/* permet d'ajouter un commentaire */
- p: le sélecteur qui va cibler l'élément auquel le style s'appliquera
- accolade ouvrante
- font-size: la propriété
- 1.5em: la valeur et son unité
- Le point virgule est optionnel pour la dernière valeur
- accolade fermante
Les propriétés
Il existe plus de 300 propriétés en css3. La spécification n'est pas encore terminée mais on peut en trouver la liste dans le working draft du W3C. Certaines propriétés ne sont applicables qu'à certains types de média ou encore à certains types d'éléments en fonction de la valeur d'autres propriétés (comme "display" ou "position").
Le site Meyert.com propose une liste des propriétés en fonction des versions de css.
les valeurs
Chaque propriété peut se voir attribuer différentes valeurs et en possède une de base, appliquée par défaut. Le tableau récapitulatif des propriétés permet de connaître les valeurs acceptables par chaque propriété de même que celle attribuée par défaut. Il indique également si la propriété est héritéetransmise aux descendants ou non.
les propriétés raccourcies
Certaines propriétés peuvent être définies de manière groupée en une seule propriété raccourcie. Exemple:
/* margin-top margin-right margin-bottom margin-left */
La propriété margin permet de réunir, dans cet ordre, les propriétés margin-top (10px), margin-right(20px), margin-bottom(30px) et margin-left(40px).
En ne renseignant que 3 valeurs pour cette même propriété:
/* margin-top (margin-rignt et margin-left) margin-bottom */
La marge au haut sera de 10px, les deux marges latérales seront à 20px et la marge du bas sera de 30px.
Avec 2 valeurs:
/* (margin-top et margin-bottom) (margin-rignt et margin-left) */
Les marges verticales seront de 0.7em, les deux marges latérales seront de 10px.
Ordre et présence des valeurs
Pour de rares propriétés raccourcies, l'ordre dans lequel certaines valeurs doivent apparaître est spécifié. De même certaines valeurs sont parfois obligatoires. C'est le cas pour la propriété raccourcie font.
[ [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’ ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar
- [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’ ]? La propriété font peut contenir la définition d'un font-variant, font weight, font stretch, falcutatifs et dans n'importe quel ordre
- {<‘font-size’>} Le font-size doit ensuite être défini
- [ / <‘line-height’> ]? l'ajout du line-heigth est optionel, séparé du font-size par un /
- <‘font-family’> ] La font-family suit obligatoirement
la propriété font doit donc définir au minimum le font-size et le font-family, dans cet ordre-là.
Les unités
Pour les unités de longueur, on fera la différence entre les unités fixes et relatives. css3 valeurs et unités
Editer