SELFHTML

Unités de mesure, mentions de couleur et affectation de valeurs

Page d'information: vue d'ensemble

vers le bas Mentions numériques
vers le bas Mentions de couleur
vers le bas Mentions de valeurs autorisées et mentions de chaînes de caractères
vers le bas Mentions numériques pour la restitution vocale

 vers le bas 

CSS 1.0Netscape 4.0MS IE 3.0 Mentions numériques

Les unités de mesure les plus répandues sont à votre disposition Pour toutes les données numériques dans les feuilles de style CSS à savoir par exemple pour les tailles de police, les espaces entre paragraphes ou les marges. Sont possibles des données absolues (par exemple millimètre) ou des données relatives (pourcentage par rapport à normal). Utilisez pour vos mentions les abréviations suivantes:

Abréviation Type de mention Signification Exemples
pt absolue Signifie point. Unité de mesure typographique. 1 point correspond à 1/72 pouce. font-size:12pt;
line-height:14pt;
pc absolue Signifie Pica. Unité de mesure typographique. 1 pica correspond à 12 points. font-size:1pc;
line-height:1.2pc;
in absolue Signifie pouce. Unité générale de longueur dans les pays anglo-saxons. 1 pouce correspond à 2.54 centimètres. border-width:0.1in;
margin-left:1in;
mm absolue Signifie millimètre. Unité générale de longueur. 1/1000 du mètre étalon. margin-bottom:10mm;
width:70mm;
cm absolue Signifie centimètre. Unité générale de longueur. 1/100 du mètre étalon. font-size:1cm;
top:2.54cm;
px absolue/relative Signifie pixel. Dépend de la densité en pixels du mode de sortie, relative donc d'un mode de sortie à l'autre, absolue par contre par rapport à un seul et unique mode de sortie. border-width:3px;
margin-right:60px;
em relative Signifie par rapport à la taille de police de l'élément. Exception: quand la propriété font-size (donc la taille de la police) a été fixée elle-même avec cette mention, celle-ci se rapporte alors à la taille de police de l'élément parent. font-size:1.2em;
line-height:1.5em;
ex relative Signifie par rapport à la hauteur de la minuscule x de cet élément. Exception: quand la propriété font-size (donc la taille de la police) a été fixée elle-même avec cette mention, celle-ci se rapporte alors à la hauteur de la minuscule x de l'élément parent. text-transform:uppercase;
font-size:1.3ex;
% relative Signifie pourcentage. Selon la propriété CSS, relative à la taille de l'élément proprement-dit, ou à la taille de l'élément parent ou à un contexte plus général. Pour l'exemple ci-contre, la mention pour la hauteur de ligne (line-height) est à interpréter par rapport à la taille de police (font-size). font-size:10pt;
line-height:120%;

Utilisez toujours le point comme signe décimal à la place de la virgule pour les mentions numériques avec décimales, donc par exemple 0.2cm et non pas 0,2cm. Même des mentions négatives sont possibles pour quelques affectations de valeur; elles sont précédées comme d'habitude du signe moins.

Vous pouvez donc noter des mentions très exactes, cependant les pages Web sont restituées en règle générale sur des écrans, et les écrans se composent aujourd'hui de pixels, et la densité en pixels peut varier très sensiblement d'un écran à l'autre. En fin de compte l'ordinateur doit convertir vos mentions en pixels pour l'écran. Ce qui peut mener à des résultats décevants. Ainsi des tailles de police bien lisibles sur un écran peuvent-elles être trop petites dans un autre environnement. Malheureusement les différences dans les réglages de base des systèmes d'exploitation ont aussi leur part de responsabilité. Ainsi, avec des systèmes tournant sous Windows, une base de calcul de 96dpi (Dots per Inch - points par pouce) est utilisée pour la représentation de polices (avec un réglage "grandes polices" c'est même 120dpi), avec des systèmes tournant sous Linux et Macintosch, c'est par contre 72dpi. C'est pour cette raison que des tailles de police qui paraissent nettes sous Windows, paraîtront faibles sous les autres systèmes nommés, alors que des tailles de police qui font bonne figure sous ces derniers, seront à leur tour pataudes sous Windows. Mais même des mentions directes en pixels ne résolvent pas forcément le problème. Un pixel sur l'écran 13 pouces avec une résolution de 1024×768 pixels d'un ordinateur portable aura un effet tout à fait différent qu'un pixel sur l'écran 19 pouces d'un ordinateur de bureau avec la même résolution d'écran. D'autres mentions telles que em ou bien des valeurs en pourcentage, évitent certes le problème des différentes représentations à l'écran - mais premièrement on peut à peine parler de "formatage" avec une mention comme 1.2em , et deuxièmement ces mentions préparent aussi des problèmes d'une autre nature. Ainsi par exemple, il peut arriver par le principe de l'héritage naturel que des polices, avec des éléments imbriqués plusieurs fois (par exemple pour des listes ou des tableaux), deviennent toujours plus petites ou toujours plus grandes. Certes CSS 2.0 propose avec les possibilités étendues de Autre page d'information définir des formats pour les repères HTML imbriqués , des mesures pour y remédier, qui ne servent toutefois à rien aussi longtemps qu'elles ne fonctionneront pas dans beaucoup des navigateurs très répandus.

Eu égard à tous ces problèmes, une véritable guerre de religion s'est déjà déclenchée dans certains milieux pour trancher quelles sont les "bonnes" et quelles sont les "mauvaises" mesures. Les uns prétendent qu'on devrait s'en tenir à des mentions telles que pt, parce qu'un point doit toujours avoir la même taille, les autres jurent leurs grands dieux que la mention em est salvatrice. La réalité en tous cas est que vous ne devez jamais vous fier à ce que des tailles qui paraissent splendides sur votre écran, soient tout aussi splendides ailleurs. Pour cette raison évitez avant tout pour les mentions déterminantes pour la lisibilité du texte, des valeurs "extrêmes", et réagissez si vous entendez de toutes parts qu'il est difficile de lire vos pages.

Tip:

Quand vous voulez convertir entre différentes unités de mesure, vous pouvez utiliser le Autre page d'information convertisseur point/pouce/millimètre.

 vers le hautvers le bas 

CSS 1.0Netscape 4.0MS IE 3.0 Mentions de couleur

Les mentions de couleur dans les feuilles de style sont possibles d'après les règles de syntaxe CSS pour Autre page d'information définir les couleurs en HTML. Vous pouvez mentionner des valeurs de couleur donc hexadécimales d'après le schéma #XXXXXX, mais aussi utiliser les noms de couleur répandus.

Une possibilité supplémentaire pour définir les couleurs est pourtant offerte par le langage de feuilles de style CSS. Cette possibilité a le schéma rgb(rrr,ggg,bbb). L'expression rgb(...) est toujours la même. Dans les parenthèses doivent figurer trois valeurs décimales ou trois pourcentages, séparés les uns des autres par des virgules. rrr est la valeur du rouge, ggg la valeur du vert et bbb la valeur du bleu de la couleur. Pour les trois valeurs sont autorisés soit des chiffres absolus compris entre 0 (pas de couleur correspondante) et 255 (valeur maximale de la couleur correspondante) soit des valeurs en pourcentage de 0% (pas de couleur correspondante) à 100% (valeur maximale de la couleur correspondante).

Exemples:

<style type="text/css">
<!--
h1 { color:#FFCCDD; background-color:black }
body  { background-color:rgb(51,0,102); }
blockquote  { background-color:rgb(60%,90%,75%); }
//-->
</style>

CSS 2.0 Noms de couleur relatifs à l'utilisateur

À partir de la version 2.0 du langage CSS, il y a encore la possibilité d'utiliser des noms de couleur spécifiques à l'utilisateur, derrière lesquels se cachent des couleurs que l'utilisateur a réglé sur son ordinateur comme environnement de travail. De cette façon vous pouvez utiliser des couleurs qui correspondront aux couleurs choisies par l'utilisateur pour son écran pour structurer vos pages et cela sans que vous ne connaissiez ces couleurs. Les noms de couleurs spécifiques à l'utilisateur qui sont permises sont expliquées ci-après.

Abréviation Signification
activeborder Couleur de la barre de titre active de la fenêtre
activecaption Couleur du titre de la barre de titre active de la fenêtre.
appworkspace couleur de l'arrière plan de la fenêtre de l'application active.
background couleur de l'arrière-plan du bureau.
buttonface couleur des boutons dans les boites de message.
buttonhighlight couleur pour les ombrages en 3D des boutons dans les boites de message.
buttontext couleur du texte des inscriptions de boutons dans les boites de message.
captiontext couleur des titres dans les boites de message.
greytext couleur du texte désactivé dans les boites de message.
highlight couleur des éléments choisis dans des listes de choix.
highlighttext couleur du texte sélectionné.
inactiveborder couleur d'une ligne de titre d'une fenêtre non active.
inactivecaption couleur du titre dans la ligne de titre d'une fenêtre non active.
infobackground couleur pour les info-bulles et les Hints (petites aides déroulantes).
infotext couleur du texte dans les info-bulles et les Hints (petites aides déroulantes).
menu couleur pour les barres de menu.
menutext couleur pour les éléments de menu.
scrollbar couleur de la barre de défilement dans les fenêtres.
threeddarkshadow couleur sombre pour les ombrages d'éléments 3D.
threedface couleur d'éléments 3D.
threedhighlight couleur d'éléments 3D venant d'être cliqués.
threedlightshadow couleur claire pour les ombrages d'éléments 3D.
threedshadow couleur sombre pour les ombrages d'éléments 3D.
window couleur d'arrière plan pour les fenêtres de document.
windowframe couleur de bordures de fenêtre.
windowtext couleur de texte normal dans des fenêtres de document.

Exemples:

<style type="text/css">
<!--
h1 { color:windowtext; background-color:infobackground; }
body  { background-color:appworkspace; }
//-->
</style>

 
 vers le hautvers le bas 

CSS 1.0Netscape 4.0MS IE 3.0 Mentions de valeurs autorisées et mentions de chaînes de caractères

Pour beaucoup de mentions de feuilles de style existe un choix de valeurs autorisées. Ce n'est pas différent du cas de beaucoup de repères HTML. Exactement comme vous pouvez aligner un titre ou un paragraphe de texte en HTML avec les mentions align="left", align="center" ou bien align="right", il y a des mentions de feuilles de style qui attendent certains mots clé. Ainsi il y a par exemple la mention de feuille de style text-align pour l'alignement de texte qui attend les mêmes paramètres, donc left, center ou bien right.

Quelques mentions de feuilles de style attendent la mention d'un nom ou même de plusieurs mots clé. Ainsi, derrière la mention de feuilles de style font-family vous pouvez noter les noms d'une ou de plusieurs polices que vous désirez employer pour le formatage. D'autres mentions de feuilles de style sont des résumés de mentions distinctes. Ainsi par exemple, il y a la mention border (bordure), derrière laquelle vous pouvez noter une mention comme thin solid red. Séparez plusieurs mentions d'une propriété de feuilles de style par des espaces. Quand les mentions elles mêmes contiennent des espaces comme par exemple des noms de polices, vous pouvez utiliser des virgules pour séparer. Dans de tels cas les guillemets sont aussi recommandés.

Pour les noms comme les mentions de polices ou des mentions telles que left, center etc... il importe peu, tout au moins pour l'emploi des CSS. que vous notiez ces mentions en minuscules ou en majuscules . Ce qui s'applique également aux propriétés de feuilles de style elles-mêmes. Toutefois si vous utilisez les CSS sur des documents XHTML ou XML valides, il vous faut écrire les noms d'éléments, les noms d'attributs et les affectations de valeur tels qu'ils sont fixés dans le DTD XML. Pour XHTML tout doit être écrit en minuscules.

Exemples:

<style type="text/css">
<!--
p { font-family:"Comic Sans MS",Arial; text-align:center; }
body  { border:thin dashed silver; background-color:black; }
DIV.SPECIAL { BORDER:THICK DOUBLE RGB(0,64,128); }
blockquote[title="Citation de Corneille"] { color:#000080; }
//-->
</style>

 
 vers le hautvers le bas 

CSS 2.0 Mentions numériques pour la restitution vocale

Pour les propriétés CSS concernant le Autre page d'information contrôle du son pour la restitution vocale, qui n'est cependant, à l'heure actuelle, pas soutenue par les navigateurs, les mentions suivantes de mesure du domaine de l'acoustique et de la mesure du temps sont employées:

Abréviation Signification
deg degré (un cercle a 360 degrés et un angle droit compte 90deg par exemple.
grad Grade, mention de mesure pour les montées ou les descentes
rad Radian, mention de mesure géométrique
ms millièmes de secondes, mention de mesure pour l'unité de temps
s secondes, mention de mesure pour l'unité de temps
Hz hertz, mention de mesure pour les fréquences
kHz kilohertz, mention de mesure pour les fréquences

 
 vers le haut
page suivante Autre page d'information Formatage de la police
page précédente Autre page d'information Formater directement des éléments HTML
 

© 2001 Stefan Münz / © 2003 Traduction Adresse électronique Serge François, 13405@free.fr
Adresse électronique selfhtml@selfhtml.com.fr