La dernière fois, nous avons étudié l'utilisation de CSS pour contrôler la typographie et les espaces blancs. Cette fois-ci nous étudierons les bordures et arrière-plans.
Avant que nous ne démarrions, nous avons besoin de définir quelques grandes catégories d'éléments. Généralement, il existe deux éléments dans le HTML : "block" et "inline". Il en existe d'autres, mais pour cet article ils peuvent être pensés comme des sous-ensembles de ces deux grandes catégories.
Le moyen le plus simple de penser ces élements est ceci : à moins d'être définis autrement dans une feuille de style, les éléments de bloc ont une largeur égale à celle de la fenêtre du navigateur et sont aussi hauts que nécessaires pour contenir leurs contenus. Comme le nom l'insinue, ils réservent une aire rectangulaire—un bloc—sur la page.
<hn>, <p> et <div> sont des balises de niveau-bloc. La plupart contiennent d'autres éléments de niveau bloc aussi bien que des éléments "inline".
Les éléments "inline" n'occupent que l'espace dont ils ont besoin et sont contenus à l'intérieur des éléments de bloc. Ceux-ci comprennent <em>, <a>, <img> et <span>. Quelques éléments en-ligne peuvent contenir d'autres éléments en-ligne, mais il peuvent ne jamais contenir d'éleéments de niveau bloc.
Woaa ! Vous pouvez vous demander pourquoi je me soucie de saisir tout ça. Deux raisons. D'abord, pour que votre feuille de style fonctionne correctement, elle a besoin de s'appliquer sur un document (X)HTML bien formé. Si vous mélangez incorrectement des éléments de niveau-bloc et des éléments en ligne, vous pouvez obtenir des résultats inattendus sur la façon dont votre document s'affiche.
Deuxièmement, cet article couvre l'usage des bordures et arrière-plans. Les éléments de niveau blocs affichent leurs bordures et arrière-plans d'une façon tout à fait différente que ne le font les éléments en ligne. Bien comprendre ces distinctions vous aidera à décider comment les utiliser dans votre conception. En fait, nous pouvons ajouter des bordures et arrière-plans aux éléments pour nous aider à voir si ce sont des éléments de niveau bloc ou des éléments en ligne.
Comme exemple, appliquons une bordure aux ems avec une classe de “sample1” via les syntaxe et CSS suivantes :
<p>Le <em class="sample1">texte mis en valeur
<br /> dans ce paragraphe a une bordure</em> autour de lui.</p>
.sample1 {
border: 1px solid #333;
}
Nous obtiendrons le résultat suivant :
Le texte mis en valeur
dans ce paragraphe a une bordure autour de lui.
J'ai forcé un retour chariot au milieu du texte mis en valeur afin que vous puissiez voir comment le navigateur gère le dessin de la bordure dans cette situation.
Nous pouvons appliquer la même classe “sample1” à un paragraphe :
<p class="sample1">Dans cet exemple, la totalité du paragraphe est cloturée dans une bordure.</p>
Et voilà le résultat :
Dans cet exemple, la totalité du paragraphe est cloturée dans une bordure.
Bordures
Vous avez déjà vu un format raccourci pour spécifier la bordure d'un élément. En reprenant l'exemple, vous avez déjà évalué ce que chaque section fait, et que cela s'applique à toutes les quatres bordures de l'élément.
La première valeur dans l'exemple renvoie à la largeur de la bordure border-width. Cette valeur peut être réglée comme une longueur (cad., 1px), ou avec les valeurs relatives thin, medium ou thick. Les valeurs relatives sont à même de donner différents rendus dans différents navigateurs, mais thick sera toujours plus épais que thin.
La largeur de la bordure peut être réglée séparément pour chaque bordure en utilisant les propriétés border-top-width, border-right-width, border-bottom-width et border-left-width. Le raccourci de propriété border-width peut toutes les régler en une fois en utilisant de une à quatre valeurs, séparées par des espaces. Les valeurs s'appliquent dans l'ordre des bordures haute, droite, bas et gauche. Si vous utilisez moins de quatre valeurs, elle s'appliqueront aux bordure comme suit :
{ border-width: thin } /* thin thin thin thin */
{ border-width: thin thick } /* thin thick thin thick */
{ border-width: thin thick medium } /* thin thick medium thick */
Gardez bien à l'esprit que le même modèle s'applique aux raccourcis de propriétés pour les borders tout comme les padding et margins.
La seconde valeur dans l'exemple s'applique au style de la bordure border-style. Cett propriété peut prendre les différentes valeurs (comme définies par le W3C) :
- none
- Pas de bordure ; la largeur de bordure est zéro.
- hidden
- Idem à 'none', sauf dans des cas spéciaux.
- dotted
- La bordure est une ligne en pointillé.
- dashed
- La bordure est une ligne en tirets.
- solid
- La bordure est une ligne en trait plein.
- double
- La bordure est une ligne double. La somme de ces deux lignes et l'espace entre elles est égal à la valeur de ‘border-width’.
- groove
- La bordure donne l'impression qu'elle est gravée dans le canevas.
- ridge
- L'opposé de ‘groove’ : la bordure donne l'impression que la boîte entière sort du canevas.
- inset
- La bordure donne l'impression que la boîte est incrustée dans le canevas.
- outset
- L'opposé de ‘inset’: la bordure donne l'impression que la boîte sort du canevas.
Les navigateurs ont beacoup de latitudes pour intepréter les bordures —certains n'implémentent même pas certains styles.
A nouveau, ceux-ci peuvent être réglés individuellement avec border-top-style, border-right-style, etc., et peuvent être réglés en une fois avec le raccourci de propriété border-style en lui donnant de une à quatre valeurs séparées.
La troisième valeur règle la couleur de la bordure border-color. Ceci peut être réglé individuellement (border-top-color, etc.) ou avec le raccourci de propriété border-color . La valeur de la couleur peut être réglée comme décrit dans le précédent article de cette série. En outre, une bordure peut avoir une valeur de couleur transparent. Ceci signifie que la bordure est transparente, mais cela a vraiment n'importe quelle valeur qu'il lui a été assigné. Il existe des possibilités intéressantes —regardez la CSS House et A Study of Regular Polygons.
Pour conclure, nous en venons au raccourci de propriété border. Cette propriété règle les trois propriétés de bordure (largeur, style et couleur) pour toutes les quatres bordures en une fois. Dans ce raccourci, toutes les quatres bordures reçoivent les mêmes valeurs. Si vous voulez différentes valeurs, vous devrez utiliser l'une des autres propriétés de bordures.
Arrière-Plan
Dans le précédent article, nous avons abordé brièvement la propriété background pour donner une couleur d'arrière-plan à la page. Mais la body d'une page n'est pas le seul élément qui peut avoir une propriété background —n'importe quel élément peut avoir à la fois des bordures et un arrière-plan. Le background n'est pas limité à la couleur, quoique—il puisse aussi contenir une image. L'usage créatif de ces propriétés a mené à la beauté et la diversite des designs que vous pouvez voir sur CSS Zen Garden et le CSS Vault.
La valeur par défaut de n'importe quel élément de background est transparent. Ceci permet au background de son élément parent de ralentir dedans. Si vous ne voulez pas que cela arrive, vous devez modifier l'arrière-plan de l'élément. Vous pouvez faire ça en assignant l'élément background-color. Cette proprité peut accepter n'importe quelles valeurs de couleur dans n'importe lesquels des formats standards (hex, abbreviated hex, rgb ou keyword). Ceci appliquera la couleur sous le contenu, la zone de remplissage (padding) et bordure de l'élément. En outre, background-color reconnaît transparent (valeur par défaut) et inherit. Quand inherit est appliqué à un élément, cela prend la background-color de son élément parent.
Si nous revenons vers nos exemple de paragraphe et créons une classe de sample2, nous pouvons voir la façon dont cela s'applique aux éléments "inline" (tel que em) et les éléments de niveau bloc (comme p).
Cette CSS :
.sample2 {
background-color: #009;
color: #fff; /* ceci règle la couleur de premier plan pour le texte */
}
combinée avec cette syntaxe :
<p>Le <em class="sample2">texte mis en valeur dans ce paragraphe
<br /> devrait apparaître en une sorte de blanc contre un arrière plan bleu</em>. L'autre texte devrait être dans les couleurs par défaut.</p>
Crée le paragraphe suivant :
Le texte mis en valeur dans ce paragraphe
devrait apparaître en une sorte de blanc contre un arrière plan bleu. L'autre texte devrait être dans les couleurs par défaut.
A nouveau, j'ai forcé un retour chariot afin que vous puissiez regarder comment le navigateur restitue un tel cas.
Si nous appliquons la classe au paragraphe :
<p class="sample2">Tout du texte dans ce paragaphe devrait apparaître en blanc contre un arrière plan bleu, qu'il soit <em>mis en valeur</em>
ou non.</p>
Voilà le résultat :
Tout du texte dans ce paragaphe devrait apparaître en blanc contre un arrière plan bleu, qu'il soit mis en valeur ou non.
Images dans les Arrière-Plans
Comme cela a été mentionné au-dessus, nous ne sommes pas limités aux couleurs. On peut aussi assigner des images aux éléments pour leurs arrières-plans. Ce peuvent être des modèles répétés, des gradients subtis et même des photographies. Nous supposerones que votre image a été sauvegardée dans un format ami du web (GIF, JPG ou PNG). Utilisez la propriété background-image pour régler l'image. Vous devrez connaître l'emplacement de l'image sur votre serveur afin de le pointer dans votre CSS. La syntaxe ressemble à cela :
background-image: url(/path/to/image.jpg);
Vous pouvez encadrer le chemin avec des apostrophes simples ou doubles.
L'exemple ci-dessus utilise un chemin racine ; cad. que le slash (/) dit au navigateur de trouver l'image à cet endroit en partant du niveau du fichier racine du serveur. Vous pouvez aussi utiliser un chemin absolu (commençant par http://) ou un chemin relatif. Les navigateurs compatibles avec les Standard devraient chercher l'image relative au fichier CSS.
L'image sera restituée en haut de n'importe quelle background-color, ce qui veut dire que si l'image a quelque transparence, la couleur s'affichera à travers. NOus pouvons tirer profit de cela et de toutes les autres propriétés de background-image pour créer quelques effets spéciaux et économiser de la bande passante vs la vieille façon HTML de faire les choses.
Disons que vous voulez une page qui ait une image dans le coin en haut et à gauche. Vous voulez aussi que le contenu de la page chevauche cette image. En d'autres mots, l'image doit être dans l'arrière-plan, et non pas placée comme une image "inline".
La vieille méthode pour faire ça était de placer l'image d'arrière-plan à l'intérieur de la balise body . Un grand problème avec cette technique est que l'image sera en mosaïque—se répétant elle-même verticalement et horizontalement—sur la totalité de la page. Le contournement typique est de créer une image géante avec de l'espace blanc autour et en-dessous et à droite pour créer l'illusion d'une plus petite image dans le coin. Ceci ajoute beaucoup de poids à votre page, et l'illusion est rompue si le contenu de la page est plus long que la hauteur de l'image, ou si la fenêtre du navigateur est ouverte dans un format plus large que l'image.
Il existe une meilleure manière de faire : background-repeat. La valeur par défaut est repeat, mais d'autres valeurs peuvent être réglées pour restreindre la façon de répéter. Pour faire que l'image se mette en mosaïque verticale, réglez background-repeat sur repeat-y. Pour une mosaïque horizontale, réglez sur repeat-x. Cette propriété acceptera aussi une valeur de inherit, auquel cas elle hérite de la valeur de son élément parent. Dans notre exemple, nous ne voulons pas que l'image se répète du tout, ainsi nous ajoutons les mentions suivantes à la règle pour l'élément body :
background-repeat: no-repeat;
Maintenant, nous avons l'image dans le coin en haut à gauche de la page.
Et si nous voulons que l'image soit dans le coin en haut à droite, au milieu ou n'importe où sur la page ? Entrez la propriété background-position . Cette propriété vosu permet de placer l'image d'arrière-plan n'importe où vous voulez sur la page. Vous pouvez utiliser des mots-clés, des longeurs ou des pourcentages pour définir où vous voulez que votre image apparaisse.
Nous démarrerons avec les mots-clés : left et right, qui appliquent le positionnement horizontal ; et top et bottom, qui appliquent le positionnement vertical. center peut correspondre à la fois au positionnement horizontal et au positionnement vertical.
Pour positionner notre image dans le coint en haut à droite de la page, utilisez la ligne suivante dans la règle pour la body :
background-position: right top;
Avec ce petit morceau de CSS, peu importe la manière dont la fenêtre du navigateur est retaillée, l'image restera dans le coin en haut à droite de la page. Si vous voulez que l'image soit au centre de la page, vous pouvez spécifier center center. Ou vous pouvez la placer sur le bas de la page avec center bottom. (Note : si vous avez suffisamment de contenu de page pour forcer une barre de défilement, l'image apparaîtra en bas de la page, pas dans le bas de la fenêtre du navigateur.)
Quand vous combinez cette propriété avec background-repeat, vous pouvez placer une bande verticale en bas du côté droit de la page qui restera toujours sur la droite, quelle que soit la manière dont la fenêtre du navigateur est taillée en largeur. Seulement avec CSS !
En plus des mots-clés déjà discutés, vous pouvez utiliser des longueurs comme px, in et cm, tout comme des pourcentages. Et les positions négatives sont autorisées.
A ce stade, nous avons parlé des images d'arrière-plans en relation avec l'élément body . Mais n'importe quel élément peut avoir une image d'arrière-plan qui lui est appliquée. Dans ce cas, la position de l'élément est calculée relativement à ce côté de la zone de remplissage (padding) de l'élément. Une position de top left alignera le coin en haut à gauche de l'image à l'intérieur du coin en haut à gauche de l'élément. Une position de bottom right alignera le coin en bas à droite de l'image avec le coin en bas à droite de l'élément. Ceci correspond à 0% 0% pour top left et 100% 100% pour bottom right. Comme vous pourriez le deviner, 50% 50% est le même que center center.
En fait, les positions fondées sur les pourcentages sont calculées différemment des positions fondées sur la longueur. Si vous appliquez un positionnement de 20% 32%, le navigateur devrait calculer le point 20% transversalement et 32% en bas à partir du coin en haut à gauche de l'élément, et y placer le pixel qui est 20% transversal et à 32% du bas à partir du coin en haut à gauche de l'image quand il dessine l'image. Ceci veut dire que le centre de l'image sera au centre de la page quand vous spécifiez 50% 50% (ou center center). Les longueurs placent le coin en haut à gauche de l'image aux longueurs que vous spécifiez (relatives au coin en haut à gauche de l'élément).
Au-dessus, j'ai indiqué que vous pouvez placer une image en bas d'une page, mais si vous avez suffisamment de contenu vous pouvez avoir besoin de faire défiler la page pour la voir. Avec la propriété background-attachment , vous pouvez garantir qu'elle sera toujours vue, directement en bas de la fenêtre du navigateur—peu importe la quantité de défilement vers le bas.
Il existe deux valeurs (trois si vous prenez inherit) que cette propriété acceptera : scroll et fixed. Si vous voulez que l'image défile avec la page, utilisez scroll. L'image restera “attachée” à la page, sans se soucier de la longueur qu'elle peut avoir. Si vous voulez que l'image reste en place et ne défile pas, utilisez fixed. Ceci a l'effet d'attacher l'image à la fenêtre du navigateur de façon à ce qu'elle ne bouge pas, peu importe la manière dont vous faites défilez la page.
Assembler Tout Cela Ensemble
Comme avec les autres propriétés que nous avons étudiées dans cet article, il existe une version raccourcie qui combine toutes les propriétés : background. Cette propriété combine background-color, background-image, background-repeat, background-attachment et background-position en une unique propriété. Quand elle est utilisée dans une feuille de style, background règle toutes les propriétés d'arrière-plan à leurs valeurs par défaut et puis applique les nouvelles valeurs que vous incluez. Si vous laissez une ou plus de valeurs en dehors de la déclaration, elle prendra sa valeur par défaut, même si vous avez précdemment réglé cette valeur dans la feuille de style. Par exemple, cette règle :
div#content {
background-color: #aaa;
background: url(/path/to/img.jpg) no-repeat;
}
donnera une image non-répétée placée dans le coin en haut à gauche de la div. La couleur d'arrière-plan de la div sera de n'importe quelle couleur d'arrière-plan définie par son élément parent, mais pas #aaa. Ceci parce qu'elle a été réinitialisée de #aaa à la valeur par défaut transparent quand aucune valeur par défaut n'a été donnée à la propriété background . De même, parce qu'aucune valeur de position n'a été donnée, elle sera par défaut dans le coin en haut à gauche de la div, et défilera avec la page.
Conclusion
J'ai simplement couvert les fondamentaux des bordures et arrière-plans. Armé(e) de cette nouvelle connaissance avec un peu d'expérimentation, vous pouvez désormais créer des effets très intéressants.
Trouvez de l'inspiration dans les techniques défrichées par Eric Meyer :
Mark Newhouse est Designer Web pour le National Optical Astronomy Observatory où il est pleinement conscient du potentiel inexploité de CSS. Il apprécie le défi de créer des sites qui utilisent les standards, soient beaux et de qualité, et puissent fonctionner sur tous les navigateurs et plates-formes. Y compris Netscape 4 sur Unix.