| Propriété |
Valeurs + exemple |
Description |
| background |
-
background:#ddd url(/image/bg.png); |
Arrière plan |
| background-attachment |
fixed background-attachment:fixed; |
Mode de défilement de l'image de l'arrière plan |
| background-couleur |
couleur background-color:red; |
Couleur d'arrière plan de l'élément |
| background-image |
url background-image:url(image/bg.png); |
URl de l'image de l'arrière plan |
| background-position-x |
left, center, right, %, px, em
background-position-x:60%;
|
Définit la position de l'image de fond horizontalement |
| background-position-y |
left, center, right, %, px, em
background-position-y:15px;
|
Définit la position de l'image de fond verticalement |
| background-position |
[ top, center, bottom, %, px, em ]
[ left, center, right, %, px, em ]
background-position:60% 15px;
|
Définit la position de l'image de fond verticalement |
| background-repeat |
no-repeat, repeat, repeat-x, repeat-y
background-repeat:repeat-x;
|
Mode de répétition de l'image du fond |
border,
border-bottom,
border-left,
border-right,
border-top |
[Epaisseur]
[solid, dashed, dotted, double, groove,
ridge, inset, outset]
[couleur]
border:1px solid black;
|
Affichage de la bordure: épaisseur, type de bordure et couleur |
| border-collapse |
collapse, separate
border-collapse: separate;
|
Indique si les bordures de cellules adjacentes d'un tableau sont fusionnés |
| border-color |
couleur
border-color: red;
|
Détermine la couleur de la bordure d'un élément |
| border-spacing |
largeur
border-spacing: 2px;
|
Détermine l'espacement entre les cellules d'un tableau.
Pour cela il faut que la propriété border-collapse soit définie comme "separate" |
| border-style |
solid, dashed, dotted, double, groove, ridge, inset, outset
border-spacing: 2px;
|
Définit le forme de bordure d'un élément |
| caption-side |
top, bottom, left, right
caption-side: right;
|
Détermine le placement du titre d'un tableau.
Remplace la propriété align de l'élément caption |
| clear |
both, left, none ,right
clear:both;
|
Détermine si l'élément bloc peut être affiché dans la même bande
horizontale qu'un élément flottant ( voir float ) voisin.
|
| color |
couleur
color:blue;
|
Détermine la couleur du texte
|
| content |
chaîne de caractère, uri, attr, open-quote, close-quote, no-open-quote, no-close-quote, inherit
.title:before {content:"-"}
label:after {content:" : ";}
label:after {content:" : "; color:blue; }
|
Définit le contenu ou la source du contenu à afficher avant ou après l'élément.
Il faut obligatoirement indiquer la pseudo-class
before ou after
|
| direction |
ltr, rtl
direction:rtl;
|
Détermine le sens d'affichage des éléments
|
| display |
block, inline, inline-block, inline-table, list-item, marker, run-in, compact, table, table-cell
direction:rtl;
|
Determine le type d'affichage d'un élément
|
| empty-cells |
show, hide
empt-cells:hide;
|
Determine si une cellule vide affiche des bordures et un espace vide ou non.
|
| float |
left, right, none
float:left;
|
Permet d'accoler un élément à droite ou à gauche de son parent.
|
| font-family |
-
font-family:verdana;
|
Détermine la police d'écriture d'un élément
|
| font-size |
Taille absolue, taille relative, longueur, pourcentage
font-size:14px;
font-size:x-small;
font-size:120%;
|
Détermine la police d'écriture d'un élément
|
| font-style |
normal, italic, oblique
font-style:italic;
|
Détermine si la police doit être affichée en normal, italique ou oblique
|
| font-variant |
normal, small-caps
font-variant:small-caps
|
Affiche les caractères d'écriture en capitales.
|
| font-weight |
bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900
font-weight:bolder;
|
Définit l'épaisseur de la police d'écriture.
100 est la valeur la plus fine et la plus large est 900.
|
| height |
auto, %, longeur
height:250px;
|
Détermine la hauteur d'un élément. La valeur par défaut auto adapte la hateur à son contenu.
|
| letter-spacing |
normal, longeur
letter-spacing:1.5em;
|
Détermine l'espace entre deux lettres. On peut indiquer une valeur négative.
|
| line-height |
normal, longeur, %
line-height:1.3em;
|
Détermine la hauteur de la ligne de texte.
|
| list-style-type |
Pour la balise ul :
circle, disc, square
Pour la balise ol :
decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, hebrew,
armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha.
ol { list-style-type: lower-roman; }
ul { list-style-type: square; }
li { list-style-type: lower-greek; }
|
Détermine le type de puce à afficher pour une liste.
|
| line-style-position |
inside, outside
list-style-position: outside;
|
Détermine si la puce d'une liste doit être à l'intérieur ou l'extérieur de la liste.
|
| line-style-image |
none, url
list-style-image: url(images/puce.png);
|
Détermine l'image qui remplacera la puce d'un élément d'une liste.
|
| margin |
auto, longueur
margin:10px;
margin:10px 20px;
margin:10px 20px 10px 20px;
|
Détermine les marges d'un élément. On peut lui donner jusqu'à 4 arguments. Dans le cas d'un argument unique la marge se fera sur
les 4 cotés. Dans le cas de deux arguments, le premier concerne le haut et le bas et le deuxieme la droite et la gauche. Dans le cas de
4 arguments, le premier concerne le haut, le deuxième la droite, le troisième le bas et le dernier la gauche.
|
margin-top,
margin-right,
margin-bottom,
margin-left |
auto, longueur, %
margin-top:13px;
margin-top:40%;
|
Détermine la marge d'une partie d'un élément |
| max-height |
longueur, %, none
max-height:400px;
|
Détermine la hauteur maximale d'un élément |
| max-width |
longueur, %, none
max-width:2300px;
|
Détermine la largeur maximale d'un élément |
| min-height |
longueur, %, none
min-height:100px;
|
Détermine la hauteur minimale d'un élément |
| min-width |
longueur, %, none
min-width:50%;
|
Détermine la largeur minimale d'un élément |
| opacity |
valeur de 0 à 1
opacity:0.5;
|
La transparence d'un élément est nulle quand l'opacité est à 1. Plus cette dernière est faible plus l'élément est transparent |
| outline |
[ couleur ]
[ style ]
[ épaisseur]
outline: red dashed 3px;
|
Cette propriété permet de définir en une seule fois plusieurs paramètres de la notion de outline. Le premier argument indique la couleur
de l'outine, le deuxième le style et le troisème l'épaisseur. |
| outline-color |
couleur
outline-color: red;
|
Détermine la couleur de l'outline d'un élément |
| outline-style |
solid, dashed, dotted, double, groove, ridge, inset, outset
outline-style: dashed;
|
Determine le style de l'outline d'un élément |
| outline-width |
Epaisseur
outline-width: 3px;
|
Détermine l'épaisseur de l'outline d'un élement |
| overflow |
auto, hidden, scroll, visible
overflow:scroll;
|
Détermine la gestion du débordement d'un contenu. Doit-il être caché, scrollable ou visible.
|
| overflow-x |
auto, hidden, scroll, visible
overflow-x:scroll;
|
Détermine la gestion du débordement d'un contenu horizontalement. Doit-il être caché, scrollable ou visible.
|
| overflow-y |
auto, hidden, scroll, visible
overflow-y:hidden;
|
Détermine la gestion du débordement d'un contenu verticalement. Doit-il être caché, scrollable ou visible.
|
| padding |
auto, longueur
padding:10px;
padding:10px 20px;
padding:10px 20px 10px 20px;
|
Détermine les marges intérieures d'un élément. On peut lui donner jusqu'à 4 arguments. Dans le cas d'un argument unique la marge se fera sur
les 4 cotés. Dans le cas de deux arguments, le premier concerne le haut et le bas et le deuxieme la droite et la gauche. Dans le cas de
4 arguments, le premier concerne le haut, le deuxième la droite, le troisième le bas et le dernier la gauche.
|
padding-top,
padding-right,
padding-bottom,
padding-left |
auto, longueur, %
padding-top:13px;
padding-top:40%;
|
Détermine la marge intérieure d'une partie d'un élément |
| position |
static, absolute, fixed, relative
position:fixed;
|
Détermine le type de position d'un élément. |
| text-align |
left, center, justify, right
text-align:justify;
|
Détermine le type d'alignement du texte à l'intérieure d'un élément |
| text-decoration |
line-through, overline, underline
text-decoration:underline;
|
Permet de souligner, barré ou surligné du texte. |
| text-indent |
longueur, %
text-indent:10px;
|
Permet d'ajouter une identation à un texte |
| white-space |
normal, nowrap, pre
white-space:nowrap;
|
Détermine la façon dont le navigateur doit afficher l'espace blanc et retour chariot présent dans le code HTML.
Par défaut le navigateur ignore les espaces. Si la valeur pre est défini, celui-ci sera interpréter
comme une balise <pre>. La valeur nowrap ignore les sauts de ligne mais lit les saut de ligne
volontaire : <br />
|
| word-spacing |
normal, longueur, %
word-spacing:10px;
|
Définit l'espace entre les mots d'un élément |
| word-wrap |
normal, break-word
word-wrap:break-word;
|
Définit la césure d'un mot lorsque celui ci depasse son cadre |
| z-index |
auto, nombre entier
z-index:999;
|
Lorsque des éléments se surperposent, z-index permet de définir un ordre d'affichage , celui qui a le z-index
le plus élevé surpassera les autres.
|
CSSW