« Cascading Style Sheets » : différence entre les versions
| Ligne 87 : | Ligne 87 : | ||
</body></html></pre></div> | </body></html></pre></div> | ||
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<ref>Trouvez des excellentes | 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<ref>Trouvez des excellentes tutoriels sur mozilla.org : https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps</ref>. | ||
=Références= | =Références= | ||
<references/> | <references/> | ||
Version du 2 décembre 2023 à 10:12
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>
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[3].
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
- ↑ Trouvez des excellentes tutoriels sur mozilla.org : https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps