Post on 30-Jun-2020
1
SCI6052 Information
documentaire numérique
Cours 11 – Contenu
Automne 2012
C11 - 2012-12-18 Copyright © 2003-2012 Yves Marcoux
Copyright © 2003-2012 Yves Marcoux 2
Stylage CSS pour
documents XHTML
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 3
Stylage CSS• CSS signifie Cascading Style Sheet
• Préconisé pour le stylage des documents XHTML et HTML depuis HTML 4.0
• Recommandation du W3C depuis 1996– Version courante 2011: Level 2 Revision 1 (CSS 2.1)
– Quelques « modules » sont Level 3 (CSS 3)
• Supporté (au moins en partie) par tous les navigateurs récents (Firefox, Opera, IE, Safari, etc.)
• Utilise son propre langage, différent de XHTML
• Ce qu’on dit ici est applicable aussi à HTML (mutatis mutandis)
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 4
Exemples de ce qu’on peut faire
avec CSS et (X)HTML
• <http://csszengarden.com/>
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 5
Philosophie de base (1/4)
• Pour chaque noeud (élément) de la
structure hiérarchique du document
XHTML, le navigateur dresse une liste de
propriétés de formatage, appelée « style »
• Les propriétés ont la forme:nom-de-propriété: valeur-de-propriété;
par exemple:
text-align: center;
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 6
Philosophie de base (2/4)
html
head body
h1 p p Style:color: red;
text-align: justify;
...
Style:color: black;
text-align: center;
...
Style:color: blue;
text-align: center;
...
Style:color: black;
text-align: justify;
...
Style:color: black;
text-align: left;
...
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 7
Philosophie de base (3/4)
• Les propriétés attribuées à un élément
quelconque peuvent provenir:
– De règles CSS génériques, applicables à
toute une classe d’éléments
– De la balise de début de l'élément(attribut style)
– Du paramétrage personnalisé du navigateur
– Du style par défaut du navigateur pour ce
type d'élément
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 8
Philosophie de base (4/4)
• Une règle CSS générique associe des
propriétés à une classe d’éléments
– Exemples:h1 {color: red; text-align:center;}
h2 {color: blue; text-align:left;}
• Plusieurs règles CSS génériques sont
regroupées dans ce qu’on appelle une
« feuille de styles CSS »
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 9
Feuilles de styles externes
• Une feuille de styles externe est un fichier
distinct des fichiers XHTML et qui contient des
règles CSS génériques
– Porte habituellement l’extension .css
• Pour appliquer une feuille de styles externe à un
document XHTML, on place dans le document
un lien vers la feuille (selon une certaine
convention présentée plus loin)
– Permet d’utiliser la même feuille de styles pour
plusieurs documents XHTML
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 10
Feuilles de styles internes
• Un document XHTML peut contenir des
règles génériques:– Dans un sous-élément <style type="text/css"> de
l’entête du document
– C’est ce qu’on appelle une feuille de styles interne
• Les règles d'une feuille interne ne s'appliquent
qu’à ce seul document XHTML
• Les feuilles internes sont habituellement
déconseillées, au profit des feuilles externes
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 11
Propriétés spécifiques à un seul
élément
• La balise d'ouverture de n’importe quel élément peut contenir, dans l'attribut style, des propriétés applicables à ce seul élément
• Exemple:<h2 style="font-size: 110%;">Ohé!</h2>
• À utiliser dans des cas très spéciaux seulement
• Déconseillées par plusieurs (comme les feuilles internes)
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 12
Fusion des propriétés (1/2)
• Les propriétés applicables à un élément
s’ajoutent l’une à l’autre, indépendamment
de leur source
• Par exemple, si la feuille de styles
contient:h2 {color: red; text-align:center;}
– ces propriétés sont combinées avec la propriété font-size provenant du style par
défaut du navigateur
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 13
Fusion des propriétés (2/2)
• Si plusieurs sources spécifient des valeurs
différentes pour la même propriété, alors la
priorité suivante s’applique:
1. Attribut style dans la balise de début de l’élément
2. Style générique dans une feuille de styles interne
3. Style générique dans une feuille de styles externe
4. Paramétrage personnalisé du navigateur
5. Style par défaut du navigateur
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 14
Lien vers une feuille de styles
externe• Lien vers la feuille de styles au moyen de l'élément
(vide) <link> dans l'entête des documents XHTML:
<link rel="stylesheet" href="MaFeuille.css" type="text/css" />
• L'élément <link> doit comprendre:– Le type de lien, soit vers une feuille de styles
• Pour une feuille CSS, ce doit être rel="stylesheet"
– L'emplacement de la feuille
• Variable, doit coïncider avec le nom de fichier et l'emplacement donnés à la feuille; par exemple, href="MaFeuille.css"
– Le type de feuille de style
• Pour une feuille CSS, ce doit être type="text/css"
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 15
CSS: Syntaxe de base (1/3)
• Une feuille de style contient une suite de
règles génériques (appelées "règles"
dans ce qui suit)
• Chaque règle est composée d'un
sélecteur, suivi d'une ou plusieurs
déclarations de propriété entre
accolades
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 16
CSS: Syntaxe de base (2/3)
• Exemple:
h2 { color:red; text-align:center; }
sélecteur déclarations de propriété
déclaration de propriété déclaration de propriété
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 17
CSS: Syntaxe de base (3/3)
• Une déclaration de propriété a la forme:nom-de-propriété: valeur de propriété;
Ex.: background-color : #FFAAFF ;
• Le dernier « ; » (juste avant l’accolade
fermante « } ») peut être omis
• La casse des lettres (majuscules versus
minuscules) n’importe en général pas
• Les blancs / sauts de ligne avant / après la
ponctuation n’importent pas
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 18
Les sélecteurs (1/2)
• Le sélecteur indique la portée de la règle
(à quels éléments elle s’applique)
– C’est souvent un nom d’élément XHTML
h1 {color: blue;}
– Il peut être qualifié par un nom de classe
p.droits {font-size: 80%;}
– Le nom de classe réfère aux attributs class
dans les documents XHTML:
<p class="droits">Copyright © 2014 Luc Roy</p>
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 19
Les sélecteurs (2/2)
• Un sélecteur peut spécifier plusieurs
éléments (qualifiés ou non); on les sépare
par une « , »h2, p.important {font-weight : bold}
• On peut omettre le nom d’élément (ou
inscrire « * »): signifie tous les éléments*.important {color:red;}
– Tous les éléments avec class="important"
sont formatés avec color:red
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 20
Rappel: fusion des propriétés
• Si plus d'une règle s’applique au même
élément, les propriétés sont
« fusionnées », tel que mentionné plus tôt
• Exemple:h1, h2, h3 {color: red;}
*.important {font-size: 200%}
– Un élément h2 avec class="important" serait
alors formaté avec font-size:200% ET
color:red
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 21
Commentaires
• On peut mettre des commentaires dans
une feuille de styles (interne ou externe):
– Précédés de « /* » et suivis de « */ »; ex.:
/* Ceci est un commentaire */
– Les commentaires sont simplement ignorés
par le navigateur
– Utiles pour documenter une feuille de styles
– Utiles pour désactiver temporairement une
partie d'une feuille en développement
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 22
Héritage de propriétés (1/2)
• Certaines propriétés (pas toutes) sont
héritées d’un élément parent par les
éléments enfants
• Ex.: la propriété color (couleur du texte):body {color: red;}
– fera en sorte que tout le texte du document
sera en rouge
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 23
Héritage de propriétés (2/2)
• Cependant, si une autre règle spécifie une
autre valeur pour certains éléments
enfants, alors c’est elle qui primera
• Exemple:body {color: red;}
h2 {color: blue;}
– tout le texte du document sera en rouge, mais
dans les h2, il sera bleu
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 24
Quelques propriétés…
• Ce qui suit est une sélection (pas du tout
exhaustive) de quelques propriétés CSS
importantes
• Vous trouverez quelque chose de
beaucoup plus complet par exemple au <http://www.westciv.com/style_master/academy/css_tutorial/properties/>
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 25
Propriétés pour le texte
• text-align
– Détermine l'alignement des paragraphes
– Valeurs possibles : left | right | center | justify
h1, h2 {text-align: center}
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 26
Propriétés pour le texte
• text-decoration– Détermine la « décoration » du texte.
– Valeurs possibles:
none | underline | overline | line-trough | blink
span.no-de-pièce {text-decoration: underline}
– On peut inscrire plus d’une valeur:
em {text-decoration: underline blink;}
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 27
Propriétés pour le texte
• text-indent– Indentation (décalage) de la 1e ligne des paragraphes
– Valeurs possibles: longueur (ex.: 2cm), pourcentage
p {text-indent: 1.4cm}
– Une valeur négative décale vers la gauche
– Une valeur en pourcentage est relative à la largeur
courante d’une ligne de texte
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 28
Longueurs
• Longueurs relatives:– em (précédé d’un nombre: 1.5em)
• 1em = largeur de la lettre «m» dans la police courante
• Longueurs absolues (précédées d’un nombre: 9mm)
– cm : centimètres
– mm : millimètres
– pt : points typographiques
– px : pixels (taille réelle varie avec la résolution)
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 29
Propriétés pour le texte: les polices
de caractères (1/4)
• font-family
– Détermine la police utilisée
– Valeurs possibles:– nom spécifique (identifie une famille de polices)
– nom générique: serif, sans-serif, cursive, fantasy, monospace
– Jusqu’à trois noms, séparés par « , », à utiliser par ordre de préférence
• Si la première police n’est pas disponible, la deuxième sera utilisée; sinon, la troisième
p {font-family: curlz mt, monotype corsiva, cursive}
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 30
Propriétés pour le texte: les polices
de caractères (2/4)
• font-size (taille des caractères)
– Valeurs possibles:
• Longueurs, relatives ou absolues (ex.: 1.5em, 10pt)
• Autres valeurs relatives: smaller, larger, pourcentage
(par rapport à la taille de police courante)
• Autres valeurs absolues: xx-small, x-small, small,
medium, large, x-large, xx-large
h1 {font-size: 125%} <= taille relative: recommandé
p.bpage {font-size: 10pt} <= taille absolue: déconseillé!
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 31
Propriétés pour le texte: les polices
de caractères (3/4)
• font-style
– Style des caractères
– Valeurs possibles : normal | italic | oblique
– italic et oblique habituellement synonymes
em {font-style : oblique;}
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 32
Propriétés pour le texte: les polices
de caractères (4/4)
• font-weight: épaisseur du trait (ou « graisse ») des caractères
– Valeurs possibles:• Absolues: normal | bold | 100 | 200 | 300 | 400 |
500 | 600 | 700 | 800 | 900
(normal = 400; bold = 700)
• Relatives: bolder | lighter
h3 {font-weight: bold}
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 33
Propriétés pour le texte: la couleur
• color
– Détermine la couleur du texte
p.avertissement {color: red}
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 34
Valeurs pour les couleurs
• Mots-clés– black, white, gray, yellow, red, blue, green, etc.
– Liste complète: <http://www.w3schools.com/colors/colors_names.asp>
• Triplets de composantes rouge/vert/bleu (RGB)– Quatre formes possibles:
• #rrggbb où rr, gg et bb sont entre 00 et FF; ex.: #00FF00
• #rgb où r, g et b sont entre 0 et F; ex.: #0F0
• rgb(x,x,x) où les x sont des nombres entre 0 et 255;ex.: rgb(0,204,0)
• rgb(y%,y%,y%) où les y sont des nombres entre 0 et 100;ex.: rgb(60%,70%,45%)
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 35
Propriétés pour l'arrière-plan
• background-color
– Couleur d'arrière-plan d'un élément
– Valeurs possibles: couleurs
body {background-color: #FFFF6B ;}
p.resume {background-color: gray}
• background-image
– Fonction: spécifier une image d'arrière-plan
– Valeurs possibles : url(url-absolu-ou-relatif)
body { background-image: url (images/bgr.gif) }
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 36
Propriété pour les listes
• list-style-type
– Détermine le type de puces ou de
numérotation pour les éléments d'une liste
– Valeurs possibles : disc | circle | square |
decimal | lower-roman | upper-roman | lower-
alpha | upper-alpha | none
ol {list-style-type: lower-alpha}
ul {list-style-type: square}
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 37
Propriétés pour l'espacement
• margin-top, margin-bottom, margin-left,
margin-right, margin
– Déterminent une des quatre marges: haut,
bas, gauche, droite
– margin fixe les quatre marges d’un coup
– Valeurs possibles : longueur, pourcentage
h1 {margin-top: 1em; margin-bottom: 2em}
body {margin: 2cm}
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 38
Propriétés pour les bordures
• border-color– Fonction : détermine la couleur de la bordure
– Valeurs possibles: couleur
• border-width– Fonction : détermine l'épaisseur de la bordure
– Valeurs possibles : thin | medium | thick | longueur
img {border-color: black; border-width: thin}
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 39
Propriétés pour les bordures
• border-style
– Fonction : détermine le style de la bordure
– Valeurs possibles : none | dotted | dashed |
solid | double | groove | ridge | inset | outset
img {border-style: solid}
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 40
Propriétés pour les images et les
tableaux
• float
– Fonction : permet d'enrouler du texte autour d'une
image ou d'un tableau et de déterminer son
emplacement
– Valeurs possibles : left | right | none
img {float: right}
– Cette règle fera en sorte que lorsque les images
seront insérées dans un paragraphe, elles
s'afficheront à droite et le texte s'enroulera tout
autour.
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 41
Propriétés pour les liens
hypertextuels
• Les sélecteurs :– a:link (pour spécifier les propriétés du texte des
liens)
– a:visited (pour spécifier les propriétés du texte des liens déjà visités)
– a:hover (pour spécifier les propriétés du texte des liens lorsqu'il est survolé par le curseur)
a:link {color: blue; text-decoration: none}
a:visited {color: blue; text-decoration: none}
a:hover {color: blue; text-decoration: underline;background-color: #eff8ad}
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 42
Les différents « médias »
• Depuis « CSS Level 2 », on peut adapter la présentation au média utilisé par le lecteur
• Neuf types de médias sont définis : aural, braille, embossed, handheld, print, projection, screen, tty et tv
– Sauf indication contraire, les règles s’appliquent à tous les médias (c’est le cas dans tous les exemples du cours)
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 43
Que faisait-on avant CSS?
• On utilisait les éléments et attributs dits « présentationnels » du HTML transitionnel
– Exemples d'éléments:• font, center, i, b, etc.
– Exemples d'attributs:• align, size, etc.
• Déconseillés depuis HTML 4.0
• Interdits en HTML (et XHTML) strict
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 44
Avantages du stylage CSS (1/2)
• Langage simple et lisible (mots-clés en
anglais)
• Permet de faire une présentation soignée
et originale sans nuire à l’accessibilité: si
un navigateur ne comprend pas CSS en
tout ou en partie, il ignore simplement ce
qu’il ne comprend pas
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 45
Avantages du stylage CSS (2/2)
• Allège les fichiers XHTML dont le contenu
se perdrait dans un balisage complexe
• Peut améliorer l’accessibilité des sites
pour les aveugles et amblyopes (grâce
aux types de média appropriés)
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 46
Avantages des feuilles de styles
externes (1/2)
• Simplifie l’édition de pages Web et la
maintenance d’un site en séparant le
contenu de la présentation
• Flexibilité: on peut changer l’apparence
d’un site complet sans toucher aux
documents XHTML
• Permet une grande uniformité de
présentation pour un ensemble de pages
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 47
Avantages des feuilles de styles
externes (2/2)
• Diminue le temps de chargement total de
plusieurs pages partageant une même
feuille CSS, qui est chargée une seule fois
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 48
Ressources complémentaires
• Figueiredo, Oscar. «Feuilles de style». In: Introduction à la création de documents pour le World Wide Web HTML 4.0. 3e éd., 1998, p. 45-49. En ligne <http://diwww.epfl.ch/w31sp/pub/coursweb/>.
• Raggett, Dave. Adding a Touch of Style. 2002. Page consultée le 10 novembre 2002. En ligne <http://www.w3.org/MarkUp/Guide/Style>.
• Recommandation CSS2 du W3C en version française. 1998. Page consultée le 10 novembre 2002. En ligne <http://www.yoyodesign.org/doc/w3c/css2/cover.html>.
• Web Design Group. CSS Properties. Page consultée le 10 novembre 2002. En ligne <http://www.htmlhelp.com/reference/css/properties.html>.
C11 - 2012-12-18
Copyright © 2003-2012 Yves Marcoux 49
(suite)
• Références CSS:http://www.westciv.com/style_master/academy/css_tutorial/
http://www.w3schools.com/css/
http://www.w3.org/TR/REC-CSS2/
C11 - 2012-12-18
Conception de sites web
• Déterminer la structure et les éléments
d’interface appropriés pour un site est une
discipline en soi
– Architecture de l’information
– Pas une discipline technique
– Cours SCI6137 Architecture de l’information
et expérience utilisateur pour aller plus loin
dans cette direction
• Cours d’été intensif: 10-21 juin 2013
C11 - 2012-12-18 Copyright © 2003-2012 Yves Marcoux 50
Copyright © 2003-2012 Yves Marcoux
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-ca" lang="fr-ca">
<head>
<title>L'Institut Supérieur de Documentation</title>
<meta name="author" content="" />
<meta name="description" content="Luc Roy" />
</head>
<body>
<p>L'Institut Supérieur de Documentation (ISD) de Tunis offre, entre autres,
un DESS en management des bibliothèques universitaires.
L'ISD est située au 10, Rue de Kélibia, à Tunis, soit à près de 10 000 km de
Montréal.
Dans la semaine du 15 mars, Monsieur Jean-Marie Pinon offrira une formation
bloquée dans le cadre de ce DESS.
Pour plus <a href="http://www.isd.tn/">d'informations, consultez le site</a>
Web de l'ISD.</p>
</body>
</html>
Exemple XHTML à critiquer
C11 - 2012-12-18 51
Voir corrigé
Copyright © 2003-2012 Yves Marcoux
Vue en navigateur
C11 - 2012-12-18 52
Autres exercices :
Exercices XHTML
Exercice CSS
C11 - 2012-12-18 Copyright © 2003-2012 Yves Marcoux 53