CSS - Cascading Style Sheets

Langage de feuilles de style

Un langage simple pour associer des propriétés de style à des éléments dans les documents structurés
Cascade : plusieurs feuilles de style peuvent être combinées (auteur, site, agent, utilisateur)
Exemple : sans CSS, avec CSS


Référence : http://www.w3.org/TR/REC-CSS2

Spécifier la présentation des documents de façon externe

• Sans modifications, un même document peut être présenté de différentes façons :
  
  
  
  • Selon le lecteur
    
  • Selon les caractéristiques de l'appareil de restitution
    
  
  
• Un ensemble cohérent de documents peuvent être présentés de façon homogène en leur appliquant les mêmes modèles de présentation
  

Avantages

• Maintenabilité
  
• Indépendance des plates-formes
  
• Performances
  

Une feuille de style est un ensemble de règles comprenant chacune

• Un sélecteur, qui spécifie les éléments auxquels la règle s'applique
  
• Des propriétés, avec leurs valeurs, à appliquer à ces éléments
  

Exemple : h1 {color: yellow; font-weight: bold}
ul ul li {font-size: small}

124 propriétés

• Polices : famille, taille, style, variantes, graisse, étirement, etc.
  
• Couleur du texte, couleur de fond, image de fond
  
• Format : Bloc, élément flottant, élément en ligne
  
• Position absolue, relative, superposition
  
• Géométrie : Largeur, hauteur, marges, filets
  
• Génération de contenu, numérotation, marques de listes
  
• Description des pages, contrôle des sauts de page
  
• Texte : indentation, alignement, décoration, soulignement, interlettrage, etc.
  
• Tables : bordures, cadres, espacement, etc.
  
• Sortie vocale : volume, pauses, effets sonores, position de la source, débit, hauteur du son, etc.
  

Il existe une liste de couleurs prédéfinies
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow et orange.


Exemples :
em {color: #f00} /* #rgb */
em {color: #ff0000} /* #rrggbb */
em {background-color: rgb(255,0,0)} /* integer range 0 - 255 */
em {background-color: rgb(100%, 0%, 0%)} /* float range 0.0% - 100.0% */

Les unités relatives :

• em: la valeur du 'font-size'
  
• ex: la hauteur du x 'x-height' dans la fonte
  
• px: pixels, relatif à la définition de l'écran
  
• %: pourcentage
  

Les unités absolues :

• in: inches -- vaut 2.54 centimètres
  
• cm: centimètres
  
• mm: millimètres
  
• pt: points -- vaut 1/72ème de inch
  
• pc: picas -- vaut 12 points
  

Spécification de :

• font-family : un nom de la famille 'helvetica', 'arial', ''verdana', 'times', 'courier'
  et/ou une famille générique 'serif', 'sans-serif', 'cursive', 'fantasy' et 'monospace'.
  
• font-style : valeurs 'normal', 'italic', 'oblique'
  
• font-variant : valeurs 'normal' ou 'small-caps'
  
• font-weight : valeurs 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900
  
• font-size : xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', ou valeur relative, ou valeur absolue
  
• font : ['font-style' 'font-variant' 'font-weight'] 'font-size' [ /'line-height'] 'font-family'
  

Exemples : p {font: 12pt/14pt sans-serif}
p {font: [color=#0071FF]80% sans-serif[/color]}

À chaque élément du document est associée une boîte qui possède

• des marges (margin)
  
• une bordure (border)
  
• du remplissage (padding)
  
• un contenu (content)
  

Des propriétés CSS contrôlent ces paramètres dans les quatre directions

Exemple : margin: 1em auto; /* top/bottom = 1em right/left = auto */
padding: 1em 2em 3em; /* top = 1em right/left = 2em bottom = 3em */
Figure (marche sous firefox j sai pa prkoi n marche pas ss IE)

Épaisseur
border-top-width, border-right-width, border-bottom-width, border-left-width, border-width

Couleur
border-top-color, border-right-color, border-bottom-color, border-left-color, border-color

Style
border-top-style, border-right-style, border-bottom-style, border-left-style, border-style
valeurs : none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset
'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset', et 'outset' peuvent être interprétés comme 'solid'

Raccourcis
border-top, border-bottom, border-right, border-left, border

Les boîtes des éléments successifs de la structure se juxtaposent avec fusion des marges contiguës


Exemple :

Code:

<div>
  <p>First paragraph.</p>
  <p>The second...</p>
</div>


Figure(meme probleme avec IE)

La propriété float pousse la boîte à gauche ou à droite de la ligne courante.
La boîte doit avoir une largeur explicite (propriété width) ou une dimension intrinsèque.
img {float: left}

Quand une boîte mise en ligne se superpose avec un élément float, le contenu, le fond et la bordure de cette boîte sont poussés sur le bord de l'élément float.

La propriété clear permet d'annuler le comportement précédent.

p {clear: both}

Le positionnement est réalisé par la combinaison des règles suivantes

• position définit la boîte bloc qui sert de repère (containing block) sauf pour la valeur 'static'.
  
  
  
  • 'relative' par rapport à l'englobant.
    
  • 'absolute' par rapport à la racine du document.
    
  • 'fixed' par rapport à la fenêtre (voir exemple)
    


• left, right, top, bottom fixent un des bords de la boîte par rapport à la boîte racine.
  
• width, height fixent les dimensions de la boîte
  

La présentation peut varier selon les média :

• aural, braille, embossed, handheld, print, projection, screen, tty, tv
  

Sélection des règles CSS selon les média : @media print {
body {font-size: 10pt}
}
@media screen {
body {font-size: 12pt}
}
@media screen, print {
body {line-height: 1.2}
}

La règle @import permet d'inclure un fichier CSS dans un autre fichier CSS
Cette règle doit être placée en tête du fichier (avant toute autre règle).
Elle peut spécifier un media type.

Exemples : @import "mystyle.css";
@import url("mystyle.css");
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;