« Cascading Style Sheets » : différence entre les versions
mAucun résumé des modifications |
|||
Ligne 6 : | Ligne 6 : | ||
La question « ''quel contenu ?'' » n'est cependant pas anodin, car le CSS s'applique | La question « ''quel contenu ?'' » n'est cependant pas anodin, car le CSS s'applique | ||
<ul> | <ul> | ||
<li>aux pages rédigées en HTML</li><li>aux images vectorielles en format [[SVG]]</li><li>... mais – en fait – à '''tout ce qui est [[XML]]''', ce qui inclut déjà le SVG et une grande partie des pages HTML existantes.</li> | <li>aux pages rédigées en [[HTML]]</li><li>aux images vectorielles en format [[SVG]]</li><li>... mais – en fait – à '''tout ce qui est [[XML]]''', ce qui inclut déjà le SVG et une grande partie des pages HTML existantes.</li> | ||
</ul> | </ul> | ||
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'' » <!-- contenu commence à m'énerver. Si vous pouvez reformuler, merci --> : [[XSL]]<ref>XSL : Introduction en français chez IBM : https://www.ibm.com/docs/fr/i/7.5?topic=toolkit-xsl-introduction</ref> <div style="color:#808080;font-size:0.8em;">( s'il vous plaît, ignorez XSLT pour maintenant ).<span style="margin-left:3em;">( ... et merci )</span></div> | 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'' » <!-- contenu commence à m'énerver. Si vous pouvez reformuler, merci --> : [[XSL]]<ref>XSL : Introduction en français chez IBM : https://www.ibm.com/docs/fr/i/7.5?topic=toolkit-xsl-introduction</ref> <div style="color:#808080;font-size:0.8em;">( s'il vous plaît, ignorez XSLT pour maintenant ).<span style="margin-left:3em;">( ... et merci )</span></div> |
Version du 2 décembre 2023 à 11:27
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?<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[3].
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 bloques : 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[4] :
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, 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”) de la paragraphe :
<p style="font-family:sans;font-style:italic;background-color:lightgray;">
... en cours de rédaction. 2/12/2023 (éffacez la page si ça dure encore des semaines)
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
- ↑ https://turmsegler.net/20061214/konig-sein-im-eignen-reiche/