• Apprendre le langage CSS :: fondements
Vous voulez maîtriser mieux encore tous les paramètres d'affichage de vos pages
Web? Pouvoir définir chacun à votre goût: pour la couleur, l'épaisseur, la
taille, etc. de tous les éléments? Le langage CSS pour Cascading StyleSheet
est fait pour cela. En comprenant sa syntaxe très simple, vous pourrez obtenir
des pages Web d'excellente qualité! Le langage CSS est vraiment le complément
indispensable du XHTML...
››» Préambule
:: C'est quoi un "style"?
Pour tous les éléments comme du texte, des paragraphes, des images, etc. vous
avez du fabriquer pour votre site une sorte de mise en forme particulière que
vous répétez pour faire ressortir à l'internaute la structure de votre document.
[Cette structure restant purement formelle.]
On assimile le style d'un objet à sa mise en forme, la notion de style étant
plus générale parce qu'étendue à tout type d'objet. Un style est propre à chacun
des objets, mais on peut cependant, aussi, mettre en évidence un style pour un
certain type d'objet.
:: Comment appliquer un style?
On dispose de deux possibilités complémentaires. On peut en effet définir des
styles
- dans l'en-tête du fichier XHTML: c'est à dire entre les balises
<head></head> et plus précisément entre
<style> et </style>; on ajoute ensuite le nom au
style précédé d'un '.' puis deux acollades '{' et '}'; enfin, au niveau de
l'objet on insère class="nom du style".
- mais aussi directement au niveau de l'objet: au sein de la balise en
utilisant l'attribut: style="".
Ensuite, il faut définir le contenu du style. La règle est simple on inscrit
l'attribut du type mise en forme puis ':' puis la valeur correspondante. On
sépare les types définis par le caractère ';'.
<html>
<head>
<style>
.monStyle {font-family: Verdana; font-size: 8pt; color: black;}
</style>
</head>
<body>
<spanclass="monStyle">
"Je rase tous ceux qui ne se rasent pas eux-mêmes et seulement ceux-là."
</span>
<br/>
<spanstyle="font-family: Verdana; font-size: 8pt; color: black;">
"Je rase tous ceux qui ne se rasent pas eux-mêmes et seulement ceux-là."
</span>
<br/>
<spanclass="monStyle"style="text-decoration: underline;">
"Je rase tous ceux qui ne se rasent pas eux-mêmes et seulement ceux-là."
</span>
</body>
</html>
On affiche ici une phrase dont le style s'appelle 'monStyle'. Suivi d'une de
la même phrase où le style est appliqué directement. Enfin, la même phrase où
l'on a rajouté un effet souligné.
[Vous voyez donc que l'on peut imbriquer des effets de styles... c'est
une possibilité très interessante et qui est à l'origine du C(ascading) de CSS]
Voyons les choses plus en détails...
››» Texte
:: Quels effets?
Mieux que les traditionnelles balises du XHTML pour ajouter l'effet souligné,
italique, etc. le CSS définit tout ça en même temps que la police, etc.
Voyons pour les paragraphes, les tableaux et le corps de page...
››» Paragraphe, Tableau, Corps
:: Quels effets?
Pour les paragraphes, on utilisera la plupart du temps les balises
<div></div>; pour les tableaux, les balises
<td></td> et pour le corps de page l'unique balise
<body></body>
On peut paramétrer:
[Un dernier truc très pratique, la notion d'objet flottant où
s'adaptant automatiquement aux autres... En donnant à une zone de texte ou de
tableau l'effet de style float: right ou left; on l'aligne forcément à droite ou
à gauche du reste du contenu de la page. Pour que le reste du contenu ne subisse
plus ce type d'alignement, il faut lui ajouter float: clear; dans son style.]
Une petite nouveauté! On peut aussi définir explicitement l'aspect des cadres
formés par les différents objets... En attribuant:
- un effet de bordure,
- un effet de couleur de fond,
- background-color: color; pour appliquer une couleur de fond.
- background-image: url("chemin/du/fichier.extension"); pour affecter une
image de fond...
- background-repeat: repeat ou no-repeat ou repeat-x ou repeat-y; pour
forcer le butineur à afficher l'image répétée horizontalement et
verticalement ou pas du tout ou seulement horizontalement ou seulement
verticalement.
- etc.
Jouons un peu avec les listes...
››» Liste
:: Quels effets?
Les effets de styles précédents peuvent être repris, mais d'autres effets sont
particuliers aux listes d'éléments... On peut paramétrer:
- list-style-type: disc ou circle ou square ou decimal ou
decimal-leading-zero ou lower-roman ou upper-roman ou lower-latin ou
upper-latin ou none; pour indiquer le type de puce que vous souhaitez (disque
ou cercle ou carré ou (précédé d'un 0 ou non)chiffre ou un chiffrage romain
ou une organisation avec des lettres (en minuscule ou majuscule).
- line-style-position: inside ou outside; pour afficher le contenu autour ou
en retrait du pictogramme de liste.
D'autres fonctionnalités moins utilisées sont disponibles... Allez voir les
indications complémentaires dans la
Recommandation CSS.
Et les liens ?!
››» Lien
:: Quels effets?
L'impression est toujours présente. Lorsque l'on passe le curseur sur un lien,
et que ce dernier se métamorphose aussitôt ;o) En fait, il faut utiliser quatre
éléments particulier, à définir absolument dans l'en-tête.
- a:link {} pour les liens non encore visités
- a:visited {} pour les liens visités
- a:hover {} pour le comportement quand le curseur est au dessus
- a:active {} pour les liens actifs (on l'on vient juste de cliquer)
Vous pouvez être très imaginatif de ce coté là!
Pour conclure...
››» Conclusion
:: Quoi d'autre?
Cette présentation est vraiment très loin d'être exhaustive, et ce sera un
bonheur quand vous découvrirez à quel point le langage CSS est pointu! Il ne
s'agissait là que d'une explication et d'une bonne introduction à ce langage. Il
est vivement recommandé de se pencher sur la
Recommandation CSS
publiée par le W3 Consortium. Vous y découvrirez de nouvelles choses, notamment
pour vraiment faire des feuilles de style en cascade avec les balises XHTML et
le symbole ','...
