 |
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;
|
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius
|
