« Cascading Style Sheets » : différence entre les versions
| Ligne 153 : | Ligne 153 : | ||
la couleur <span style="background-color:rgb(255,230,200);">rgb(255,230,200)</span> est alors la même que <span style="background-color:#ffe6c8;">#ffe6c8</span>. Voila la balise <p/>, coloré comme avant, mais en utilisant la notation hexadécimal : | la couleur <span style="background-color:rgb(255,230,200);">rgb(255,230,200)</span> est alors la même que <span style="background-color:#ffe6c8;">#ffe6c8</span>. Voila la balise <p/>, coloré comme avant, mais en utilisant la notation hexadécimal : | ||
<p style="font-family:monospace;background-color:#ffe6c8;color:#000064;"><p style="font-family:sans;background-color:#ffe6c8;color:#000064;"></p> | <p style="font-family:monospace;background-color:#ffe6c8;color:#000064;"><p style="font-family:sans;background-color:#ffe6c8;color:#000064;"></p> | ||
Pour rappel, les chiffres hexadécimales vont de 0 | Pour rappel, les chiffres hexadécimales vont de '''0''' à '''f''' :<br/> <code>0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, a, b, c, d, e, f</code> | ||
Utilisez la notation qui vous convient. En général, la notation hexadécimal est plus rapide. Mais le rgb() a l'avantage, qu'il suffit d'ajouter un 'a' ( pour “''alpha-channel''” ) pour un composant de transparence :<br/><code>rgb'''a'''(0, 0, 255, '''0.5'''); </code><br/> 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. | Utilisez la notation qui vous convient. En général, la notation hexadécimal est plus rapide. Mais le rgb() a l'avantage, qu'il suffit d'ajouter un 'a' ( pour “''alpha-channel''” ) pour un composant de transparence :<br/><code>rgb'''a'''(0, 0, 255, '''0.5'''); </code><br/> 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. | ||
Version du 2 décembre 2023 à 13:01
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[5], 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;">
Choisir les couleurs par leur nom[6] 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[7] – 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[8] 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 même fonctionne complètement de la même manière que pour l'arrière plan, seulement l'attribut de style « color » est à ajouter :
<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 import leur rôle ), est en chiffres hexadécimal. 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érent des valeurs RGB :
- 255 est la même chose que ff en hexadécimal
- 230 == e6
- 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écimal 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.
... en cours de rédaction. 2/12/2023
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/
- ↑ L'Allemagne a perdu la seconde guerre mondiale et Konrad Zuse a été trop crédule
- ↑ https://convertingcolors.com/named-colors.html
- ↑ Couleurs primaires : tout ce que vous devez savoir ( Adobe ) : https://www.adobe.com/fr/creativecloud/design/discover/primary-colors.html
- ↑ RGB ou HSF : https://htmlcolorcodes.com/fr/