Cette page traite encore des propriétés et des règles CSS qui s'y appliquent mais à un niveau de difficulté un peu plus grand et pour lesquelles j'ai donné quelques exemples. Voyez le tableau en position absolue près de ce résumé ainsi que le tableau en position fixe qui est collé dans le coin droit de votre écran (Internet Explorer me place cependant dans le coin inférieur gauche de l'écran).
Cette quatrième partie de ce tutoriel considère plus particulièrement des propriétés s'appliquant au boîtes (type block), aux tableaux, au positionnement. Il s'agît de propriétés dont j'ai trouvé la compréhension moins facile que pour les propriétés de pa Partie 3 de ce tutoriel.
Propriétés des boîtes
La notion de boîte (block) s'oppose à celle en-ligne (in-line). Par défaut, les éléments <div>, <p> sont des boîtes alors que les éléments <b>, <i> et <span> sont des éléments en-ligne. La distinction entre les deux est simple: les éléments de type block se placent toujours l'un en dessous de l'autre (comme un retour chariot) alors que les élément de type inline se placent sur une même ligne que le contenu adjacent (sans retour de chariot). Par ailleurs, un élément de type block occupe automatiquement toute la largeur disponible dans son conteneur, peut contenir des éléments de type block ou in-line, et peut être dimensionné à l'aide des propriétés telles que width, height, min-width, ou min-height,...
 |
|
|
width, height, max-width, max-height
Les propriétés width et height désignent la largeur et la hauteur et pixels ou en pourcentage (%) alors que max-width et max-height empêchent width et height de devenir plus grandes que ces valeurs.
padding
La propriété padding désigne la marge interne laissée entre un élément et sa bordure. C'est une super-propriété qui combine les propriétés padding-left, padding-top, padding-right et padding-bottom. Elle s'exprime en terme de pixels, de pourcentage (%) ou d'unités de mesures (cm, pouces, ...). Cette marge interne prend la couleur d'arrière plan de l'élément. La valeur auto implique un règlage automatique par le fureteur.
margin
La propriété margin désigne la marge externe laissée entre la bordure d'un élément et ses voisins. C'est une super-propriété qui combine les propriétés margin-left, margin-top, margin-right et margin-bottom. Elle s'espriment en terme de pixels, de pourcentage (%) ou d'unités de mesures (cm, pouces, ...). La valeur auto implique un règlage automatique. Notons que la marge est toujours transparente et ne supporte aucune couleur de fond.
Elle peut prendre les valeurs suivantes [w3schools.com: margin]:
| Valeur | Description |
|---|---|
| auto | Le fureteur calcule lui-même la marge |
| length | Spécifie la largeur de la marge en pixels.La valeur par défaut est 0px |
| % | Spécifie une marge comme pourcentage de la largeur de l'élément conteneur |
| inherit | Même valeur que celle de l'élément parent |
border
La propriété border, introduite avec CSS-1, permet de personaliser les bordures qui apparaîssent autour des éléments HTML de type "block". Il s'agît d'une super-proptiété qui combine les propriétés border-width, border-color et border-style. Cette proptiété se décompose aussi en border-top, border-right, border-bottom, border-left.
border-width
La propriété border-width, introduite avec CSS-1, définit la largeur de la bordure. Elle peut prendre les valeurs suivantes [w3schools.com: border-width]:
| Valeur | Description |
|---|---|
| thin | La bordure est mnce |
| medium | Spécifie une bordure d'épaisseur moyenne. C'est la valeur par défaut |
| thick | La bordure est épaisse |
| length | Permet de définit l'épaisseur de la bordure |
| inherit | Même valeur que celle de l'élément parent |
border-color
La propriété border-color, introduite avec CSS-1, définit la couleur de la bordure. Elle peut prendre les valeurs suivantes [w3schools.com: border-color]:
| Valeur | Description |
|---|---|
| color | Définit la couleur de la bordure.Voir Color dans la Partie 3 de cet article pour une liste complète des valeurs de couleur. |
| transparent | La bordure sera transparence. C'est la valeur par défaut |
| inherit | Même valeur que celle de l'élément parent |
border-style
La propriété border-style, introduite avec CSS-1, définit le style de bordure entourant un élément de type block. Le tableau suivant illustre l'apparence des bordures selon le style. Pour les rendre correctement, j'ai donné 10 pixels en épaisseur et j'ai utilisé des marges à gauche et à droite de 50 pixels.
Elle peut prendre les valeurs suivantes [w3schools.com: border-style]:
| Valeur | Exemple | Apparence |
|---|---|---|
| solid | p.borderSolid | Exemple de bordure de type "solid" |
| double | p.borderDouble | Exemple de bordure de type "double" |
| dotted | p.borderDotted | Exemple de bordure de type "dotted" |
| dashed | p.borderDashed | Exemple de bordure de type "dashed" |
| inset | p.borderInset * | Exemple de bordure de type "inset" |
| outset | p.borderOutset * | Exemple de bordure de type "outset" |
| ridge | p.borderRidge * | Exemple de bordure de type "ridged" |
| hidden | p.borderHidden | Exemple de bordure de type "hidden" C'est la valeur par défaut |
| Exceptions | * Internet Explorer, Chrome et Safari rendent ces valeurs comme si c'était une bordure solide. |
Ces styles de bordures sont rendus correctement dans Firefox 15.0.1 et Opera. Cependant, Internet Explorer 9, Chrome et Safari affichent les styles inset, outset et ridge comme si c'était solid.
border-radius
La propriété border-radius, introduite avec CSS-3, peut être utilisée pour arrondir les coins des bordures. Le rayon (exprimé en pixels) s'applique aussi à l'arrière-plan (background) même si l'élément n'a pas de bordure. C'est une propriété récente que tous les navigateurs modernes reconnaissent sans préfixe vendeur puisqu'elle est finalisée. En pratique pour les versions précédentes des navigateurs (par ex. Firefox 3.6 ou Chrome 9), la propriété devait être préfixée par -moz- sur Gecko ou -webkit- sur Webkit pour fonctionner sur ces fureteurs. border-radius devient donc -moz-border-radius, -webkit-border-radius.
Il s'agît d''une super-propriété qu combine border-radius-top, border-radius-left, border-radius-right et border-radius-bottom.
box-shadow
La propriété box-shadow, introduite avec CSS-3, était jusqu'à récemments une propriété expérimentale. Elle accepte un ou plusieurs effets d'ombre définis sous la forme d'une liste séparée par des virgules. Elle permet de projeter l'ombre de presque n'importe quel élément. Si une bordure arrondie est définie à l'aide de border-radius sur l'élément auquel s'applique l'ombre, l'ombre ainsi créée aura les mêmes bords arrondis. Le niveau sur l'axe z d'ombres multiples est le même que les ombres de texte multiples (la première ombre spécifiée est sur le dessus).
Elle peut prendre les valeurs suivantes [w3schools.com: box-shadow]:
|
Voyer ici quelques exemples d'utilisation de cette propriété (avec le code):
| Exemples d'utilisation de box-shadow | box-shadow: 10px 5px 5px black; |
|---|---|
box-shadow: 3px 3px red, -1em 0 0.4em olive; |
|
box-shadow: 60px -16px teal; |
|
box-shadow: inset 0 0 2em gold; |
|
Les usagers de Firefox, Safari/Chrome, Opera and IE9 devraient voir un ombrage gris sous cette boîte. La commande est "box-shadow: 10px 10px 5px #888;"
|
Propriétés des tableaux
La balise <table> est l'élément de base d'un tableau et il est interdit de les imbriquer les unes dans les autres. Comme un tableau est un élément de type block, il partage de nombreuses propriétés avec ces éléments: soit width, height, padding, margin et border. En plus, il y a les propriétés suivantes [w3schools.com: table]:
| Propriété | Valeurs | Description |
|---|---|---|
| border-collapse | collapse, separate | Fusion des bordures |
| empty-cells | hide, show | Affichage des cellules vides |
| caption-side | bottom, top | Position du titre du tableau |
Propriétés de positionnement
Les propriétés de positionnement sont display, float, clear, position, top, bottom, left, right et z-index.
display
La propriété display, introduite avec CSS-1, est un puissant outil souvent mal connu et dont les possibilités réelles sont rarement utilisées. Il s'agît d'une des techniques les plus efficaces en positionnement CSS qui consiste à donner à un élément un mode de rendu différent de celui par défaut. C'est ce que fait cette propriété: elle permet d'indiquer explicitement le mode de rendu d'un élément HTML. Les valeurs les plus utilisées sont none, block et inline. La valeur none retire l'élément de type block de l'affichage courant. Son emplacement est ainsi occupé, selon les cas, par les blocs adjacents, comme si la boîte n'était pas là! Les valeurs block et in-line transforment la présentation de l'élément.
Cette propriété peut prendre nombre d'autres valeurs comme indiqué dans la table qui suit [w3schools.com: display et Display, vous connaissez ?]:
| Valeur | Description |
|---|---|
| none | L'élément ne sera pas affiché |
| block | L'élément est affiché comme un block (comme un paragraphe). |
| inline | C'est la valeur par défaut. L'élément est affiché comme un élément in-line (comme span). |
| run-in | |
| compact | |
| marker | Précise la qualité de marqueur du contenu généré apparaissant avant ou après une boîte. |
| inline-block * | L'élément est placé comme un élément in-line (sur la même ligne que le contenu adjacent) mais se comporte comme un élément block. |
| inline-table * | L'élément est affiché comme un tableau in-line |
| list-item | L'élément est affiché comme un item de liste ce qui signifie qu'il sera précédé par un puce (bullet) |
| table * | L'élément est affiché comme un tableau |
| table-caption * | L'élément est affiché comme une légende d'un tableau |
| table-cell * | L'élément est affiché comme une cellule d'un tableau |
| table-column * | L'élément est affiché comme une colonne d'une tableau |
| table-column-group * | L'élément est affiché comme un groupe de colonnes d'un tableau |
| table-footer-group * | L'élément est affiché comme un pied-de-page d'un groupe de rangées d'un tableau |
| table-header-group * | L'élément est affiché comme une entête de groupe de rangées d'un tableau |
| table-row * | L'élément est affiché comme une rangée d'un tableau |
| table-row-group * | L'élément est affiché comme un groupe de rangées d'un tableau (on ne le voit pas) |
| inherit * | Même valeur que celle de l'élément parent |
| Remarques | * ces valeurs ne sont pas supportées par IE-7 et IE-8 |
Le problème principal avec la propriété display vient de ce que cette propriété est appliquée inégalement dans les fureteurs qui ne sont pas entièrement à la hauteur de la norme. C'est le cas d'Internet Explorer qui exige l'utilisation d'un doctype particulier pour l'affichage des valeurs table-xxx. Pour juger de la conformité de cette propriété dans différents fureteurs, voir The display declaration.
float
Comprendre le comportement de la propriété float implique une compréhension globale du flux. Les CSS sont en effet conçues pour afficher les éléments au sein d'un flux : pour simplifier, les éléments en ligne, ou inline, sont affichés les uns à la suite des autres, tandis que les éléments conteneurs, ou block, sont affichés les uns au dessous des autres, occupent toute la largeur disponible et génèrent un retour à la ligne après leur affichage.
| Valeur | Description |
|---|---|
| left | L'élément s'affiche gauche |
| right | L'élément s'affiche gauche |
| none | L'élément n'est pas affecté et il sera affiché là où il devait l'être dans le flux. C'est la valeur par défaut |
| inherit | Même valeur que celle de l'élément parent |
La propriété float, introduite avec CSS-2, permet de sortir un élément du flux, et de l'afficher à gauche ou à droite. Elle peut prendre les valeurs du tableau qui flotte à droite de ce paragraphe [w3schools.com: float].
Très souvent, la propriété float est utiliser dans le seul but de placer un élément à gauche ou à droite des autres éléments qui sont demeurés dans le flux. Ce seul objectif peut avoir des effts indésirables car le reste du flux sera souvent décalé à droite de l'élément flottant, et poursuivra en dessous selon sa longueur. Par défaut, l'élément standard suivant un élément flottant s'affichera dans l'espace laissé par la largeur du flottant.
Ce comportement inattendu du reste du flux se retrouve souvent sous la forme d'autres éléments flottants qui n'occupent pas la place voulue. C'est ici que la propriété clear entre en jeu.
clear
| Valeur | Description |
|---|---|
| left | Génère un élément bloc et le place en bas juste à droite de celui qui le précède dans le flux |
| right | Génère un élément bloc et le place en bas juste à gauche de celui qui le précède dans le flux |
| both | Génère un élément bloc qui va se déplacer sous chacune des boîtes flottantes qui précèdent dans le code source |
| none | Rien n'est affecté par rapport aux éléments flottants et cette propriété n'influence pas le positionnement en cours. C'est la valeur par défaut |
| inherit | Même valeur que celle de l'élément parent |
La propriété clear est utilisée pour définir si un élément doit se trouver sur la même bande horizontale qu’un élément flottant. On peut donc écrire que cette propriété indique de quelle manière le texte va être placé par rapport à une boîte flottante précédente. Elle est applicable sur l'ensemble des balises HTML si ces dernières ne sont pas en position:absolute.Elle peut prendre les valeurs suivantes (le tableau utilise la règle {float: right;}:
Le paragraphe suivant aurait normalement été placé à la suite ce celui-ci si...
... je n'avais pas donné à ce paragraphe la classe clearright qui utilise la règle {clear: right;} et voyez ce que ça donne: il a été déplacé vers le bas en laissant un espace libre à gauche du tableau flottant [w3schools.com - clear].
position
En fonctionnement normal, les éléments se positionnent en fonction de leur ordre d'arrivée dans le fichier HTML (c'est le flux normal). Les premiers éléments rencontrés se placent en haut de la page et les suivants en dessous. Le dernier élément se retrouve donc en bas de la page. La propriété position permet de fixer l'emplacement d'un élément sur la page, indépendamment de sa position dans le fichier HTML : le premier élément peut se retrouver en bas de la page.
La propriété position, introduite avec CSS-2, fonctionne avec les propriétés top, right, bottom, left qui permettent de définir l'emplacement de l'élément.
| Valeur | Description |
|---|---|
| static | Les éléments sont affichés dans l'ordre du flux normal du document. C'est la valeur par défaut |
| absolute | L'élément est positionné relativement à l'élément ancètre positionné autrement que "static". C'est un outils très puissant qui permet de placer n'importe quel élément de la page exactement là où on le veut. Le valeurs de positionnement seront relatives au prochain parent en position relative ou absolue. |
| fixed | L'élément est positionné relativement à la fenêtre du fureteur |
| relative | L'élément est positionné relativement à sa position normale de sorte que "left:20px" ajoute 20 pixels à la position LEFT de l'élément. |
| inherit | Même valeur que celle de l'élément parent. |
Sur cette page, on a plusieurs exemples d'application de la propriété position. En haut de cette page, à 250 pixels du hautet 25 pixels de la gauche de la page, vous trouverez un tableau qui utilise la règle {position: absolute; top: 250px; left: 35px;}. Vous remarquerez aussi qu'il y a un autre tableau qui semble collé au bas inférieur droit de l'écran: ce tableau utilise la règle {position: fixed; top: 0px; right:0px;}. Enfin, immédiatement après cette phrase, il y a un autre tableau qui a été déplacé de 200 pixels vrs la gauche de sa position normale par la règle {position: relative; left:200px;}.
| Exemple de position "absolute" |
|---|
| Je suis en position "absolute" (voir position) avec la règle CSS: {position: absolute; top: 190px; left: 30px;} |
| Exemple de position "relative" |
|---|
| Je suis en position "relative" (voir position) grâce à la règle CSS: {position: relative; left:200px;}. Je suis donc à 200 pixels à gauche de là où je serais normalement. |
| Exemple de position "fixed" |
|---|
| Je suis en position "fixed" (voir position) grâce à la règle CSS: {position: fixed; top: 0px; right:0px;}. Je suis donc collé au coin inférieur droit de l'écran. Par exception, Internet Explorer me place à gauche, en bas de l'écran. |
top, bottom, left, right
Les propriétés top, bottom, left et right définissent la position par rapport au haut, au bas, à la gauche et à la droite de la page. Ces propriétés sont exprimées en pixels ou en pourcentage (%).
z-index
La propriété z-index, introduit avec CSS-2, définit l'ordre d'affichage en cas de superposition. C'est une propriété qui paraît simple à première vue mais elle est plus complexe qu'il y paraît. Elle peut prendre les valeurs suivantes [w3Schools.com: z-index]:
| Value | Description |
|---|---|
| auto | L'ordre d'affichage est lemême que celui de son parent. C'est la valeur par défaut. |
| number | Définit l'ordre d'affichage d'un élément. La plus grande valeur est affichée au dessus des autres. Les valeurs négatives sont permises. |
| inherit | Même valeur que celle de l'élément parent. |
Si vous êtes familier avec la représentation des coordonnées en trois dimension, vous savez que l'axe des x représente l'horizontale, l'axe des y représente le vertical alors que l'axe des z représente la profondeur comme illustré ici:
 |
On ne voit pas l'axe des z sur un écran car il n'a que deux dimensions. Cependant, on peut le représenter en perspective en plaçant certains éléments devant ou derrière d'autres: c'est le rôle du z-index.
Si on lui attribue une valeur positive, un élément dera situé en avant d'un autre ayant une valeur positive plus petite ou une valeur négative. Plus la valeur est négative, plus l'élément sera situé loin derrière.
Je ne vais pas m'étendre plus sur le sujet mais un traitement plus complet est disponible dans un article de Stepeh Brdley intitulé What You May Not Know About the Z-Index Property.
cursor
La propriété cursor, introduite avec CSS-2, détermine quel cursor sera affiché. Elle peut prendre les valeurs suivantes [w3Schools.com: cursor]:
| Valeur | Description | Survolez une des cases suivantes |
|---|---|---|
| URL | Consiste en une suite de curseurs personalisés séparés par des virgules. Note: Il faut toujours spécifier un curseur générique à la fin de la liste au cas où aucun des curseur définis ne peut être utilisé. Opera 9.3 et Safari 3 ne supporte pas ces valeurs. |
|
| auto | Le fureteur décide quel curseur utiliser. C'est la valeur par défaut. | |
| crosshair | Affiche un curseur en forme de croix fine (crosshair). | |
| default | Affiche le curseur par défaut. | |
| e-resize | Affiche un curseur en forme de double petite flèche horizontale | |
| help | Affiche un curseur en forme de flèche et "?" | |
| move | Affiche un curseur en forme de quatre flèches en croix | |
| n-resize | Affiche un curseur en forme de double petite flèche verticale. | |
| ne-resize | Affiche un curseur en forme de double petite flèche en diagonale bas gauche vers haut droit. | |
| nw-resize | Affiche un curseur en forme de double petite flèche en diagonale bas droit vers haut gauche. | |
| pointer | Affiche un curseur en forme de main avec un doigt déplié. | |
| progress | Affiche un curseur qui indique que le programme est occupé. | |
| s-resize | Affiche un curseur en forme de double petite flèche verticale. | |
| se-resize | Affiche un curseur en forme de double petite flèche en diagonale bas droit vers haut gauche | |
| sw-resize | Affiche un curseur en forme de double petite flèche en diagonale bas gauche vers haut droit, | |
| text | Affiche un curseur en forme de sorte de grand I. | |
| w-resize | The cursor indicates that an edge of a box is to be moved left (west) | |
| wait | Affiche un curseur indiquant que le programme est ocupé | |
| not-allowed | Affiche un curseur en forme de rond barré | |
| inherit | Même valeur que celle de l'élément parent |
