Aide-Mémoire CSS

Sélecteur

Sélecteur simple

Exemple de sélecteur simple.

/* --- Base --- */
* { ... }                /* Tous les tags */
p { ... }                /* paragraphe */
h1, h2, h3 { ... }       /* Titre 1 ou titre 2 ou titre 3 */

/* --- Classe ou identifiant --- */
h1.letitre { ... }       /* Titre 1 dont la classe est "letitre" */
h1#letitre { ... }       /* Titre 1 dont l'ID est "letitre" */
.letitre { ... }         /* Tout Tag dont la classe est "letitre" */
#letitre { ... }         /* Le Tag dont l'ID est "letitre" */

/* --- Lien --- */
a:link { ... }           /* Lien non visité */
a:visited { ... }        /* Lien visité */
a:hover, a:focus { ... } /* Lien survolé ou ayant le focus */
a:active { ... }         /* Lien actif (état cliqué) */

/* --- autre Pseudo-classe --- */
p:first-letter { ... }   /* Premier caractère de l'élément P */
div:first-line { ... }   /* Première ligne de l'élément DIV */
div:first-child { ... }  /* Premier élément d'un bloc DIV */

Sélecteur hiérarchique

Exemple de sélecteur hierachique. Attention, a part la base, les vieilles versions d’explorer auront du mal.

/* --- Base --- */
div p { ... }            /* Tous les tags p contenu dans un tag div */
div.cl p { ... }         /* Tous les tags p contenu dans un tag div de classe "cl" */
div#id p { ... }         /* Tous les tags p contenu dans un tag div d'ID "id" */

/* --- Hierachie évoluée --- */
div > p { ... }          /* Tous les tags p directement contenu dans un tag div */
div + p { ... }          /* Tous les tags p précédé par un tag div */
div:lang(fr) { ... }     /* Tag div dont le contenu est déclaré français */

/* --- Sélecteur sur Attribut à partir de IE7 --- */
div[class] { ... }       /* Tous les tags div contenant un attribut "class" */
div[width][height] { ... } /* Tous les tags div contenant un attribut "width" et "height" */
div[class="cl"] { ... }  /* Tous les tags div contenant un attribut "class" 
                            égal à "cl" */
div[class^="cl"] { ... } /* Tous les tags div contenant un attribut "class"
                            qui débute par "cl" */
div[class$="cl"] { ... } /* Tous les tags div contenant un attribut "class"
                            qui se termine par "cl" */
div[class*="cl"] { ... } /* Tous les tags div contenant un attribut "class"
                            qui contient "cl" */
div[class~="cl"] { ... } /* Tous les tags div contenant un attribut "class"
                            dont l'une des valeurs est "cl" */

Typographie

font

font : Réglage global d’une police de caractères.

font: bold 12px/14px Arial ;

font-family

font-family : Choix de la police de caractères.

font-family: "Times New Roman", serif ;
font-family: Georgia, serif ;
font-family: Arial, sans-serif ;
font-family: Helvetica, Verdana, sans-serif ;
font-family: "Courier New", monospace ;

font-size

font-size : Taille de la police de caractères. préférer « em » et « % ».

font-size: 1em ;
font-size: 12px ;
font-size: 100% ;
font-size: 12pt ;
font-size: 12px ;

color

color : Couleur de la police de caractères.

color: white ;
color: #FFFFFF ;
color: rgb(255,255,255) ;
color: transparent ;

font-style

font-style : Style de la police.

font-style: normal ;
font-style: italic ;
font-style: oblique ;

font-weight

font-weight : Epaisseur de la police.

font-weight: normal ;
font-weight: bold ;
font-weight: bolder ;

text-decoration

text-decoration : Soulignement ou surlignement.

text-decoration: none ;
text-decoration: underline ;
text-decoration: line-through ;
text-decoration: overline ;

font-variant

font-variant : Affichage en petites majuscules.

font-variant: normal ;
font-variant: small-caps ;

text-transform

text-transform : Mise en majuscules/minuscules.

text-transform: none ;
text-transform: capitalize ;
text-transform: uppercase ;
text-transform: lowercase ;

text-align

text-align : Alignement du texte.

text-align: left ;
text-align: center ;
text-align: right ;
text-align: justify ;

text-indent

text-indent : Décalage de la première ligne du texte.

text-indent: 5px ;
text-indent: 5em ;
text-indent: 100% ;

line-height

line-height : Hauteur des caractères.

line-height: normal ;
line-height: 1em ;
line-height: 12px ;
line-height: 100% ;
line-height: 12pt ;
line-height: 12px ;

letter-spacing

letter-spacing : Espacement entre caractères.

letter-spacing: normal ;
letter-spacing: 12px ;
letter-spacing: 100% ;
letter-spacing: 12pt ;
letter-spacing: 12px ;

word-spacing

word-spacing : Espacement entre mots.

word-spacing: normal ;
word-spacing: 12px ;
word-spacing: 100% ;
word-spacing: 12pt ;
word-spacing: 12px ;

Arrière-Plans

background

background : Caractéristique globale d’un fond.

background-color: red url(images/fond.png) no-repeat scroll center top ;

background-color

background-color : Couleur de fond.

background-color: red ;
background-color: #FF0000 ;
background-color: rgb(255,0,0) ;

background-image

background-image : Image de fond.

background-image: url(Images/LaBelleImage) ;

background-repeat

background-repeat : Répétition de l’image de fond.

background-repeat: repeat ;
background-repeat: repeat-x ;
background-repeat: repeat-y ;
background-repeat: no-repeat ;

background-attachment

background-attachment : Fixation de l’image sur le navigateur (contre le défilement).

background-attachment: scroll ;
background-attachment: fixed ;

background-position

background-position : Position de l’image sur le fond (x, y).

background-position: left top ;
background-position: center center ;
background-position: right bottom ;
background-position: 50% 50% ;
background-position: 5px 10px ;

Bloc et bordure

margin

margin : Réglage des marges autour des blocs.

margin: 1em ;              /* 1em de chaque coté */
margin: 10px 20px ;        /* Haut et bas : 10px, droite et gauche 20px */
margin: 10px auto ;        /* Centré à droite et à gauche */
margin: 1px 2px 3px 4px ;  /* Marge Haut, droite, bas, gauche */
margin-top: 10%;       margin-bottom: 20px;
margin-right: 30px;    margin-left:   40px; 

padding

padding : Réglage des marges à l’intérieur des blocs.

padding: 1em ;              /* 1em de chaque coté */
padding: 10px 20px ;        /* Haut et bas : 10px, droite et gauche 20px */
padding: 1px 2px 3px 4px ;  /* padding Haut, droite, bas, gauche */
padding-top: 10%;       padding-bottom: 20px;
padding-right: 30px;    padding-left:   40px; 

border

border : Affichage global d’une bordure.

border: 5px dotted green ;

border-width

border-width : Largeur de la bordure.

border-width: 5px ;
border-width: 0.3em ;
border-width: 1px 2px 3px 4px ;  /* bordure Haut, droite, bas, gauche */
border-width-top: 1px ;

border-color

border-color : Couleur de la bordure.

border-color: red ;
border-color: #FF0000 ;
border-color: rgb(255,0,0) ;

border-style

border-style : Type de la bordure.

border-style: none ;

border-style: solid ;

border-style: dotted ;

border-style: dashed ;

border-style: inset ;

border-style: outset ;

border-style: double ;

border-style: groove ;

border-style: ridge ;

cursor

cursor : Type de pointeur affiché pour la souris.

cursor: auto ;
cursor: pointer ;
cursor: defaut ;
cursor: crosshair ;
cursor: move ;
cursor: help ;
cursor: wait ;

Tableaux

border-collapse

border-collapse : Séparation ou collage des cellules du tableau (espace ou non entre les cellules).

border-collapse: separate;
border-collapse: collapse;

border-spacing

border-spacing : Taille de l’espacement entre les cellules (si on est en « border-collapse: separate; »).

border-spacing: 3px;
border-spacing: 1em;

empty-cell

empty-cell : Gère l’affichage ou non d’une cellule si elle est vide.

empty-cell: hide;
empty-cell: show;

caption-side

caption-side : Placement de la légende du tableau.

caption-side: top;
caption-side: right;
caption-side: bottom;
caption-side: left;

vertical-align

vertical-align : Alignement vertical dans la cellule d’un tableau.

vertical-align: baseline;
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;

table-layout

table-layout : Technique de calcul des la taille des cellules du tableau.

table-layout: auto;
table-layout: fixed;

Positionnement

display

display : Mode d’affichage (ou non) d’un bloc ou d’un élément.

display: none;
display: block;
display: inline;

width et height

width : Largeur d’un block.
height : Hauteur d’un block.

width: 0;
width: 400px;
width: 50em;
width: 60%;
min-width: 100px;
max-width: 100px;
height: 0;
height: 60%;
min-height: 100px;
max-height: 100px;

position

position : Position d’un block.

position: static ;  /* par défaut */
position: absolute ;
position: fixed ;
position: relative ;

top, right, left, bottom

Top, Right, Left, Bottom : Pour placer un bloc (hors static). par rapport à un ou deux bords.

top: 5px ;
right: 10em ;
bottom: 0 ;
left: 10% ;

float

float : Pour laisser flotter un bloc à droite ou à gauche.

float: none ;
float: left ;
float: right ;

clear

clear : Pour obliger un bloc à se placer derriere un flottant.

clear: none ;
clear: left ;
clear: right ;
clear: both ;

overflow-x, overflow-y

overflow-x, overflow-y : Pour gérer le dépassement du contenu d’un objet en horizontal ou vertical.

overflow-x: auto ;
overflow-x: visible ;
overflow-y: hidden ;
overflow-y: scroll ;

z-index

z-index : hors static, permet de gérer l’empilement des blocs.

z-index: auto ;
z-index: 10 ;
z-index: 999 ;

Liste

liste-style

liste-style : Réglage globale d’une liste.

liste-style: circle outside url(toto.jpg) ;

liste-style-type

liste-style-type : Type de liste.

liste-style-type: none ;
liste-style-type: disc ;
liste-style-type: circle ;
liste-style-type: square ;
liste-style-type: decimal ;
liste-style-type: upper-roman ;
liste-style-type: lower-alpha ;
liste-style-type: upper-alpha ;

liste-style-position

liste-style-position : Position du marqueur de liste dans la liste ou hors de la liste (outside est plus normal).

liste-style-position: outside ;
liste-style-position: inside ;

liste-style-image

liste-style-image : Image pour remplacer le marqueur de la liste.

liste-style-image: none ;
liste-style-image: url(images/point.jpg) ;

Page (balise @page)

size

size : Réglage de la page d’impression.

size: auto ;
size: portrait ;
size: landscape ;

orphans

orphans : Evite les lignes seules en début de page en indiquant le nombre minimum sur une page.

orphans: 3 ;

widows

widows : Evite les lignes seules en fin de page en indiquant le nombre minimum de ligne.

widows: 3 ;

page-break-before, page-break-after

page-break-before, page-break-after : Force un saut de ligne avant ou après un objet.

page-break-after: auto ;
page-break-before: always ;   /* Saut de page à faire  */
page-break-before: avoid ;    /* Saut de page à éviter */

CSS3

Coins arrondis

Coin arrondi sur tout un bloc.

div.page 
{  border-radius:         8px ;
   -webkit-border-radius: 8px ;
   -moz-border-radius:    8px ;
   -khtml-border-radius:  8px ;
}

Coin arrondi sur la partie haute d’un bloc.

div.haut
{  border-radius:         8px 8px 0 0 ;
   -moz-border-radius:    8px 8px 0 0 ;
   -webkit-border-top-left-radius:  8px ;
   -webkit-border-top-right-radius: 8px ;
   -khtml-border-radius:  8px 8px 0 0 ;
}

Ombrage

Ombrage décalé vers le bas et la droite, diffus de 6px d’une couleur grise.

div 
{  box-shadow:         3px 3px 6px #444 ;
   -moz-box-shadow:    3px 3px 6px #444 ;
   -webkit-box-shadow: 3px 3px 6px #444 ;
   -khtml-box-shadow:  3px 3px 6px #444 ;
}

Ombrage peu décalé sur un tableau.

table 
{  box-shadow: 1px 1px 7px #666 ;
   -moz-box-shadow: 1px 1px 7px #666 ;
   -webkit-box-shadow: 1px 1px 7px #666 ;
   -khtml-box-shadow: 1px 1px 7px #666 ;
}

CSS2 : Ombrage de texte décalé vers le bas et la droite, diffus de 3px d’une couleur grise.

h2, h3 
{  text-shadow:  2px 2px 3px #999;
}

Rotation

Rotation d’un bloc.

a:hover img 
{  transform-origin: 50% 50%;
   transform: scale(1.00) rotate(-5deg) ;
   -moz-transform-origin: 50% 50%;
   -moz-transform: scale(1.00) rotate(-5deg) ;
   -webkit-transform-origin: 50% 50%;
   -webkit-transform: scale(1.00) rotate(-5deg) ;
} 

iPhone, iPod, iPad et autres téléphones.

Méta taille de page

Navigateur réglé sur la largeur de l’écran :

<meta name="viewport" content="width=device-width">

Navigateur réglé sur la hauteur de l’écran :

<meta name="viewport" content="width=device-height">

Navigateur réglé sur une largeur de 600 pixels :

<meta name="viewport" content="width=640">

@média pour style

Style pour une page inférieure à 1000 pixels de large :

@media (max-width: 1000px)
{  p { ... }
   div { ... }
}

Style pour une page inférieure à 685 pixels (iPhone, iPod : paysage) :

@media handheld, 
only screen and (max-width: 685px),
only screen and (max-device-width: 685px)
{  p { ... }
   div { ... }
}

Style pour une page inférieure à 400 pixels (iPhone, iPod : portrait) :

@media handheld, 
only screen and (max-width: 400px),
only screen and (max-device-width: 400px)
{  p { ... }
   div { ... }
}

Style pour une impression :

@media print
{  p { ... }
   div { ... }
}