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 { ... }

}