 |
|
|
| |
| PRATIQUE CLIENTS WEB |
|
|
|
| Les valeurs par défaut des raccourcis CSS |
| |
| "J'utilise les raccourcis CSS pour gagner de l'espace dans mon code. Que se passe-t-il si je ne remplit pas une valeur ? Quelle sera alors celle prise en compte ?"
(16/12/2006) |
  |
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
Les propriétés CSS peuvent facilement prendre de la place dans un fichier : rien que que le style du fond de la page dispose de 5 propriétés : background-color, background-image, background-repeat, background-attachment et background-position. Elles-mêmes peuvent prendre plusieurs valeurs. Pour rendre les CSS plus lisibles, les spécifications précisent donc souvent une propriété raccourcie, en l'occurence background pour notre exemple :
background: { #000 url(bg.jpg) no-repeat fixed center center; }
...où s'enchaînent les propriétés background-color, background-image, background-repeat, background-attachement et background-position.
Toutes les valeurs ne sont cependant pas obligatoires, mais il faut alors s'assurer que leurs valeurs initiales ne vont pas contrecarrer les intentions de style. Ces valeurs sont indiquées dans la spécification CSS pour chaque propriété complète, et les voici regroupées :
|
Raccourcis: background
|
|
Valeurs par défaut
des propriétés originales
|
background-color: transparent;
background-image: none;
background-attachment: scroll;
background-repeat: repeat;
background-position: 0% 0%;
|
|
Exemple
|
background: #00FF33 url(point-liste.gif) no-repeat fixed top;
|
|
Raccourcis: border
|
|
Valeurs par défaut
des propriétés originales
|
border-width, border-top-width, border-left-width,
border-bottom-width et border-right-width: medium;
border-style: none;
border-color: même valeur que la propriété color de l'élément
|
|
Exemple
|
border: thin dotted #6688bb;
|
|
Raccourcis: font
|
|
Valeurs par défaut
des propriétés originales
|
font-style: normal;
font-variant:normal;
font-weight: normal;
font-size: inherit; / line-height: normal;
font-family: inherit;
|
|
Exemple
|
font: oblique small-caps 850 18px/12px verdana;
|
|
Raccourcis: list-style
|
|
Valeurs par défaut
des propriétés originales
|
'list-style-type': disc;
'list-style-position': outside;
'list-style-image': none;
|
|
Exemple
|
list-style: decimal inside;
|
Les raccourcis de margin et padding se font pour chaque côté du modèle de boîte CSS (lire "Comprendre le modèle de boîte de CSS"), dans le sens des aiguilles d'une montre, en partant du côté supérieur : haut, droite, bas, gauche. Si l'on ne met qu'une valeur, elle s'appliquera à tous les côtés. Si l'on n'en met que deux, la première s'appliquera aux côtés supérieur et inférieur, la seconde aux côtés droit et gauche. Si l'on en met trois, la première s'applique au côté supérieur, la deuxième aux côtés droit et gauche, la troisième au côté inférieur.
|
Raccourcis: margin
|
|
Valeurs par défaut
des propriétés originales
|
margin-top, margin-right,
margin-bottom et margin-left: 0;
|
|
Exemple
|
margin: 12px -1em 5% auto;
|
|
Raccourcis: padding
|
|
Valeurs par défaut
des propriétés originales
|
padding-top, padding-right,
padding-bottom et padding-left: 0;
|
|
Exemple
|
padding: 10px 25px 3em 2em;
|
|
|
|
|
|
|
|
Accueil
