Éducation, société et technologie

CSS - Les règles de styles par défaut

mercredi 15 juin 2005 par André Vincent

En l’abscence de règles de styles explicitement définies dans une feuille de styles ou lorsque les feuilles de styles sont désactivées (Mozilla, Firefox et Opera le permettent), tous les agents navigateurs modernes appliquent alors par défaut certaines règles de styles qui en général sont identiques d’un logiciel à l’autre. Apprenez à connaître ces règles.

Les règles de styles par défaut suggérées par le World Wide Web Consortium sont définies dans l’Annexe A des Recommandations CSS2 (et par extension XHTML 1.0 et 1.1). Tous les agents navigateurs modernes qu’il nous a été donné de tester, respectent ces règles, à quelques nuances mineures près.

Cette feuille de style peut ainsi constituer un bon départ à toute feuille de style personnalisée pour redéfinir les valeurs de certains éléments (X)HTML.

 En voici les grandes lignes

  • D’abord est défini l’affichage (display) des divers types d’éléments, dont plus particulièrement les éléments de type BLOC (display : block) ainsi que les éléments de type LISTE et TABLEAU.
  • Sont également définis les valeurs typographiques (font-size, font-family, font-weight, font-style, line-heigt, text-align, text-decoration, vertical-align, white-space) par défaut de certains éléments.
  • Enfin, sont aussi définis les marges (margin) et l’espacement (padding) de certains éléments.

Les autres règles sont plus spécifiques et concernent la direction d’écriture multilingue (BDO), le contrôle des marges et des sauts de pages pour l’impression (@page et @media print) et certaines règles de lecture pour les agents navigateurs vocaux (@media aural).

 Examinons certaines règles plus en détail

1. Les valeurs typographiques

...définit l’interligne pour tout élément de la page, à moins qu’il ne soit autrement défini ailleurs dans la feuille de style pour un élément en particulier.

...définit la taille relative (corps) de tous les éléments de TITRE (H1, H2, ...). Deux remarques ici :

  1. la taille de H4 n’est pas définie, en conséquence elle hérite de la valeur implicite 1em  ;
  2. l’interligne des éléments de type TITRE héritent de l’interligne par défaut de BODY, à l’exception de H5 qui aura une valeur d’interligne de 1.17em.

...définit que tous les éléments de TITRE (H1, H2, ...) seront par défaut affichés en gras, tout comme les éléments B et STRONG.

...définit que les éléments I, CITE, EM, VAR et ADDRESS seront par défaut affichés en italique.

...définit que les éléments PRE, TT, CODE, KBD et SAMP seront par défaut affichés avec une police à chasse fixe (monospace) tel que défini dans les préférences du logiciel de navigation - généralement Courrier .

...définit qu’à l’intérieur de l’élément PRE, les retours à la ligne, les tabulations et les espaces multiples seront pris en compte, alors que pour les autres éléments, ils ne le sont pas.

...définit que l’élément BIG aura une taille de 1.17em relativement à la taille de son élément parent. Les éléments SMALL, SUB et SUP auront une taille de .83em relativement à la taille de leur élément parent. De plus, les éléments SUB et SUP seront légèrement décalés verticalement de leur ligne de base respectivement vers le bas (sub) et vers le haut (sup).

2. Marges et espacement - margin et padding

...définit qu’il y aura, par défaut, un espacement de 8px à l’intérieur de l’élément BODY ou, si l’on préfère, à l’intérieur de la fenêtre du logiciel de navigation. Cet étrange réglage est un héritage des premiers logiciels de navigation. Aujourd’hui, c’est l’un des premiers réglages que modifient les concepteurs de pages web dans leur feuille de style : BODY { margin: 0; padding: 0 }

...définit que tous ces éléments auront une marge (margin) au dessus et en dessous d’une valeur de 1.33em relative au corps (font-size) des caractères du contenu textuel de l’élément lui-même.

...définit les marges au dessus et en dessous des éléments de TITRE, à l’exeception de H4, déjà défini.

...définit le renfocement de gauche et de droite de l’élément BLOCKQUOTE.

...définit le renfocement de gauche des éléments de type LISTE.

...règle à 0 les marges au dessus et en dessous des éléments OL et UL lorsqu’ils sont imbrigués les uns dans les autres.


Accueil | Contact | Plan du site | | Statistiques du site | Visiteurs : 15096 / 1816296

Suivre la vie du site fr  Suivre la vie du site Cours Web  Suivre la vie du site Sites web statiques  Suivre la vie du site CSS - Feuilles de styles   ?    |    titre sites syndiques OPML   ?

Site réalisé avec SPIP 3.1.4 + AHUNTSIC

Creative Commons License

Visiteurs connectés : 7