Cours les feuilles de style notion de classes, tutoriel & guide de travaux pratiques en pdf.
Définition d’un style
La définition de base d’un style est simple :
balise { propriété de style: valeur; propriété de style: valeur }
Exemple :
H3 { font-family: Arial; font-style: italic }
Donc ici, la balise H3 sera en Arial et en italique. Et dans votre document, toutes les balises <H3> auront comme style Arial et italique.
Simple! Mais de nombreux commentaires s’imposent :
• Les feuilles de style portent sur des balises principalement et quelques autres éléments comme par exemple A:link pour un lien non-visité et A:visited pour un lien visité. Comme balises souvent utilisées avec des feuilles de style, on peut citer les en-têtes Hn, P, BODY…
• Les propriétés de style sont entourées par des « { » et pas des [ ou des parenthèses.
• Le couple « propriété de style/valeur » est séparé par un double-point (:).
• Chaque couple « propriété de style/valeur » est séparé par un point-virgule (;).
• Il n’y a pas de limite pour le nombre de couples « propriétés de style/valeur ».
• L’espace entre propriétés de style et valeur n’est pas obligatoire mais aide fortement à la lisibilité du code source.
• Pour la lisibilité toujours, vous pouvez écrire vos styles sur plusieurs lignes :
H3 {font-family: Arial;
font-style: italic;
font-color: green}
• On peut attribuer plusieurs valeurs à une même propriété. Dans ce cas, on séparera les différentes valeurs par des virgules.
H3 {font-family: Arial, Helvetica, sans-serif}
• On peut attribuer un même style à plusieurs balises (séparées par des virgules).
H1, H2, H3 {font-family: Arial; font-style: italic}
Styles internes
Il faut maintenant incorporer les styles dans le document Html. Commençons par le plus simple, soit l’incorporation à l’intérieur d’une page. D’où le titre « Styles internes ».
A l’intérieur des balises <HEAD></HEAD>
Cette façon de procéder est de loin la plus commune et la plus logique. D’abord parce que les balises HEAD contiennent des informations pour le browser et les feuilles de style appartiennent à celles-ci. Ensuite parce que l’on rejoint ainsi l’essence même des feuilles de style qui est de séparer les éléments de mise en forme du contenu.
<HTML>
<HEAD>
<STYLE type= »text/css »>
<!–
La ou les feuille(s) de style
–>
</STYLE>
</HEAD>
<BODY>
• La balise <STYLE> avertit le navigateur que l’on va utiliser des feuilles de style.
• L’attribut type= »text/css » informe que ce qui suit est du texte et qu’il s’agit de cascading style sheets (css). Pour l’instant, il s’agit de la seule possibilité mais on peut prévoir à l’avenir d’autres versions de ce « langage ».
• La balise Html de commentaires <!– … –> empêche que les browsers qui ne connaissent pas les feuilles de style, tentent d’interpréter ces instructions. Les informations à l’intérieur des tags de commentaires seront ignorées par ces browsers.
• Pour vos propres commentaires à propos des feuilles de style, on utilisera la convention désormais classique (C, C++, Javascript…) de /* commentaires */.
A l’intérieur des balises <BODY></BODY>
On peut aussi utiliser, au coup par coup, les feuilles de style dans le corps (BODY) du document. Cette façon de faire nous paraît illogique et peu conforme à l’esprit des feuilles de style qui est de définir un style déterminé valable pour la globalité du document. Mais elle existe pour quelques utilisations spécifiques…
<HTML>
<BODY>
<H1 style= »font-family: Arial; font-style: italic »> blabla </H1>
</BODY>
</HTML>
Signalons :
• que le style Arial, italique n’affectera que cette seule balise H1.
• que la syntaxe est légèrement différente de la précédente.
• que l’écriture : <STYLE type= »text/css »>H1 { « font-family: Arial; font-style: italic » }</STYLE> fonctionne aussi.
Styles externes
C’est déjà bien de pouvoir définir une présentation de style valable pour une page (styles internes). Mais CSS nous propose mieux. Définir une présentation de style valable pour plusieurs pages et même pour toutes les pages d’un site. Ce qui est possible, en créant une page externe qui regroupera toutes les feuilles de style, et en reliant chaque page à cette page de style.
On crée d’abord, dans le répertoire du site, un fichier avec l’extension .css soit styles.css qui contiendra toutes les feuilles de style.
<HTML>
<HEAD>
— Les différentes feuilles de style —
</HEAD>
<BODY>
</BODY>
</HTML>
Ensuite, on crée une page normale soit page1.htm (bien entendu dans le même répertoire que le fichier styles.css).
<HTML>
<HEAD>
<LINK rel=stylesheet type= »text/css » href= »styles.css »>
<HEAD>
• La balise <LINK> avertit le browser qu’il faudra réaliser un lien.
• L’attribut rel=stylesheet (sans s et sans guillemets) précise qu’il y trouvera une feuille de style externe.
• L’attribut type= »text/css » précise que l’information est du texte et du genre cascading style sheets (css).
• L’attribut classique de lien href= » … » donne le chemin d’accès et le nom du fichier à lier.
Les classes et les ID
Notion de classes
Mais on désire parfois affecter des styles différents à une même balise. Pas de problèmes, les feuilles de style vous proposent la solution des classes [class].
La syntaxe est ici aussi des plus simple.
La définition d’un style était :
balise { propriété de style: valeur }
Elle devient :
balise.nom_de_classe { propriété de style: valeur }
remarquez le point entre balise et nom_de_classe
Ou, comme la mention de la balise est facultative,
.nom_de_classe { propriété de style: valeur }
Attention! L’emploi du point (.) devant le nom de classe est indispensable.
Pour appeler l’effet de style dans le document, on ajoute le nom de la classe à la balise.
<balise class= »nom_de-classe »> …. </balise>
Un exemple ?
Je souhaite mettre ce qui est important dans le texte en gras et en bleu. Je crée la classe .essentiel
.essentiel { font-weight: bold; font-color: #000080 }
Et dans le document Html, il suffit d’appeler la classe .important quand cela se révèle nécessaire :
<P class= ».essentiel »> … blabla … </P>
<H1 class= ».essentiel »>Titre 1</H1>
<TABLE><TR><TD class= ».essentiel »>cellule</TD></TD>…
Notion des ID
Comme le convention nom/point/nom est utilisée aussi en Javascript (voir Apprendre le Javascript du même auteur : www.ccim.be/ccim328/js/index.htm) , il a fallu trouver une autre convention d’écriture lorsqu’on désire utiliser les feuilles de style avec du Javascript. Ce sont les ID, aussi appelés les identifiants. Les ID fonctionnent exactement comme les classes. Pas mieux, pas plus. C’est la même chose!
Télécharger le cours complet
