Petit tour des propriétés
et de leurs valeurs

• Introduction
• CSS et Dreamweaver
• Tailles et dimensions
• Blocs et flux naturel
• Les calques
• Les CSS à la main :
• Les propriétés :
  — Introduction
  — Blocs
  — Texte
  — Listes
  — Tables
  
• Animations

Page précédente

Introduction

Nous voici maintenant arrivés au point de faire le tour des différentes propriétés et de leurs valeurs. On n'attendra pas de nous une revue exhaustive ; cela n'aurait pas beaucoup de sens étant donné qu'aucun navigateur n'existe en cette mi-2002 où les CSS soient totalement implémentées. Nous essaierons de nous en tenir à ce qui nous paraît important et de renvoyer à chaque fois vers les pages pertinentes des textes officiels pour les détails, quitte à regretter de temps à autres que certaines propriétés annoncées n'existent pas encore... Et puis, il faudra aussi nous excuser si vous ne retrouvez pas toujours ce qui vous intéresserait dans «ce qui nous paraît important», car nous n'avons pas tout essayé, loin de là, et certains points en dehors de notre expérience seront forcément traités schématiquement.

Nous avons classé les propriétés en 5 grandes parties, correspondant aux entrées de notre menu général:
— Blocs : la mise en application de notre chapitre sur les blocs
— Texte : les caractères et le formatage du texte
— Listes
— Tables
A l'entrée de chacune de ces parties, on trouvera un sous-menu détaillant les diverses propriétés évoquées.

(retour au menu)

Dimensions

width: ou height: <longueur> ¦ nn% ¦ inherit ¦ auto

Remarques :
— auto est le défaut. Pour la hauteur, cela signifie que le bloc se débrouillera pour contenir ce qu'on lui donne ; pour la largeur, qu'il prendra la plus grande largeur possible dans son bloc père.
— Les pourcentages sont calculés sur les dimensions de la boîte père (cf illustration ci-contre)
— Dans la mesure du possible, éviter de renseigner height afin de ne pas risquer de débordement si le texte ne vient pas avec la taille souhaitée pour les caractères. Dans la phase de mise de vos page, mettez une couleur de fond ou une bordure pour vérifier jusqu'où le bloc descend.

Selon les CSS, ces valeurs sont les dimensions de la partie utile des blocs. Si on définit une marge interne et une bordure, leurs épaisseurs sont prises en dehors du rectangle width x height. Au contraire, pour les Explorer 5 ou 6, MacOS ou Windows, ce rectangle est la zone totale occupée dans la page ; la bordure et les marges internes, si elles existent, sont prises dedans, réduisant d'autant la partie utile du bloc. Cette divergence peut conduire à des disparités regrettables dans l'affichage quand on passe d'un navigateur à un autre. Nous consacrons un article séparé aux moyens d'y remédier.

Marges et bordures

Marges externes: la propriété margin:

Remarques :
— en général, les marges en haut ou en bas des éléments consécutifs ne s'additionnent pas, mais on prend la plus grande.
— on peut prendre des marges négatives, auquel cas le contenu déborde du bloc père (illustration ci-contre) et risque donc d'être tronqué selon les précautions qu'on a prises ou pas en cas de débordement. A utiliser avec précaution...

Marges internes: la propriété padding:

Cette propriété s'utilise de la même façon que margin, à ceci près que les valeurs doivent toujors être positives, avec la même syntaxe abrégée :

Si on veut fixer les marges côté par côté, on utilisera les propriétés
  padding-left: (à gauche),
  padding-top:(en haut),
  padding-right: (à droite) ou
  padding-bottom: (à droite),
et chaque fois soit avec une longueur, soit avec inherit

Bordures : la propriété globale border:

Remarques :
— Il y a aussi des navigateurs où certains de ces styles ne sont pas du tout implantés ; par exemple Opera5 ne connaît pas ridge et il ne met alors aucune bordure. S'il est important que votre bloc soit bien délimité en dépit de cette bordure absente, il sera alors bon de prévoir également une couleur de fond dans votre bloc.
— Tous les navigateurs n'interprètent pas ces styles de bordure de la même manière. Par exemple, IE5-mac offre un rendu du style inset avec 4 tons dans la couleur, beaucoup plus élaboré que le rendu de NN6 (2 tons seulement, très plat en comparaison).
— Attention avec les bordures épaisses : certains navigateurs placent la bordure dans les dimensions width x height du bloc et réduisent d'autant l'espace utile (IE5-mac) ; d'autres la placent à l'extérieur (NN6, Mozilla)

Les bordures côté par côté.

• Les épaisseurs peuvent se traiter individuellement avec les propriétés border-top-width (pour le haut), border-left-width (pour la gauche), border-bottom-width (pour le bas) et border-right-width (pour la droite), auxquelles on peut donner les valeurs thin, medium, thick ou une expression <longueur> (pas de pourcentage).
  «For fun», une boîte avec
  border-width:6px 12px;
border-color:blue green violet;
border-style: solid dotted ridge outset;
  
  
  On peut aussi utliser une syntaxe abrégée avec border-width, suivie de 1 à 4 valeurs, tout comme margin ou padding.
   
• Pour la couleur, de manière analogue, on peut traiter côté par côté avec border-top-color, border-left-color, border-bottom-color et border-right-color, ou bien tout d'un coup avec la notation abrégée border-color.
   
• Pour les styles, de manière analogue, on peut traiter côté par côté avec border-top-style, border-left-style, border-bottom-style et border-right-style, ou bien tout d'un coup avec la notation abrégée border-style.

Couleur et image de fond

Les questions de couleur et d'image de fond d'un bloc sont contrôlées par la propriété background et ses propriétés dérivées.

Syntaxe abrégée

<couleur>

Un code de couleur, c.à.d. un nom explicite reconnu, soit une notation hexadécimale complète #rrvvbb ou abrégée #rvb, etc... (pour plus de détails sur le codage des couleurs, voir notre article ou le texte officiel du W3C), ou bien encore transparent, la valeur par défaut, c.à.d. pas de couleur du tout.

url(image.gif)

C'est le codage pour une image de fond, les lettres url( ) étant obligatoires et image.gif devant être remplacé par l'adresse de l'image

<position>

C'est un ensemble d'une ou de deux valeurs (en général) déterminant la position de l'image de fond. Les choix les plus simples sont :
  — top pour mettre l'image tout en haut ;
  — bottom pour la mettre tout en bas ;
  — left pour la mettre tout à gauche ;
  — right pour la mettre tout à droite;
  — center pour la centrer dans la direction qui n'a pas déjà été traitée. Par exemple, on remplacera <position> par top center pour aller en haut tout en centrant horizontalement, ou par center center pour être complètement centré.

On peut aussi utiliser des longueurs ou des pourcentages pour se caler différemment dans la page, si le navigateur le veut bien ; voir les explications officielles du W3C. Par exemple 50% 50% équivaut à un centrage complet. La valeur par défaut est top left (image en haut à gauche).

Attention, dans le cas d'un fond fixe, ces coordonnées de positionnement devraient être prises par rapport à la fenêtre du navigateur même pour un bloc <DIV> placé au milieu de la page. En conjonction avec les fonds fixes, on peut en tirer des effets graphiques remarquables. Malheureusement, cela ne fonctionne (en mi-2002) qu'avec IE5-mac, NN6 et Mozilla, mais pas avec Opera, ni avec IE5/6-windows (même pour IE6 en mode «conforme W3C»); ces derniers positionnent les images de fond par rapport au bloc correspondant.
 

<répétition>

C'est un ensemble d'une ou deux valeurs prises parmi
   repeat ¦ repeat-x ¦ repeat-y ¦ no-repeat
indiquant si l'image doit être répétée ou non, ou seulement selon la direction des x ou des y. La valeur par défaut est repeat, pour une répétition en x et en y.

<fixation>

C'est une valeur unique indiquant si l'image doit rester fixe ou non quand le visiteur fait défiler la page avec l'ascenseur :
   — scroll (valeur par défaut) fait défiler l'image
   — fixed pour avoir une image de fond fixe.

Syntaxe détaillée

Toutes les valeurs précédentes correspondent à des propriétés spécialisées. On peut remplacer la ligne abrégée ci-dessus par l'ensemble des 5 instructions suivantes :

background-color: <couleur>;
background-image: url(image.gif);
background-position: <position>;
background-repeat: <répétition>;
background-attachment: <fixation>;

Pourquoi faire aussi compliqué quand on peut faire simple ? Peut-être pour une question de souplesse du langage, en offrant plusieurs manières d'aboutir au même résultat ? Peut-être pour une programmation plus simple des éditeurs wysiwyg comme Dreamweaver ?

Positionnement

Positionnement hors flux (calques)

Positionnement dans le flux naturel

Ce paragraphe concerne les éléments avec position:static; (valeur par défaut) ou bien ceux pour lesquels on n'a pas spécifié de propriété position.

Si deux éléments se suivent tous deux avec un style float:left, le 2ème vient se mettre juste à droite du premier (ou en dessous s'il ne reste pas assez de place dans la ligne).

Centrage horizontal

Positionnement dans un flux en ligne

Dans le cas d'un petit bloc (image, bloc SPAN, etc...) pris dans un paragraphe, le seul problème de positionnement est le placement vertical de la ligne de texte par rapport au bloc. On règle cela en spécifiant une propriété vertical-align pour le bloc :

Nous avons discuté de ces valeurs dans notre chapitre sur les blocs. On peut aussi voir les recommandations du W3C à ce sujet.
 
 

Visibilité

La visibilité du contenu d'un bloc est gouvernée par les propriétés suivantes :

Les points de suspension indiquent qu'il y a d'autres valeurs, mais plus complexes et au sujet desquelles le lecteur curieux consultera les recommandations officielles du W3C. Nous avons déjà discuté des trois premières propriétés dans les chapitres précédents [1, 2].

visibility: visible ¦ hidden ¦...

Cette propriété permet de rendre un bloc invisible (visibility:hidden) ou de le montrer (visibility:visible). Le W3C propose deux autres valeurs, inherit et collapse, nettement moins évidentes d'accès.
 

display:block ¦ inline ¦ list-item ¦ none ¦ ...

Cette propriété fait complètement disparaître un bloc de la page (display:none), en provoquant un réajustement des autres éléments de la page pour occuper la place laissée vide. Le bloc revient avec display:block, ou display:inline, ou display:list-item selon qu'il s'agit d'un bloc dans le flux vertical, ou d'un bloc en ligne, ou d'un article de liste (si la valeur n'est pas correcte, on passe d'un type d'affichage à un autre). Les CSS2 ont rajouté de nombreuses autres valeurs pour d'autres types de blocs.
 

z-index: <nombre>

Dans le cas où des calques seraient partiellement ou totalement superposés, les <nombres> pris comme valeurs indiquent l'ordre dans lequel on voit ces calques. Nous avons présenté une démonstration dans le chapitre sur les calques.
 

overflow:visible ¦ hidden ¦ scroll ¦ auto

Cette propriété spécifie ce qui se passe quand le contenu déborde des dimensions allouées au bloc. L'illustration ci-contre et les liens ci-dessous devraient montrer ce qui se passe... si votre navigateur le veut bien :-)

Cette boîte a une petite hauteur (height:80px) et nous y plaçons délibérément un texte nettement trop long, juste pour voir ce qui se passe (on doit normalement sortir du cadre).

• visible : tout le contenu doit apparaître, mais sans pour autant agrandir les contours de la boîte d'origine (valeur par défaut).
  Dans le cas d'un calque, le texte débordant risque de se mélanger fâcheusement à ce qui était en dessous.
• hidden : ce qui déborde est perdu
• scroll : on doit voir apparaître des ascenseurs pour accéder à ce qui est en trop.
• auto : le navigateur se débrouille, en général avec des ascenseurs.

Tout ne se passera pas comme prévu avec les navigateurs du moment. IE5.5-windows agrandira spontanément le height de manière à éviter tout débordement ; NN6-mac a l'air de mieux se comporter, mais les ascenseurs ne marchent pas ; IE5-mac a tout l'air d'être bugué pour overflow:scroll (mais marche bien pour auto)... Seul Mozilla fonctionne comme prévu dans tous les cas.
:-(

 

clip: rect (d_haut, d_droit, d_bas, d_gauche)

Cette propriété sert essentiellement à rétrécir la partie du bloc qui sera affichée. Les arguments dans la valeur rect(...) sont les décalages par rapport aux côtés nominaux du bloc.
Comme nous n'avons aucune pratique de cette propriété, nous renvoyons au texte du W3C pour les détails.