Les feuilles de style CSS
Les feuilles de style
1. Références
Pour des informations plus complètes vous pouvez aller voir :
[1] (tutorial avec beaucoup d'exemples)
[2] (exemples de CSS avec des boîtes)
[3] (un site très complet, entre autres, sur CSS. Plus technique que les deux précédents)
[4] (un cours très bien fait sur CSS)
[5]
2. Introduction
La cohérence de la présentation d’un site Web est primordiale. Si la forme du site n’est pas rigoureuse, le lecteur aura tendance à associer le fond à ce manque de rigueur. Seulement si chaque ajout d’un titre nécessite qu’on lui donne des attributs, de police, espacement, fond… La réalisation d’un site Web prendra un temps fou. Par ailleurs, une fois le site Web terminé, si on décide d’en changer la présentation, reprendre chacune des pages une par une pour en modifier la présentation de chaque titre, chaque tableau un par un, on aura presque plus vite fait de réécrire tout le site.
Mais il existe une solution à notre problème : les feuilles de styles CSS (Cascading Style Sheet).
Non seulement, elles sont plus pratiques, mais en plus elles font partie des recommandations de w3c, qui encourage leur utilisation plutôt que de changer la mise en forme de chaque élément au sein du document.
3. Utilisation
Une feuille de style va permettre de stocker des mises en formes, de les associer à chaque balise ou même à des éléments particuliers et de les réutiliser pour plusieurs documents.
3.1. Feuille de style interne au document
Il est possible de faire que la feuille de style soit interne au document, mais cela manque un peu d’intérêt puisqu’on ne pourra pas réutiliser la feuille de style dans d’autres documents. Nous ne verrons donc ici que comment utiliser une feuille de style externe.
3.2. Lien vers une feuille externe
On pourra donc créer un document qui ne sera qu’une feuille de style et sera utilisable par autant de documents HTML que l’on veut. Dans chacun de ces documents il faudra ensuite faire un lien vers la (ou les) feuilles de style que l’on voudra utiliser.
Pour ce faire on ajoutera dans l’en-tête du document (balise head) un lien de la forme suivante :
<link rel="stylesheet" href="" type="text/css">
4. Sélecteurs
Une règle CSS est de la forme suivante :
Les informations sur les propriétés et leurs valeurs sont traitées dans le cours.
4.1. Elements HTML
Un sélecteur est par défaut un élément HTML (ex: h1, h2, p, a ) dont la mise en forme va être redéfinie par les propriétés et valeurs. Ex :
4.2. Groupes
Si plusieurs éléments partagent la même propriété vous pouvez décider de créer un groupe (en séparant les sélecteurs par des ',')
h1, h2:hover, h3.important {background-color:red;}
Ici, les éléments h1, les éléments h2 survolés par la souris et les éléments h3 de classe important auront tous un fond rouge.
4.3. Sélecteurs de classe
Un sélecteur de classe permet de décrire la mise en forme relative à un style personnalisé. Ils commencent toujours par un ‘.’.
La première description affectera tous les éléments de classe menu. Le second tous les éléments ul de classe menu (<ul class="menu">…).
4.4. Sélecteurs d’identifiant
Si un style ne doit être appliqué qu’à un élément et un seul (exemple une image dans le coin en haut à gauche de votre page), vous pouvez créer un style qui ne correspondra qu’à l’élément dont l’identifiant est celui que vous aurez spécifié (grace au #) :
Ce style ne sera appliqué qu’à l’élément dont l’identifiant est "imageCoin" (on s’est servi des identifiants pour les signets) :
<img src="" id="imageCoin"> sera le seul élément affecté par ce style.
4.5. Sélecteurs contextuels
Comme nous l’avons fait on peut spécifier un contexte pour l’application d’un style.
| Sélecteur | Sens |
| p a{…} | Style de tous les liens situés dans un paragraphe. Ex : <p>blabla <a href="”>blabla</a></p> <p> bla<div>bla<a href="”>blabla</a> </div></p> |
| .menu li | Un élément de liste situé dans un élément de classe menu. <p class="menu"> <ul><li>bla</li><li>bli</li></ul></p> <ul class="menu"><li>bla</li><li>bli</li></ul> |
| p:hover a.menu | Les éléments liens de classe menu situés dans un élément paragraphe survolés par la souris. <p>blabla <a href="”>blabla</a></p> <p> bla<div>bla<a href="”>blabla</a> </div></p> |
4.6. Exemples
| Règles | Éléments HTML concernés par la règle ( | surlignés | ) | Explications | ||||
| p{color :gray;} | <p>Ceci est un paragraphe</p> | Mise en forme de TOUS les éléments p. | ||||||
| h1,h2{ padding-top: 1em; }/*Groupes*/ | <h1>Grand Titre</h1> | uctif</p>/h2> | Pour appliquer la même mise en forme à plusieurs types d’éléments, on sépare les sélecteurs par une virgule. | |||||
| <p>Paragraphe introd <h2>Première partie< | ||||||||
| /*Sélecteur de classe*/ .important{ font-weight: bold; } | <p>Un paragraphe pas important, sauf <span class="important">ce mot</span></p> <p class="important">Et aussi un § important du début à la fin</p> | Si les éléments d’information proposés par les éléments HTML ne sont pas assez précis, il faut créer une classe de style. Côté CSS, une classe commence par un ‘.’, côté html, c’est un attribut. | ||||||
| /*Sélecteur d’identifiant*/ #menu{ position: fixed; top: 0px; } | <p>Le contenu du document HTML</p> <p id="menu"> <a href="">home</a><br/> <a href="">Exos</a><br/> </p> | Si l’information que l’on veut ajouter ne concerne qu’un seul élément dans tout le fichier HTML, on utilisera son identifiant unique (attribut id en HTML, identifiant précédé de # en CSS). | ||||||
| /*Sélecteur de pseudo-classe*/a:hover{color :red} | <p>Un paragraphe avec <a href="1.htm">un lien</a> dedans. Et puis aussi <a href="2.htm"> un autre lien</a></p> | La sémantique des pseudoclasses est prédéfinie. Côté CSS, elles s’appliquent à un sélecteur en utilisant ‘:’. Ici s’affichent en rouge les liens survolés par la souris. Cette pseudo-classe s’applique à | ||||||
| tout sélecteur : #menu:hover (l’élément menu quand il est survolé par la souris) | ||||||||
| /*combinaison*/p.locut1{ font-family: Arial; } | <p class="locut1">Hola, qué tal?</p> | t >. | Pour une même classe, la représentation peut dépendre de l’élément auquel elle est appliquée. Ici, seuls les paragraphes de classe locut1 sont affectés. | |||||
| <p class="locut2">Muy bien</p> <p>Le locuteur 1 demande au 2 commen <span class="locut1">ça va</span></p | ||||||||
| /*combinaison */ ul li{ color: orange; } | <ol><li>non</li></ol> <ul><li>oui</li> <ol><li>oui aussi</li></ol> </ul> | L’espace se lit de droite à gauche « … contenu dans un élément… ». ul li sélectionne tous les éléments li inclus dans un élément ul. | ||||||
Tableau 1 - Les principaux sélecteurs(sans prise en compte des règles de priorité, cf. références)
5. Ordre de cascade
CSS veut dire cascading style sheet, la métaphore de la cascade concerne les différentes sources de feuilles de style qui seront considérées. Comme plusieurs sources différentes peuvent cohabiter un ordre de priorité dans l'application des propriétés a été défini. Par ordre croissant d'importance :
1. Règles du navigateur
2. Feuilles de style externes (dans l'ordre de lien de ces feuilles de style, la dernière appelée a la priorité maximale parmi les feuilles de style externes)
3. Feuille de style interne (définition des styles dans l'élément <head>)
4. Style dans le texte (dans un élément HTML)
D'autres règles complémentaires existent, elles sont plus complexes, mais peuvent s'avérer utiles, vous les trouverez dans les références [3] et [5]. L'une de ces régles est directement en lien avec ce que nous avons vu des sélecteurs : plus on est précis sur la description des éléments affectés par une règle plus la priorité de cette règle est élevée (le détail du calcul est expliqué dans la référence [5])
Pour chaque élément, d’un document HTML, le moteur de rendu prend en compte toutes les mises en formes qui peuvent s’y rapporter. Si une propriété ne se trouve que dans une seule règle, elle est appliquée, sinon le mécanisme de la cascade est déclenché, pour évaluer la priorité des règles.
| <p class="dicton">Un <a href="">tien</a> vaut mieux que deux tu l’auras</p> | |||
| Navigateur | Auteur1 | Auteur2 | Affichage final |
| a{ | a{ | .dicton a{ | |
| display: inline; | display: inline; | ||
| color: blue; | color: white; | color: white; | |
| text-decoration: underline; | text-decoration: none; | text-decoration: none; | |
| font-style: italic; | font-style: normal; | font-style: normal; | |
| } | } | } | |
Tableau 2 - Exemple de règles pouvant affecter le lien dans le code ci-dessus
6. Les attributs dans les feuilles de style
6.1. Les unités de dimensions en HTML
| en HTML unité explications | ||||
| px | pixels | L'unité "px " est un petit carré à l'écran que le CSS définit de façon un peu abstraite et dont dépend la densité (résolution) en pixel d'affichage selon l'unité de sortie (en général un moniteur). C'est en fait le plus petit élément de la résolution d'écran. | ||
| in | pouces | comme dans la vraie vie | ||
| cm | cm | |||
| mm | mm | |||
| pt | points | 1pt = 1/72 in | ||
| pc | picas | 1pc = 12 pt | ||
| em | ems | Permet d'affecter une mesure relative par rapport à la taille de police de l'élément parent. Les nombres décimaux étant autorisés, toujours remplacer la virgule par un point. | ||
| ex | exs | L'unité "ex" se rapporte à la hauteur des caractères, dont le point de référence est la hauteur des minuscules souvent appelée hauteur "x" lowercase. Mais si toutefois la propriété font-size est donnée avec une unité "ex", celle-ci se rapporte alors à la hauteur de la minuscule x de l'élément parent. | ||
| % | % | Les valeurs de pourcentage sont toujours relatives à d’autres valeurs. Lorsque l'on définit la largeur ou la hauteur d'un élément, ce sera un pourcentage de la taille de la fenêtre. | ||
Les cases grisées représentes les unités de mesures relatives (qui se définissent par rapport à d'autres objets) alors que les autres unités sont absolues et ont toujours le même sens.
6.2. Les chemins relatifs dans une feuille de style
Dans une feuille de style, les chemins relatifs "partent de" l'emplacement de la feuille de style et non du fichier qui l'utilise.
6.3. Type : Gestion de l'aspect des caractères
| Attribut Explications | |
| font-family | Police ou collection de polices. Lorsque l'on spécifie une collection de polices le navigateur utilisera la première police de la liste qui sera installée sur le système. |
| font-size | Taille de la police sélectionnée (cf. §6.1) |
| font-style | Choix entre normal, italique et oblique |
| line-height | La hauteur de la ligne (en général 1 ou 2 pts de plus que la police) |
| text-decoration | Cf. choix |
| font-weight | Applique une épaisseur de trait à la police. 400 correspond à un caractère normal, 700 à un gras |
| font-variant | Possibilité de petites majuscules (tous les caractères qui devraient être en minuscule sont en petites majuscules) : COMME ÇA Attention, se combine avec text-transform |
| text-transform | Choix de majuscules : mettre en majuscules : la première lettre de chaque mot est mise en majuscule majuscules : tout est en majuscules (grande majuscules) minuscules : tout est en minuscules (ou en petites majuscules si l'option de font-variant est sélectionnée) |
| color | Couleur de la police |
6.4. Arrière-plan : gestion de l'arrière-plan et des images d'arrière plan
| Attribut | Explications |
| background-color | Définit la couleur d'arrière plan. |
| background-image | Définit l'image d'arrière plan. Si la couleur et l'image d'arrière plan sont définies : Si le lien vers l'image n'est pas bon, alors la couleur s'affiche |
| Attribut | Explications |
| Si l'image contient des zones transparentes (images gif), la couleur de fond sera visible dans ces zones. Pour le chemin, voir §6.2 | |
| background-repeat | Détermine comment l'image d'arrière-plan est répétée : répétition-x : répétition horizontale répétition-y : répétition verticale |
| background-attachment | Détermine si l'image d'arrière plan est fixée (le texte défile dessus) ou si elle défile avec la page |
| background-position | Contrôle la position horizontale de l'image |
| Contrôle la position verticale de l'image |
6.5. Bloc : gestion des paragraphes
| Attribut Explications | |
| word-spacing | Ajoute de l'espace entre les mots (unité cf. §6.1) |
| letter-spacing | Ajoute de l'espace entre les lettres (unité cf. §6.1) |
| vertical-align | Spécifie l'alignement vertical |
| text-align | Gauche / Centré / Droit / Justifié |
| text-indent | Retrait de première ligne (affichage dépend du navigateur) |
| white-space | Traitement de l'espace blanc : détermine la manière dont l'espace blanc à l'intérieur de l'élément est traité. Normal : réduit l'espace blanc (c'est l'option de base : cela signifie que "espace blanc" s'affiche "espace blanc") Pre : cf. balises PRE : l'espace blanc, les tabulation et les retours chariots sont respectés. Ne marche pas dans IE Pas de retour : on ira à la ligne que en changeant d'élément ou en rencontrant une balise <BR> |
| display | Dit si l'élément ne doit pas être affiché (none) ou spécifie de quelle manière il doit l'être (par défaut : inline) |
6.6. Boîte : réglage et placement des éléments
| Attribut | Explications | ||||||
| width | Détermine la largeur de l'élément | ||||||
| height | Détermine la hauteur de l'élément | ||||||
| float | Permet de faire que l'élément concerné ne précède pas le suivant mais soit à la même hauteur. En le positionnant à gauche ou à droite de ce dernier. Exemple : | ||||||
| Normal | Flottant (à gauche) | ||||||
| monTitre la suite blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla | monTitre la suite blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla | ||||||
| clear | Détermine si l'élément peut être affiché dans la même bande horizontale qu'un élément flottant. Attention : quand on ne veut jamais afficher un élément sur la même ligne qu'un élément flottant (qu'on sélectionne "les deux" dans dreamweaver, cela ne marche pas car la valeur "les deux" est donné à l'attribut alors que les navigateurs demandent "both") | ||||||
| padding | -top | Définit l'importance de l'espace entre le contenu de l'élément et sa bordure ex :
| |||||
| -bottom | |||||||
| -left | |||||||
| -right | |||||||
| margin | -top | Définit l'importance de l'espace entre la bordure de l'élément et les autres éléments (espacement). Ex :
| |||||
| -bottom | |||||||
| -left | |||||||
| -right | |||||||
6.7. Bordure : apparence des bordures
| Attribut Explications | ||
| border | -top | Le type de trait de la bordure |
| -bottom | ||
| -left | ||
| -right | ||
| border | -top | L'épaisseur du trait de la bordure (cf. §6.1) |
| -bottom | ||
| -left | ||
| -right | ||
| border | -top | La couleur de la bordure |
| -bottom | ||
| -left | ||
| -right | ||
6.8.Liste : apparence des listes (seulement pour les éléments de
liste)
| Attribut | Explications | |
| list-style | -type | Le type de puce (à quoi elle ressemble) |
| -image | Pour mettre une image en guise de puce | |
| -position | Dit si la puce doit être affichée à l'intérieur ou à l'extérieur (retrait négatif) du bloc de contenu de l'élément liste. | |
6.9. Positionnement : positionnement des éléments (pour les gérer comme des calques)
| Attribut Explications | |
| position | Détermine si l'élément est positionnable : absolu (absolute): toutes les informations de positionnement sont données par rapport à la page relatif (relative): toutes les informations de positionnement sont données par rapport à l'élément père de l'élément concerné fixed : dans mozilla / firefox permet que l'élément ne bouge pas (même si on fait défiler le texte dans la page) et dans IE ne change rien… |
| width | Ce sont les mêmes que ceux dans boîte, quand on modifie ici le changement est répercuté dans boîte et inversement |
| height | |
| visibility | L'élément doit-il être affiché. hérité (inherit): si le conteneur parent est visible (élément père), il le sera, sinon non. |
| z-index | Pour un élément positionné (cf. position), définit l'ordre de superposition par rapport aux autres éléments à l'intérieur du conteneur parent |
| overflow | définit la façon dont les éléments à dimensions absolues (cf. §6.1) doivent traiter un contenu dont les dimensions dépassent la hauteur ou la largeur du conteneur. |
| left | Position de l'élément dans la page ou dans le conteneur parent (selon l'attribut position) (cf. §6.1) |
| top | |
| right | |
| bottom | |
| clip | zone dans laquelle l'élément sera visible (en ne renseignant pas ce champ, tout sera visible). Correspond au rognage des images dans word |
6.10. Extensions
| Attribut | Explications |
| page-breakbefore | Pour l'impression de votre site web, permet de gérer les sauts de page |
| page-break- after |
| Attribut | Explications |
| cursor | Modifier la forme du curseur (de la souris) quand l'utilisateur le fait passer au dessus de l'élément concerné |
| filter | Effets spéciaux |
Création d'un menu dans une page Web
Dans un très grand nombre de sites web, chacune des pages contient un menu similaire qui permet d'accéder à chaque partie du site. Il existe plusieurs manières de créer ces menus.
1. Les cadres (frames)
Ils permettent d'agencer deux fichiers HTML au sein d'une même page :
La partie code correspond au contenu HTML (moins les en-têtes) du fichier qui contient les cadre. Les parties encadrées correspondent aux chemins relatifs pour accéder aux fichiers dont le contenu est affiché dans les cadres.
1.1.Avantages :
• Un seul et unique fichier menu est suffisant pour tout votre site web. Si vous en modifiez la structure, pas besoin de modifier toutes les pages que vous avez faites.
• Scrolling indépendant de tous les cadres.
• Permet d'afficher différentes facettes d'un même contenu (ex : )
1.2.Inconvénients :
• Liens plus difficiles à gérer
Pour chaque lien il faudra spécifier dans quel cadre il s'ouvre :
Le champ cible ("target") permettra donc de dire où le lien doit-il être ouvert :
Si on choisi "droite" : le lien sera chargé dans le cadre correspondant et le cadre "gauche" restera inchangé NB:
Dans ce qui suit fenêtre peut désigner aussi bien une fenêtre au sens Windows du terme, que le contenu d'un cadre.
! _blank : le document est chargé dans une nouvelle fenêtre, créée pour la circonstance.
! _self : le document sera chargé dans la fenêtre même où se trouve le lien.
! _top : le document sera chargé dans la fenêtre où se trouvait définie la structure de cadre, ce qui la détruit automatiquement.
! _parent : le document sera chargé dans la fenêtre mère de la fenêtre où se trouve le lien. Par exemple si on a dans le cadre "droite" un fichier contenant une structure de cadres et que l'on met comme cible _parent, le lien s'ouvrira dans le cadre "droite", si on met top la structure de cadre complète sera supprimée.
Si on ne renseigne pas le champ ce sera l'opération de _self qui sera utilisée
• Difficulté pour gérer les dimensions :
Il faudra gérer les dimensions des cadres dans la fenêtre globale et ensuite dans chaque fenêtre gérer les dimensions du contenu pour éviter ça :
• Pas très pratique de modifier le jeu de cadres dans dreamweaver
• Pas toujours géré par les moteurs de recherche
• D'autres objections :
2. Les tableaux
L'idée de cette solution est que votre page web sera en fait un grand tableau et ce tableau aura une ligne ou une colonne réservée à la navigation (au menu). En soit cette solution n'est pas compliquée, elle demande juste une certaine connaissance des tableaux.
3. Elements
3.1.1. <TABLE>
Mise en place d'un tableau. Un certain nombre d'attributs peuvent décrire un élément tableau:
| Attribut | Explications |
| border | Epaisseur de la bordure des cellules du tableau. Vaut 0 par défaut. Cette valeur est toujours exprimée en pixels |
| cellpadding | Espace libre dans les deux directions entre le contenu d'une cellule et ses bordures |
| cellspacing | Espace libre dans les deux directions entre les bordures de deux cellules adjacentes |
| width | Largeur du tableau dans la fenêtre du navigateur. Peut s'exprimer en pixels (valeur absolue) ou en pourcentage de la largeur de la fenêtre (valeur relative) |
Cette liste n'est pas du tout exhaustive.
NB: Il faut bien penser au fait que dans le cadre d'un tableau que l'on retrouvera dans toutes les pages d'un site, il peut être intéressant de mettre le plus d'informations possibles dans une feuille de style.
3.1.2. <TR>
Contient une rangée de cellules d'un tableau (ligne)
| Attribut | Explications |
| align | Alignement horizontal des cellules de la ligne |
| valign | Alignement vertical des cellules de la ligne |
3.1.3. <TD> et <TH>
Contenu d'une cellule. TH sera utilisé pour le contenu d'une cellule d'en-tête (dans le tableau ci-dessus "Attribut" et "Explications" sont deux cellules d'en-tête).
| Attribut | Explications |
| align | Alignement horizontal des cellules de la ligne |
| valign | Alignement vertical des cellules de la ligne |
| rowspan | Nombre de colonnes regroupées pour cette cellule |
| colspan | Nombre de lignes regroupées pour cette cellule |
| height | Hauteur de la cellule |
| width | Largeur de la cellule |
| nowrap | Attribut booléen indiquant qu'il ne faut pas replier une ligne trop longue pour la largeur de la cellule |
NB : de même tous ces attributs peuvent être définis grâce à une feuille de style…
3.2. Avantages
• Simple
• Propre
• Très utilisé
3.3. Inconvénients
• Si le contenu et surtout l'architecture du site évoluent, il faudra modifier chacune des pages une par une pour s'assurer qu'elle contient bien le bon menu.
• Selon la portion de la page affichée, le menu n'est pas forcément visible (cependant cela n'est pas très gênant puisque le lecteur saura où trouver le menu)
4. En utilisant les styles
Si on utilise pas de feuille de style cette méthode utilisera l'attribut style des éléments DIV et SPAN. Avec une feuille de style, on se contentera de modifier le style associé à un élément pour : faire de la place pour le menu sur la fenêtre en modifiant le style de body et ensuite à exploiter cette place en plaçant précisément les éléments contenant le menu.
Un bon exemple est donné sur le site :
C'est selon les valeurs de l'attribut que l'on voit ce que cela désigne
[2] C'est selon les valeurs de l'attribut que l'on voit ce que cela désigne