docPartie HTML TD 3 : Les feuilles de styles (Cascading Style Sheet)
download 
Plainte Transcription
Partie HTML TD 3 : Les feuilles de styles (Cascading Style Sheet)
TD Informatique Semestre 2 : Réseaux - HTML
Université Stendhal, Grenoble III
Partie HTML
TD 3 : Les feuilles de styles
(Cascading Style Sheet)
1. Introduction
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.
2. Trois 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
virgules
ex :
<P style="color : blue ; font -style : italic ; text-align : center">Contenu du paragraphe</P>
mettra ce paragraphe précis dans ce style particulier
−
Sur la page :
dans l'en-tête de la page, entre les balises <STYLE type="text/css">…</STYLE>
La définition du style d'une catégorie d'éléments suit la forme :
balise de l'élément { attribut : valeur ; attribut : valeur ; …}
ex :
<STYLE type="text/css">
P{color : blue; font-size : 10pt; text-align : justify }
H2 { text-align : center; font-family : arial ; font-style : italic;
font-size : 24 pt; color : green; background-color : silver }
</SYTLE>
mettra tous les paragraphes et tous les titres de niveaux 2 de la page dans leur style réciproque
Page 1 sur 6
TD Informatique Semestre 2 : Réseaux - HTML
−
Université Stendhal, Grenoble III
Sur l'ensemble du site :
Il faut tout d'abord créer le fichier de définitions des styles dans un fichier "toto.css" (on remplacera "toto" par
un nom clair et évocateur), attaché ensuite dans chaque page Web du site par l'instruction :
<LINK rel="StyleSheet" type="text/css" href="toto.css">
Cette instruction sera placée dans l'entête des pages Web
3. 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".
<HTML><HEAD>
<STYLE>
P { color : red }
</STYLE>
</HEAD>
<BODY>
<P style="color : green">Ce paragraphe s'affichera en vert.</P>
<P style="font-size:18pt">Ce paragraphe s'affichera en rouge ET sera de taille 18</P>
*
<P><FONT Color="yellow"><P>Ce paragraphe s'affichera en rouge </P></FONT>
<P><FONT Color="yellow">Ce paragraphe s'affichera en jaune*</FONT></P>
</BODY></HTML>
4. Définition des styles dans l'entête de la page Web ou dans un
fichier .CSS
4.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 attributs voulus, entre accolades.
P {color:blue; font-size: 10pt; text-align: justify; }
permet d'appliquer un style à tous les paragraphes
4.2. Définition de styles communs à plusieurs catégories d'éléments
HTML
P, H1, H2, {
H1 {
P{
*
font-family: verdana; }
text-align: center;
}
text-align: justify; }
Le mélange de STYLE et de la balise FONT est déconseillé pour des raisons de "conflits de priorité"
Page 2 sur 6
TD Informatique Semestre 2 : Réseaux - HTML
Université Stendhal, Grenoble III
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
5. 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.
5.1. Première étape : Créer les classes de style
Dans la partie <STYLE> …</STYLE> la classe de style est introduite par un point suivi d'un identificateur
et ses attributs sont indiqués entre accolades :
.paramenu {color:silver; font-family:Verdana; font-size:24pt; font-weight:bold}
.parat exte {color : black ; font-family : arial; font-size : 10pt}
5.2. Deuxième étape : Appliquer les classes dans les balises HTML
<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>
6. Les styles avec les balises <div> et <span>
Lorsqu'on veut attribuer un style particulier à des parties d'une page Web qui ne sont pas des objets de
base HTML, on a recours aux balises <div> (section de texte) et <span> (fragment de texte).
ex 1 : pour pouvoir mettre en forme de simples mots à l'intérieur des paragraphes, on encadre ces mots
des balises <span> …</span>
ex 2 : 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> (voir ci-dessus "La notion de classe de style ")
ex:
<HTML><HEAD>
<STYLE>
P { font-size:14pt }
BODY {font-family :Verdana}
.detail {font-family : arial ; text-align : center}
.auteur {font-weight : bold ; font-size : 10pt}
Page 3 sur 6
TD Informatique Semestre 2 : Réseaux - HTML
Université Stendhal, Grenoble III
</STYLE>
</HEAD>
<BODY>
Partie en police verdana
………………………..
<div class="detail">
………………………...
<p> ce texte est écrit par <span class="auteur">MrX</span>
et révisé par <span class="auteur">Mme Y</span>
</p>
Partie en police arial, centrée
Paragraphe en taille 14 sauf
"MrX" et "MmeY" qui sont en
taille 10 et gras
………………………...
</div>
Partie en police verdana
………………………….
</BODY></HTML>
Pour en savoir plus sur les CSS :
http://www.infini-fr.com/Sciences/Informatique/Reseaux/Internet/WorldWideWeb/Css/index.html
http://www.tizag.com/cssT/
7. Exercice de synthèse
1) Dans la page Base_html.html créée précédemment, enlever de la balise <Body> la couleur de fond et la
couleur de texte et définir ces propriétés dans l’en-tête de la page.
2) De la même façon, supprimer l’alignement des balises de titre et le préciser en en-tête.
3) Dans la page "Bases_html.html", créer 3 divisions correspondant aux 3 parties, avec pour chacune une
classe qui définit son alignement, sa couleur et sa taille.
4) Dans la page "Bases_html.html", faites en sorte que tous les mots "paragraphe" soit sur fond noir (en
utilisant les styles).
5) 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). Créer une nouvelle page Web sans mise en forme, et y appliquer la feuille de
style précédemment créée.
Page 4 sur 6
TD Informatique Semestre 2 : Réseaux - HTML
Université Stendhal, Grenoble III
8. Quelques exemples d'attributs de styles
Attributs
color
Descriptif
Permet de fixer la couleur d'avant-plan.
Exemple
color: purple;
color: #FF00FF
background
Permet de fixer la couleur d'arrière-plan.
background: red;
background: #FF0000
backgroundimage
Permet de fixer une image d'arrière plan. Une
image d'arrière plan prévaut sur la couleur
d'arrière-plan.
background-image: url
font-family
Cet attribut permet de spécifier la police de
caractère à utiliser. Au cas ou la police
n'existerait pas, il est possible de spécifier
une liste de choix. La première police trouvée
à partir de la gauche est appliquer.
font-family : verdana, arial;
font-weight
Permet de fixer le poids (ou la graisse) de la
police de caractères.
font-weight: bold;
Permet de décorer la police de caractères
font-decoration: underline;
font-decoration
('nom_fichier_image');
font-weight: bolder;
font-decoration: strike;
text-align
Cet attribut spécifie l'alignement du bloc
texte.
text-align: center;
text-align: left;
text-align: right;
text-align: justify;
text-indent
Permet de définir le retrait de la premier ligne
du bloc de texte.
text-indent: 10pt;
text-indent: 15px;
text-indent: 5%;
width
Permet de spécifier la largeur de l'élément,
taille de bordure comprise.
width: 80pt;
width: 100px;
width:80%
height
Permet de spécifier la hauteur de l'élément,
taille de bordure comprise.
height: 25%;
margin
margin-top
margin-bottom
margin-left
margin-right
La marge externe n'est pas prise en compte
dans la taille de l'objet. Elle est de plus
transparente. Vous pouvez aussi la spécifier
individuellement pour chaque coté.
margin: 10px;
Page 5 sur 6
margin-left:10%;
margin-right: 10%;
TD Informatique Semestre 2 : Réseaux - HTML
border
border-style
border-width
border-color
Université Stendhal, Grenoble III
Ces attributs permettent de spécifier les
caractéristiques de la bordure (son style de
bordure, sa taille et sa couleur)
border: 2px solid #FF00FF;
border-style: solid;
border-width: 2px;
border-color: #FF00FF;
Cas particulier sur les balises de liens hypertexte :
A {text-decoration:none}
lien pas souligné
A:hover {text-decoration:underline}
lien souligné au passage de la souris
A:active {color : red}
lien qui devient rouge au moment du clic
A:visited {color : green}
lien qui devient vert après avoir été visité
Page 6 sur 6
