Cascading Style Sheets

De wiki.infini

Cascading Style Sheets ou CSS ( « feuilles de style en cascade » ) est le nom de la technologie et d'une langage qui servent à

décrire la présentation d'un contenu.

Les deux mots en gras « décrire » et « présentation » doivent rester dans notre mémoire pendant le temps que nous nous occupons de CSS[1]. La question « quel contenu ? » n'est cependant pas anodin, car le CSS s'applique

  • aux pages rédigées en HTML
  • aux images vectorielles en format SVG[2]
  • ... mais – en fait – à 'tout ce qui est XML[3], ce qui inclut déjà le SVG et une grande partie des pages HTML existantes.

Si, par contre, nous inversons la question et cherchons à « décrire la présentation de divers contenus en XML », nous devrons accepter qu'il y a une autre technologie qui produit les exactement mêmes résultats, mais qui est plus puissante et plus intéressante que le CSS en vue de la génération automatisée de « contenus »  : XSL[4]

( s'il vous plaît, ignorez XSLT pour maintenant ).( ... et merci )

 

Qu'est ce que ça fait

Referez vous à l'article HTML, si le code des langages de balises vous pose un problème. Une instruction en CSS cible toujours une ou plusieurs balises dans un code.

Nous allons voir comment est crée

un paragraphe comme celle-ci,
sur font gris-claire, avec une police sans serifs en cursif.

Trois exemples, qui produisent le même effet

CSS en ligne – intégré dans la balise <p/>

<html><head><title>Monolog Cyrano Deutsch</title></head><body>
<!-- ( code omis pour l'exemple ) -->
<!-- paragraphe en cursif sur font gris claire, police sans serifes -->
<p style="font-family:sans;font-style:italic;background-color:lightgray;">
<!-- s'applique au texte suivant -->
Wie soll ich’s halten künftig?<br/>
Mir einen mächtigen Patron entdecken<br/>
Und als gemeines Schlinggewächs dem Schaft,<br/>
An dem ich aufwärts will, die Rinde lecken?<br/>
Durch List empor mich ranken, nicht durch Kraft?<br/>
Nein. Vielen Dank! Oder soll ich, wie so viele,<br/>
Ein Loblied singen auf gefüllte Taschen,<br/>
Soll eines Hofmanns Lächeln mir erhaschen,<br/>
Indem ich seinen Narren spiele?<br/>
Nein. Vielen Dank!</p>
<!-- le code css n'a plus d'effet à partir d'ici -->
<!-- ( code omis pour l'exemple ) -->
</body></html>

CSS défini en haut d'une page, dans <head/>.

<html><head>
  <title>Monolog Cyrano Deutsch</title>

<!-- définitions de « styles » -->
  <style type="text/css">
<!-- style de toutes les paragraphes pour poèmes -->
     p.poème {
       font-family:sans;
       font-style:italic;
       background-color:lightgray;
     }
  </style>
</head><body>
<!-- ( code omis pour l'exemple ) -->
<!-- paragraphe en cursif sur font gris claire, police sans serifs -->
<p class="poème">
Wie soll ich’s halten künftig?<br/>
Mir einen mächtigen Patron entdecken<br/>
Und als gemeines Schlinggewächs dem Schaft,<br/>
<!-- ( code omis pour l'exemple ) -->
</p>
</body></html>

CSS externe, dans un fichier référencé dans <head/>

<html><head>
  <title>Monolog Cyrano Deutsch</title>

<!-- définitions de « styles » dans un fichier
     http://[serveur/site]/css/cyrano.css
     Son contenu est identique à la définition p.poème
     dans l'exemple précédent
-->
  <link rel="stylesheet" href="/css/cyrano.css">

</head><body>
<!-- ( code omis pour l'exemple ) -->
<!-- paragraphe en cursif sur font gris claire, police sans serifs -->
<p class="poème">
Wie soll ich’s halten künftig?<br/>
Mir einen mächtigen Patron entdecken<br/>
Und als gemeines Schlinggewächs dem Schaft,<br/>
<!-- ( code omis pour l'exemple ) -->
</p>
</body></html>

Les trois exemples ci-dessus montrent trois manières de définir – et deux manières d'appliquer les instructions en CSS. Il n'y a pas une qui est « mieux » que les autres; il est préférable de connaître leurs avantages et désavantages dans des contextes précises. Au bout du compte vous allez vous servir de chaque technique là, où ça vous paraîtra utile[5].

Jouons

D'abord une révélation importante : Ce Wiki permet d'enrichir le contenu avec des instructions CSS ! Cette possibilité a ses limites, mais nous n'allons peut-être pas les explorer. Les manipulations exemplaires peuvent – par contre – être évaluées directement avec le formatage des passages dans cet article.
VLAN !! C'était le projectile qui devrait me rappeler que le Wiki n'est pas un terrain de jeux. Mais nous sommes adultes ... hm. 😎 ... n'est-ce pas ?! ( raté – d'ailleurs )

paragraphes ou blocs : couleurs, position, bordures

Prenons l'exemple d'en haut « CSS en ligne – intégré dans la balise <p/> ». C'est le début de la « Tirade du Non-Merci » de Cyrano de Bergerac en allemand[6] :

Wie soll ich’s halten künftig?
Mir einen mächtigen Patron entdecken
Und als gemeines Schlinggewächs dem Schaft,
An dem ich aufwärts will, die Rinde lecken?
Durch List empor mich ranken, nicht durch Kraft?
Nein. Vielen Dank! Oder soll ich, wie so viele,
Ein Loblied singen auf gefüllte Taschen,
Soll eines Hofmanns Lächeln mir erhaschen,
Indem ich seinen Narren spiele?
Nein. Vielen Dank!

Les attributs de style, que nous allons manipuler, sont pour le moment :

  • Couleurs : noir sur gris claire
  • Position : aligné à gauche, dans la suite du texte courant.
  • Bordures : aucune

couleur du font

Pour une raison assez évidente[7], les langages Informatiques empruntent des expressions et appellations de la langue anglaise. La couleur du font est pour cette raison la “background-color” ( « couleur de l'arrière-plan » ). Nous la trouvons dans la définition du style « en-ligne » ( angl.: “inline”) du paragraphe :
<p style="font-family:sans;font-style:italic;background-color:lightgray;">
Choisir les couleurs par leur nom[8] est une solution rapide, mais peu précise : Quelle couleur sera donc un peu plus claire encore, que le gris claire ( “lightgray” ) ?

Il y a deux autres manières de définir une couleur en HTML et/ou CSS, qui nous laissent mélanger les couleurs dites « primaires » rouge, vert et bleu[9] – et de carrément produire notre couleur de rêve.

Alors là, tout de suite, je voudrais un font un peu plus claire et une légère tendance vers le jaune. Le mélange sera fait de beaucoup de rouge et autant de vert ( pour le jaune ), puis assez de bleue pour adoucir l'ensemble. Les valeurs des composants d'une couleur sont exprimés en chiffres. Je me sers du système rgb[10] qui – pour chacun des trois composants – autorises 256 nuances ( de 0 jusqu'à 255 ).

Un premier essay:
<p style="font-family:sans;background-color:rgb(200,200,100);">

rouge : 200, vert : 200, bleue : 100

C'est peut-être un résultat étonnant, mais le comportement de vos écrans n'est pas tout à fait homologués, au moins pas au point qu'ils affichent les couleurs de la même manière. Il peut y avoir des décalages vers l'un ou l'autre des composants d'une couleur.

Sans savoir exactement ce que ça fait chez vous, je voudrais maintenant un peu moins de vert et tout un peu plus claire, encore :
<p style="font-family:sans;background-color:rgb(255,230,200);">

rouge : 255 ( valeur maximale ), vert : 230, bleue : 200

Qu'est-ce qui s'est passé ?

  • moins de vert veut aussi dire : plus des autres couleurs
  • tout un peu plus claire veut aussi dire : augmenter les valeurs de un, deux ou de tous les composants

Bon. Ce n'est plus jaune, mais ça me plaît quand même.

couleur du texte

La coloration du texte fonctionne de la même manière, seulement l'attribut de style « color » est à ajouter ( “foreground-color” aurait été logique, mais soyez content, c'est plus court comme ça ):
<p style="font-family:sans;background-color:rgb(255,230,200);color:rgb(0,0,100);">

rouge : 0, vert : 0, bleue : 100

Une autre notation pour les couleurs ( peu importe leur rôle ), est en chiffres hexadécimales. Vous trouvez les valeurs pour quelques couleurs sur les pages, référencées en bas de cet article. Mais vous pouvez les composez, de nouveau, car ces séquences de six symboles ne sont pas vraiment différentes des valeurs RGB :

  1. 255 est la même chose que ff en hexadécimal
  2. 230 == e6
  3. 200 == c8

la couleur rgb(255,230,200) est alors la même que #ffe6c8. Voila la balise <p/>, coloré comme avant, mais en utilisant la notation hexadécimal :

<p style="font-family:sans;background-color:#ffe6c8;color:#000064;">

Pour rappel, les chiffres hexadécimales vont de 0 à f :
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, a, b, c, d, e, f

Utilisez la notation qui vous convient. En général, la notation hexadécimale est plus rapide. Mais le rgb() a l'avantage, qu'il suffit d'ajouter un 'a' ( pour “alpha-channel” ) pour un composant de transparence :
rgba(0, 0, 255, 0.5);
Vous voyez l'effet par exemple quand deux couleurs de font chevauchent sur une page HTML. Ici, la transparence ( ou l'opacité ) est de 50%, les valeurs entre 0 et 1 sont permis. Cette possibilité n'existe pas avec des valeurs hexadécimales.

position et étendue

La position d'un texte entre balises de bloc dépend de la balise ( bien sûr ) et de la manière qu'un navigateur Web l’interprète. Il peut y avoir des différences quand vous alternez entre <p/>, <div/>, <dl/> etc.

Avec le CSS, par contre, vous avez la possibilité d'imposer vos préférences par rapport aux distances et étendues. Ceci dit, il permet des abus qui effacent les différences entre les divers balises de bloc et sont plutôt désagréables. Essayons donc de rester raisonables.

Indépendamment de ces réflexions, positions et distances ne sont pas du tout invariables dans le sens qu'ils sont définis une fois et puis tout bouge quand vous faites défiler une page HTML vers le haut ou le bas ... vous voyez la flèche, à droite, qui vous catapulte au sommaire de cet article ? Nous en parlerons  8).

Reprenons l'exemple d'en haut et sans modification des couleurs :

Wie soll ich’s halten künftig?
Mir einen mächtigen Patron entdecken
Und als gemeines Schlinggewächs dem Schaft,
An dem ich aufwärts will, die Rinde lecken?
Durch List empor mich ranken, nicht durch Kraft?
Nein. Vielen Dank! Oder soll ich, wie so viele,
Ein Loblied singen auf gefüllte Taschen,
Soll eines Hofmanns Lächeln mir erhaschen,
Indem ich seinen Narren spiele?
Nein. Vielen Dank!

Je voudrais changer plusieurs choses :

  • Le paragraphe devrait être moins large pour laisser « du blanc » à droite.
  • Le texte ne devrait pas être collé aux bords, il faudrait un peu d'espace autour.
  • Il faudrait aussi une séparation plus large entre le paragraphe et le texte qui l'entoure.
  • Après ... ce serait joli si les coins n'étaient pas aussi pointus, mais on verra ..

Largeur

La largeur d'une surface est en anglais “width”. Les valeurs numériques de cet attribut dépendent fortement de l'unité[11] que nous choisissons. Il y en a malheureusement une grande variété et chacune détermine un autre comportement du navigateur Web, quand il les interprète :

px – pixels
Très utile pour exprimer des distances et tailles d'objets au but de les arranger très exactement sur l'écran ou d'aligner un objet avec d'autres. La taille du pixel dépend de la résolution de l'appareil d'affichage ( l'écran en l'occurrence ).
pt – point
Inexacte sur l'écran, pt sert à déterminer la taille exacte d'une police sur un document à imprimer, si vous ne vous contentez pas avec la police par défaut. Dans tous les autres cas, évitez pt dans vos feuilles de style ou styles en-ligne.
em – la taille de la lettre ‹m› dans la police actuelle, ou l'hauteur de la police
Oubliez la lettre ‹m›, mais em est très utile pour dimensionner des tailles et espaces par rapport à la police concerné; par exemple l'espace entre un paragraphe et son environnement.
ex – la taille de la lettre ‹x› dans la police actuelle, ou l'hauteur des minuscules de la police
Ça peut servir dans les mêmes cas que em, mais c'est un peu moins courant.
% – pourcentages
Pour les tailles proportionnelles à l'élément qui entoure celui qui est manipulé. Si l'élément « parent » n'est pas dimensionné, c'est la taille de la fenêtre ( du navigateur ) qui compte.
rem - « root em » comme em mais correspond à la taille de la police de l'élément à la racine du document.
Contrairement à em et ex, cette unité est invariable pour tout le document.
vw, vh, vmin, vmax – unités introduites avec la version 3 de CSS
Ils jouent le même rôle que les pourcentages, mais sont toujours relatives à la taille de la fenêtre. L'auteur de cet article n'a pas d'expérience avec ces unités, mais je devine qu'ils sont utiles pour l'affichage sur les écrans ridicules des téléphones portables.
mm, cm, in
Millimètres, centimètres et inches ne sons que rarement utiles, car ils nécessitent des appareils d'affichage vraiment spécifiques pour être exactes ou pour que les objets ainsi dimensionnés seront comparables.

Mois large donc. Nous reprenons... Ce n'est pas la police qui compte, mais l'environnement du paragraphe. Je propose ( mais vous faites ça comme vous voulez ) d'appliquer une pourcentage :
<p style="width:40%;font-family:sans;font-style:italic;background-color:lightgray;">
Résultat :

Wie soll ich’s halten künftig?
Mir einen mächtigen Patron entdecken
<!-- texte omis pour l'exemple -->

Hm. C'est peut-être un peu trop étroit pour les lignes qui suivent mais vous voyez bien l'effet.

Capitonnage

Pour décoller le texte des bords du paragraphe ou de la zone grise, il faut introduire d'espace vide entre ces bords et le texte. L'attribut CSS qu'il faut appliquer est “padding”. Le choix de l'unité dépend peut-être un peu plus de l'usage qui sera fait de cette page HTML. Les pourcentages ne sont pas du tout pratique, ici. Je propose le « em », pour ajuster l'étendu de l'espace vide à la police qui sera affichée :

<p style="padding:1.5em;width:40%;font-family:sans;font-style:italic;background-color:lightgray;">
Résultat :

Wie soll ich’s halten künftig?
Mir einen mächtigen Patron entdecken
<!-- texte omis pour l'exemple -->

Oups ! C'est un peu drastique, mais assez claire. Prenez note du fait que des fractions sont possibles pour la plupart des valeurs numériques en CSS ( à l'exception des pourcentages ) et qu'ils utilisent le point comme séparateur décimal. Ce qui gêne peut-être dans le dernier exemple est que les trois bords du haut, du bas et gauche sont à la même distance du texte. Nous pouvons imaginer que les « 1.5 em » ont potentiellement été ajoutés à droite aussi.

Nous allons donc distinguer les quatre bords d'un élément de bloc : Il existent des attributs pour chacun. Le “padding” peut agir que

  1. en haut  : padding-top
  2. à droite : padding-right
  3. en bas  : padding-bottom
  4. à gauche : padding-left

Ça va faire beaucoup à écrire, mais je me contente d'abord de manipuler le haut et la gauche du paragraphe :
<p style="padding-left:1.5em;padding-top:0.5em;;width:40%;font-family:sans;font-style:italic;background-color:lightgray;">
Résultat :

Wie soll ich’s halten künftig?
Mir einen mächtigen Patron entdecken
<!-- texte omis pour l'exemple -->

C'est mieux, mais pour éviter des problèmes il faut peut-être compléter avec les autres deux côtés...
Heureusement on peut raccourcir le code CSS pour tous les attributs qui s'appliquent au quatre bords d'un élément de bloc. C'est la raison pour la liste numérotée, en haut : L'ordre sera toujours la même, une première valeur est celle du haut, suivi par celle à droite, puis en bas et à gauche. L'attribut « padding » sera donc :
<p style="padding:0.5em 1em 0.5em 1em;width:40%;font-family:sans;font-style:italic;background-color:lightgray;">
Résultat :

Wie soll ich’s halten künftig?
Mir einen mächtigen Patron entdecken
<!-- texte omis pour l'exemple -->

Ah voilà ! Ça resemble à quelque chose. Vous pouvez même mélanger les unités et écrire quelque chose comme :
padding: 12pt 0.1ex 10% 2cm;

La lisière

Selon le rôle que joue un paragraphe, il sera utile de le positionner relatif à ses alentours.
L'attribut CSS qui insert d'espace vide entre un élément de bloc est “margin” :
<p style="margin:2em; padding:1.5em;width:40%;font-family:sans;font-style:italic;background-color:lightgray;">
Résultat :

Wie soll ich’s halten künftig?
Mir einen mächtigen Patron entdecken
<!-- texte omis pour l'exemple -->

Le positionnement est relatif à l'élément HTML, qui entoure le paragraphe, la distance de « 2em » est maintenu, quand nous font défiler la page.

Comme nous l'avons fait pour « padding », nous pouvons définir « margin » différemment pour chacun des quatre bords du paragraphe, margin-top, margin-right, margin-bottom et margin-top existent, mais aussi la notation raccourcie :
<p style="margin:1em 0 2em 2em; padding:1.5em;width:40%;font-family:sans;font-style:italic;background-color:lightgray;">
Résultat :

Wie soll ich’s halten künftig?
Mir einen mächtigen Patron entdecken
<!-- texte omis pour l'exemple -->

Comme le paragraphe est déjà limité à 40% de l'espace disponible, il n'aurait pas beaucoup de sens d'insister sur un espace vide à sa droite. Le '0' exprime exactement ça.

relatif, absolu, fixé

Le positionnement d'éléments HTML ( représentés dans le code par les balises ) peut donc être relatif à leur environnement; nous avons utilisé l'attribut de style « margin » pour influencer cette relation. Il y a cependant deux autres modes, qui placent un élément indépendamment de la structure du document : “absolute” et “fixed”. Il n'est pas simple de démontrer ces deux possibilités sur une page du Wiki, vous allez devoir faire vos propres expériences. Il faut d'abord apprendre les fonctions de nouveaux attributs de style :

position
sert à choisir si un élément sera arrangé entre les éléments qui l'entourent ( “relatif” – le comportement par défaut ) ou s'il est placé a une distance des limits de la page ( “absolute” ) ou s'il reste immobile, comme collé à un endroit dans la fenêtre du navigateur ( “fixed” ).
top, right, bottom, left
pour indiquer les distances à observer.

La petite flèche à droite de cette page du Wiki, qui ne bouge pas, quand vous bougez le contenu vers le haut ou le bas, est défini avec position: fixed; :

<div style="position:fixed;right:3em;font-size:2em;" title="vers le sommaire"> </div>
La seule distance donnée est la distance du bord droite de la fenêtre : right:3em;

Bordures

Nous n'allons pas créer des cadres, il n'y aura pas des lignes.
La bordure du paragraphe est sa frontière avec ce qui l'entoure. Bien qu'il y aurait beaucoup à expliquer sur les diverses types de lignes, qui sont possibles pour marquer cette frontière[12], la bordure existe déjà et le choix d'une couleur de font la rend parfaitement bien visible.

Et si la bordure existe, nous pouvons la manipuler. Un attribut de style, qui crée un très joli effet, est “border-radius” :

<p style="border-radius:1em;margin:1em 0 2em 2em;padding:1.5em;width:40%;font-family:sans;font-style:italic;background-color:lightgray;">
Résultat :

Wie soll ich’s halten künftig?
Mir einen mächtigen Patron entdecken
<!-- texte omis pour l'exemple -->

Des valeurs plus hautes agrandissent la zone arrondie dans les quatre coins du bloc Et si le radius est assez grand, il n'y restera plus aucune ligne droite :

<p style="width:30px;height:30px;border-radius:40px;background-color:purple;">
Résultat :

Faisons le ménage

La notation des attributs du style comme valeur de l'attribut “style” va inévitablement porter atteint à la lisibilité du code. La paragraphe qui a servi jusque là dans les exemples, pourrait être défini comme ça :
<p style="border-radius:1em;margin:1em 0 2em 2em;padding:0.5em 1em 0.5em 1em;width:40%;font-family:sans;font-style:italic;background-color:#ffe6c8;color:#000064;">
Résultat :

Wie soll ich’s halten künftig?
Mir einen mächtigen Patron entdecken
<!-- texte omis pour l'exemple -->

S'il y a plusieurs paragraphes à formater de la même manière – et aussi, si seulement une partie des attributs de style sera partagé entre plusieurs balises de bloc – il est toujours une bonne idée de centraliser la définition des formats quelque part et de seulement les référencer dans la balise en question. Au début de cet article, deux alternatives aux styles en-lignes sont montrées :

  1. La définition dans une balise <style/>, au-dessous de <head/>
  2. La définition dans un fichier qui sera seulement référencé dans <style/>

La première alternative se prête pour une page qui sera elle-même « unique » ou qui a besoin des styles qui ne seront pas partagés avec d'autres pages. Dans le cas contraire, il est préférable de fournir un fichier pour les styles partagés entre pages HTML. Mais rien ne vous empêche de mélanger des styles en-ligne, définis pour la page et ceux dans un fichier externe à la page.

Consultez les ressources listés en bas de cet article pour apprendre plus sur les “Cascading Style Sheets” et leur application. Mais regardez aussi le code source des pages que vous lisez dans le World Wide Web.

Références