/* --- 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 */
/* --- 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" */
font: bold 12px/14px Arial ;
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: 1em ; font-size: 12px ; font-size: 100% ; font-size: 12pt ; font-size: 12px ;
color: white ; color: #FFFFFF ; color: rgb(255,255,255) ; color: transparent ;
font-style: normal ; font-style: italic ; font-style: oblique ;
font-weight: normal ; font-weight: bold ; font-weight: bolder ;
text-decoration: none ; text-decoration: underline ; text-decoration: line-through ; text-decoration: overline ;
font-variant: normal ; font-variant: small-caps ;
text-transform: none ; text-transform: capitalize ; text-transform: uppercase ; text-transform: lowercase ;
text-align: left ; text-align: center ; text-align: right ; text-align: justify ;
text-indent: 5px ; text-indent: 5em ; text-indent: 100% ;
line-height: normal ; line-height: 1em ; line-height: 12px ; line-height: 100% ; line-height: 12pt ; line-height: 12px ;
letter-spacing: normal ; letter-spacing: 12px ; letter-spacing: 100% ; letter-spacing: 12pt ; letter-spacing: 12px ;
word-spacing: normal ; word-spacing: 12px ; word-spacing: 100% ; word-spacing: 12pt ; word-spacing: 12px ;
background-color: red url(images/fond.png) no-repeat scroll center top ;
background-color: red ; background-color: #FF0000 ; background-color: rgb(255,0,0) ;
background-image: url(Images/LaBelleImage) ;
background-repeat: repeat ; background-repeat: repeat-x ; background-repeat: repeat-y ; background-repeat: no-repeat ;
background-attachment: scroll ; background-attachment: fixed ;
background-position: left top ; background-position: center center ; background-position: right bottom ; background-position: 50% 50% ; background-position: 5px 10px ;
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: 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: 5px dotted green ;
border-width: 5px ; border-width: 0.3em ; border-width: 1px 2px 3px 4px ; /* bordure Haut, droite, bas, gauche */ border-width-top: 1px ;
border-color: red ; border-color: #FF0000 ; border-color: rgb(255,0,0) ;
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: auto ; cursor: pointer ; cursor: defaut ; cursor: crosshair ; cursor: move ; cursor: help ; cursor: wait ;
border-collapse: separate; border-collapse: collapse;
border-spacing: 3px; border-spacing: 1em;
empty-cell: hide; empty-cell: show;
caption-side: top; caption-side: right; caption-side: bottom; caption-side: left;
vertical-align: baseline; vertical-align: top; vertical-align: middle; vertical-align: bottom;
table-layout: auto; table-layout: fixed;
display: none; display: block; display: inline;
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: static ; /* par défaut */ position: absolute ; position: fixed ; position: relative ;
top: 5px ; right: 10em ; bottom: 0 ; left: 10% ;
float: none ; float: left ; float: right ;
clear: none ; clear: left ; clear: right ; clear: both ;
overflow-x: auto ; overflow-x: visible ; overflow-y: hidden ; overflow-y: scroll ;
z-index: auto ; z-index: 10 ; z-index: 999 ;
liste-style: circle outside url(toto.jpg) ;
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: outside ; liste-style-position: inside ;
liste-style-image: none ; liste-style-image: url(images/point.jpg) ;
size: auto ; size: portrait ; size: landscape ;
orphans: 3 ;
widows: 3 ;
page-break-after: auto ; page-break-before: always ; /* Saut de page à faire */ page-break-before: avoid ; /* Saut de page à éviter */
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 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 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) ; }
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">
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 { ... } }