SYNTAX |
---|
Syntax |
selector {property: value;} |
External Style Sheet |
<link rel= »stylesheet » type= »text/css » href= »style.css » /> |
Internal Style |
<style type= »text/css »> selector {property: value;} </style> |
Inline Style |
<tag style= »property: value »> |
GENERAL | |
---|---|
Class | String preceded by a period |
ID | String preceded by a hash mark |
div | Formats structure or block of text |
span | Inline formatting |
color | Foreground color |
cursor | Appearance of the cursor |
display |
block; inline; list-item; none
|
overflow | How content overflowing its box is handled
visible, hidden, scroll, auto
|
visibility |
visible, hidden
|
FONT | |
---|---|
font-style |
Italic, normal
|
font-variant |
normal, small-caps
|
font-weight |
bold, normal, lighter, bolder, integer (100-900)
|
font-size | Size of the font |
font-family | Specific font(s) to be used |
TEXT | |
---|---|
letter-spacing | Space between letters |
line-height | Vertical distance between baselines |
text-align | Horizontal alignment |
text-decoration |
blink, line-through, none, overline, underline
|
text-indent | First line indentation |
text-transform |
capitalize, lowercase, uppercase
|
vertical-align | Vertical alignment |
word-spacing | Spacing between words |
BOX MODEL | |
---|---|
height; width; margin-top; margin-right; margin-bottom; margin-left; padding-top; padding-right; padding-bottom; padding-left; |
BORDER | |
---|---|
border-width | Width of the border |
border-style |
dashed; dotted; double; groove; inset; outset;
ridge; solid; none |
border-color | Color of the border |
POSITION | |
---|---|
clear | Any floating elements around the element?
both, left, right, none
|
float | Floats to a specified side
left, right, none
|
left | The left position of an element
auto, length values (pt, in, cm, px)
|
top | The top position of an element
auto, length values (pt, in, cm, px)
|
position |
static, relative, absolute
|
z-index | Element above or below overlapping elements?
auto, integer (higher numbers on top)
|
BACKGROUND | |
---|---|
background-color | Background color |
background-image | Background image |
background-repeat |
repeat, no-repeat, repeat-x, repeat-y
|
background-attachment | Background image scroll with the element?
scroll, fixed
|
background-position |
(x y), top, center, bottom, left, right
|
LIST | |
---|---|
list-style-type | Type of bullet or numbering in the list
disc; circle; square; decimal; lower-roman;
upper-roman; lower-alpha; upper-alpha; none |
list-style-position | Position of the bullet or number in a list
inside; outside
|
list-style-image | Image to be used as the bullet in a list |
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 { ... } }