Tutoriel


Taux global de satisfaction Client : 4.8 sur 5 pour 457 formations

Accueil / Tutoriels / Web / Client

C.S.S.::Tutoriel CSS Accéléré - 5 ème partie

Cascading Style Sheets

Par programmation client

Tutoriel CSS Accéléré - 5 ème partie

Dans cette leçon vous apprendrez...
  1. à comprendre la différence entre les différentes unités de mesure.
  2. à comprendre la notion de valeur héritée.
  3. à comprendre l'importation de feuille de styles.

Unités de mesure

CSS permet de spécifier la taille d'une police, l'épaisseur d'une bordure, les marges, la réserve, etc.
Ces différentes valeurs sont exprimées dans une des unités de mesure suivantes:

Unité Description Exemple
px Pixels margin-top: 10px;
pt Points font-size: 12pt;
in Inches (pouces) padding-top: .5in;
cm Centimeters top: 5cm;
mm Millimètres left: 45mm;
pc Picas bottom: 12pc;
em Ems font-size: 1.5em;
ex Exs font-size: 1.5ex;
% Pourcentage width: 80%;

Définitions

Pixels (px)

Une image est composée de points. Un pixel est un point d'image; c'est l'unité la plus fréquement utilisée en design web.
Un pixel n'est pas une unité de mesure absolue comme le serait par exemple le cm ou le point.
La taille réelle finale d'une dimension exprimée en pixels dépend de la résolution (taille) écran de l'utilisateur final.

Par exemple, pour une image de 900 px de large :

  • Si la résolution écran est règlée sur 800x600, l'image ne rentrera pas entièrement dans l'écran.
  • Si le même écran est règlé en 1024x768, la même image ne remplira pas l'écran.

Points (pt)

Les points sont des unités physiques, donc absolues. Ils devraient êtres réservés à l'impression. Classiquement, un écran fait 96 ppp (72ppp), une imprimante 300dpi.

Inches (in), Centimètres (cm), et Millimètres (mm)

A éviter de préférence en web design.

Picas (pc)

Les Picas devraient êtres réservés à l'impression. Il y a 6 picas dans un pouce (inch).

Ems (em)

Un em (ou Mutt) est une unité relative qui se réfère à la taille de la lettre "M" dans une police (fonte).
On l'utilise souvent en web design, à cause de sa relativité.

Exs (ex)

La "x-height" est la hauteur du x minuscule. Les Exs sont utilisés pour définir une taille par rapport au texte environnant.

Valeur Inherit

Beaucoup de propriétés acceptent la valeur INHERIT, qui spécifie que la valeur est égale à celle de la balise parent. Inherit est la valeur par défaut de toute propriété.

@import

La directive @import est utilisée pour importer une css dans une autre. Il y a 2 syntaxes possibles :

Syntaxe
@import "styles_cmbp_01.css" mediatypes;
@import url("styles_cmbp_01.css") mediatypes;

Dans les exemples d'importation ci-dessus, mediatypes doit être remplacé par une liste (aaa,bbb) des types de médias auxquels l'importation s'applique.