Cascading Style Sheets
Cascading Style Sheets ou CSS ( « feuilles de style en cascade » ) est le nom de la technologie et d'une langage qui servent à
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
- ... mais – en fait – à tout ce qui est XML, 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[2]
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
une 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? 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>
Références
- ↑ La centrale pour les informations concernant CSS : https://www.w3.org/Style/CSS/Overview.fr.html
- ↑ XSL : Introduction en français chez IBM : https://www.ibm.com/docs/fr/i/7.5?topic=toolkit-xsl-introduction