Les feuilles de styles
Question : Comment remplacer la couleur noire des 50 paragraphes d’une page Web par du bleu et cela le plus rapidement possible, sans devoir les traiter un par un ?
Réponse : en ayant défini la couleur de tous les paragraphes dans un seul endroit !
On peut définir l’apparence des éléments d’une page Web dans des feuilles de style (par exemple : décrire l’apparence des paragraphes de la page, des titres, des couleurs de fond, des liens).
Cela occasionne un gain de temps lors de la création de la page et facilite des mises à jours ultérieurs sur ces styles.
Une feuille de styles commune à toutes les pages d’un site, localisant ainsi en un seul endroit tout l’aspect visuel du site, permettra d’unifier l’aspect général en assurant une cohérence de présentation.
1 Deux localisations possibles pour les définitions du style
- Sur un élément HTML précis dans la page :
dans la balise de cet élément, avec le paramètre style suivi de l’ensemble des attributs séparés par des points virgulesEx : <p style=“color :blue ; font-style :italic ; text-align :center ;”>Contenu du paragraphe</p> mettra ce paragraphe précis dans ce style particulier
- Sur l’ensemble de la page ou du site :
Il faut tout d’abord créer le fichier de définitions des styles dans un fichier “fich.css”(on remplacera “fich” par un nom clair et évocateur !), attaché ensuite dans chaque entête des pages Web du site par l’instruction1 :
<style type=“text/css” media=“screen”> @import “fich.css” ; </style>
La définition du style d’une catégorie d’éléments suit la forme :
balise_de_l_element {propriété:valeur; propriété:valeur; ...}
|
Ex : h1 {text-align :center ; color :blue ;}
2 Imbrication des définitions de styles : la notion de cascade
Quand il y a des imbrications de styles contradictoires, c’est la définition la plus locale qui
l’emporte.
Dans le cas d’imbrications complémentaires, les définitions sont accumulées au fur et à mesure des
“cascades de définitions”.
L’utilisation de la balise <font> conjointement aux feuilles de style est à proscrire.
3 Définition des styles dans l’entête de la page Web ou dans un fichier .css
3.1 Définition de styles pour toute une catégorie d’éléments HTML
Mettre le nom de la balise correspondant à la catégorie, suivi des propriétés voulues, entre
accolades.
Ex : p {color :blue ; font-size : 10pt ; text-align : justify ; } permet d’appliquer un style à tous les
paragraphes
3.2 Définition de styles communs à plusieurs catégories d’éléments HTML
p, h1, h2 {font-family:verdana;}
h1 {text-align:center;} p {text-align:justify;} |
Cet exemple fixe une même police pour les paragraphes et les titres de niveaux 1 et 2. Ensuite, les titres de niveaux 1 seront centrés et les paragraphes seront justifiés
3.3 La notion de classe de style
Il est parfois souhaitable de ne pas appliquer systématiquement le même style à tous les éléments d’une
même catégorie (par ex des paragraphes de styles différents selon leur sens sémantique dans la
page).
Pour cela, on utilise la notion de classe de style créée par l’utilisateur.
Première étape : Créer les classes de style
Dans la feuille de style, la classe de style est introduite par un point suivi d’un identificateur et ses
propriétés sont indiquées entre accolades.
Ex :
.paramenu {color :silver ; font-family :Verdana ; font-size :24pt ; font-weight :bold}
.paratexte {color :black ; font-family :arial ; font-size :10pt}
Deuxième étape : Appliquer les classes dans les balises HTML
Il s’applique en utilisant l’attribut class="nom_class"
Ex :
<h1 class="paramenu">MENU</h1>
<p class="paramenu">choix1</p> <p class="paratexte">contenu d’un paragraphe associé au choix1</p> <p class="paramenu">choix2</p> <p class="paratexte">contenu d’un paragraphe associé au choix2</p> |
3.4 La notion d’identificateur
L’attribut id dans une balise assigne un nom à un élément. Ce nom doit être unique dans le document. On peut ainsi donner une mise en page spécifique à une balise.
La seule différence avec les classes se trouve dans le remplacement du point par un # dans la feuille de style et de class par id dans la balise.
3.5 La pseudo-classe :hover
La pseudo-classe :hover permet de modifier les propriétés d’un élément lorsque la souris le survole. Ceci est
très utile pour créer du dynamisme.
Ex : #monElement:hover {background : green ;} ceci changera la couleur de fond de l’élément lorsque la
souris passera dessus.
4 Les styles avec les balises <div>. . . </div> et
<span>. . . </span>
Les éléments div et span, en conjonction avec les attributs id et class, offrent un mécanisme générique qui rajoute de la structure aux documents. Ces éléments définissent le contenu comme étant en-ligne (span) ou de bloc (div) mais n’imposent aucune autre expression de présentation sur le contenu. Ainsi, vous pouvez utiliser ceux-ci en conjonction avec les feuilles de style, pour exploiter HTML selon vos besoins et vos goûts propres.
Ex1 : pour pouvoir mettre en forme de simples mots à l’intérieur des paragraphes, on encadre ces mots des balises <span>...</span>
Ex2 : pour mettre en forme une partie de la page Web différemment du reste, on encadre cette partie des balises <div>...</div>
On crée une classe de style correspondant à la mise en forme voulue et on applique cette classe dans la balise <span> ou la balise <div>
Ex :
fichier.css
p {font-size:14pt;}
body {font-family:Verdana} #detail {font-family:arial; text-align:center} .auteur {font-weight:bold; font-size:10pt} |
corps du fichier html :
<body>
<div id="detail"> .... <p>Ce texte est écrit par <span class="auteur">Mr X</span> et révisé par <span class="auteur">Mme Y</span> </p> .... </div> .... </body> |
Pour en savoir plus sur les CSS :
http://www.infini-fr.com/Sciences/Informatique/Reseaux/Internet/WorldWideWeb/Css/index.html
Et les recommendations du W3C : http://www.yoyodesign.org/doc/w3c/css2/cover.html
Pour valider vos CSS (pour savoir si vous n’avez pas fait d’erreur) :
http://jigsaw.w3.org/css-validator/
5 Exercice de synthèse
Pour le site sur les bases du HTML créé précédemment, vous enlèverez dans la balise <body> de toutes ses pages les attributs sur la couleur de fond et la couleur de texte et vous allez créer un fichier de feuilles de style à votre convenance (vous définirez des styles pour l’arrière-plan, les paragraphes, les titres de niveaux 1, les liens. . .) que vous incorporerez dans toutes les pages du site, le rendant ainsi homogène et à votre goût !
Dans la page “bases_html.html”, faites en sorte que tous les mots “paragraphe” soit sur fond noir.
Dans la page “images.html”, créez 3 divisions correspondant aux 3 parties, avec pour chacune une classe qui définit son alignement (gauche, centré, droit) .
6 Quelques exemples d’attributs de styles
*Cascading Style Sheet et en raccourcit : CSS
1On peut également remplacer le @import “fich.css” ; par le contenu du fichier. Mais avec cette technique, on perd la centralisation de l’information
Traduit du LaTeX vers le HTML par htlatex
Page valide XHTML 1 , CSS2 et accessible AA.
Voici pouquoi ce site s'affiche mieux sur un navigateur respectueux des standards.
Pour me contacter