Test
1. What is the previous version of HTML, prior
to HTML5?
A. HTML 4.1
B. HTML 4
C. HTML 4.01
D. HTML 4.9
31/01/2017 Feuilles De Style CSS 1
Test
2. Which doctype is correct for HTML5?
A. <!DOCTYPE HTML5>
B. <!DOCTYPE html>
C. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
5.0//EN"
"[Link]
31/01/2017 Feuilles De Style CSS 2
Test
3. Who is making the Web standards?
A. Mozilla
B. The World Wide Web Consortium
C. Google
D. Microsoft
31/01/2017 Feuilles De Style CSS 3
Test
4. Choose the correct HTML tag for the
largest heading
A. <h1>
B. <heading>
C. <head>
D. <h6>
31/01/2017 Feuilles De Style CSS 4
Test
[Link] is the correct HTML tag for inserting a
line break?
A. <break>
B. <br>
C. <lb>
31/01/2017 Feuilles De Style CSS 5
Test
[Link] the correct HTML tag to make a
text bold
A. <b>
B. <bold>
31/01/2017 Feuilles De Style CSS 6
Test
What is the correct HTML for creating a hyperlink?
A. <a
url="[Link]
</a>
B. <a>[Link]
C. <a
name="[Link]
om</a>
D. <a
href="[Link]
31/01/2017 Feuilles De Style CSS 7
Test
[Link] of these tags are all <table> tags?
A. <table><head><tfoot>
B. <table><tr><tt>
C. <thead><body><tr>
D. <table><tr><td>
31/01/2017 Feuilles De Style CSS 8
Test
[Link] is the correct HTML for inserting an
image?
A. <img src="[Link]" alt="MyImage">
B. <image src="[Link]" alt="MyImage">
C. <img alt="MyImage">[Link]</img>
D. <img href="[Link]" alt="MyImage">
31/01/2017 Feuilles De Style CSS 9
Test
10. What is the preferred way for adding a
background color in HTML?
A. <body style="background-color:yellow;">
B. <background>yellow</background>
C. <body background="yellow">
31/01/2017 Feuilles De Style CSS 10
Introduction
Pour maîtriser l’aspect final à l’écran on utilise
un autre langage que le HTML: le langage
CSS
version actuelle : CSS3
CSS = Cascading Style Sheets
= feuilles de style en cascade
31/01/2017 Feuilles De Style CSS 12
Introduction
Exemple d'un site sans css ni mise en forme
(mise en page par tableau)
31/01/2017 Feuilles De Style CSS 13
Introduction
On veut obtenir quelque chose comme
31/01/2017 Feuilles De Style CSS 14
Introduction
Gestion de la couleur du fond
31/01/2017 Feuilles De Style CSS 15
Introduction
Le code html est modifié
Il faut coller ce code dans toutes les pages du
site
On recommence pour les fonds de tableaux
etc.
Les espacements, les fontes, les couleurs de
texte, …
31/01/2017 Feuilles De Style CSS 16
Introduction
Base de HTML :
Documents : fond, peu de mise en forme
Mise en forme des débuts
Couleurs, alignements, …, décrits dans les balises
Texte transformé en image
Images pour gérer les espacements
Tableaux utilisés à outrance
Mise en forme figée, très lourde à modifier
Mise en forme peu portable
Pages complexes
Nécessité d’une méthode alternative
31/01/2017 Feuilles De Style CSS 17
Introduction
Comment modifier toutes les polices de caractères de la
page [Link] en une seule opération ?
Comment appliquer ces modifications automatiquement
aux autres pages ?
Réponses (imparfaites) :
En utilisant l'outil de recherche/remplacement automatique de
Dreamweaver sur l'ensemble du site (pas toujours facile)
En utilisant un logiciel de recherche/remplacement automatique
qui peut travailler avec plusieurs fichiers texte.
Bonne réponse: utiliser une feuille de style (CSS)
31/01/2017 Feuilles De Style CSS 18
CSS : Cascading Style Sheets
Positionnement flexible des styles:
Fichier séparé
Au début du document
Dans les balises à mettre en forme
Héritage et cascade
Dépendance au média
Écran, imprimante, Braille, …
Styles alternatifs
Rendu plus rapide que mise en forme historique
Modification de style très aisée
31/01/2017 Feuilles De Style CSS 19
Modification de style très aisée
Exemple de deux feuilles de styles appliquées
au même document HTML
31/01/2017 Feuilles De Style CSS 20
Appliquer un style à un élément
Appliquer à une balise
Visiond’une
Redéfinir le style de toutes les instances basique de la
balise
Selon les liens de parenté mise en forme
Descendant, enfant, … Relations entre
Pseudo-classes structure du
document
Vision et mise
légèrement
Liées à l’état de l’élément
en forme !et
dynamique
En fonction des attributs de l’élément
Valeur de l’attribut
contextuelle
Affiner la vision
Affiner
Attribut class: Affecter des éléments la vision
à la classe
basique de la ?mise
Élément identifié basique de la mise
en forme
Identifier un élément HTML ?
en forme
31/01/2017 Feuilles De Style CSS 21
Affecter une balise à une classe
Attribut class
<p class="ma_classe"> Sous-groupe de
Donner un identifiant à une balise
l'ensemble des
Attribut id balises <p>
Identifiant doit être unique (charge du concepteur)
<p id="mon_id_unique"> Une balise <p>
Décrire un élément repérée de façon
unique HTML
Attribut title pour la plupart des éléments
Texte affiché sous forme d’info-bulle (tooltip)
31/01/2017 Feuilles De Style CSS 22
Dans le document
>head <
>"style type="text/css <
--!>
Mon style
<--
>style </
Fichier externe
>head<
link href="URL_fichier_CSS" rel="stylesheet" <
>"type="text/css
31/01/2017 Feuilles De Style CSS 23
Feuille de style
sélecteur {
propriété : valeur ;
[ propriété : valeur ; ]
…
/* Commentaire */
}
p {
color : blue ;
}
31/01/2017 Feuilles De Style CSS 24
Héritage
<!DOCTYPE
Relations Parent
HTML - Enfant
PUBLIC :
"-//W3C//DTD HTML 4.01//EN"
"[Link]
<html>
<head>
<title>Ma première page Web</title>
</head>
<body>
<p>Salut !</p>
</body>
</html>
<html> parent de <body> parent de <p>
<p> hérite de <body> hérite de <html>
L'enfant hérite des propriétés de ses parents
31/01/2017 Feuilles De Style CSS 25
31/01/2017 Feuilles De Style CSS 26
31/01/2017 Feuilles De Style CSS 27
31/01/2017 Feuilles De Style CSS 28
31/01/2017 Feuilles De Style CSS 29
31/01/2017 Feuilles De Style CSS 30
Exemple de sélecteurs courants
p : toutes les balises p
b, u, i : les balises b, u et i
p b : les balises b dans une balise p
a:link:hover : les ancres sources (d'un lien)
non visitées lors de leur survol
p:first-letter : Première lettre des
paragraphes
31/01/2017 Feuilles De Style CSS 31
Exemple de sélecteurs courants
div.ma_classe : les balises div dont l’attribut
class contient au moins ma_classe
.ma_classe : les balises dont l’attribut class
contient au moins ma_classe
div#mon_id : la balise div dont l’attribut id est
mon_id
[Link] li : Les items des listes à puces
appartenant à la classe 'menu'
31/01/2017 Feuilles De Style CSS 32
Valeurs des propriétés
Taille de police :
xx-small, x-small, small, medium, large, x-
large, xx-large
Métrique :
in : pouce (25,4 mm), cm, mm
pt : point (1/72e de pouce)
pc : pica (12 points)
Pixels : px
Relatif à la taille de la police : em
Pourcentage : %
31/01/2017 Feuilles De Style CSS 33
Valeurs des propriétés
URI :url("mon_uri")
Couleurs :
black, white, orange, yellow, green, red, …
#RRGGBB (00FF) , #RGB ≡ #RRGGBB
rgb(red,green,blue) (0255)
rgb(red%,green%,blue%) (0100%)
Chaînes de caractères :
"chaîne 'bonjour'"
"chaîne \"bonjour\""
'chaîne "bonjour"'
'chaîne \'bonjour\''
31/01/2017 Feuilles De Style CSS 34
Exemples de propriétés
color : blue ;
font-size : 12pt ;
font-weight : bold ;
list-style-type: square ;
margin-top : 20px ;
padding-left : 3em ;
text-align : justify ;
text-decoration: none ;
visibility : hidden ;
31/01/2017 Feuilles De Style CSS 35
Cascade de feuilles de style
Origine des feuilles de style :
auteur
utilisateur
agent utilisateur
Règles de priorité :
Tri par média
Tri par origine
▪ agent utilisateur
▪ utilisateur Ordre d'application
▪ auteur Écrasement des précédents
▪ auteur (!important)
▪ utilisateur (!important)
31/01/2017 Feuilles De Style CSS 36
Cascade de feuilles de style
Règles de priorité (suite) :
Tri par priorité (spécificité)
▪ 4 chiffres calculés pour chaque sélecteur (A,B,C,D)
▪ A=1 si attribut style (<p style="…">)
▪ Si A==0, B=nombre d'id dans le sélecteur #ident { … }
▪ Si A==0, C=nombre de class dans le sélecteur
.ma_classe { … }
▪ Si A==0, D=nombre de balises et pseudo-éléments dans le sélecteur
p b a:hover { … }
Tri par ordre d'apparition
▪ ordre des feuilles de style
▪ ordre des styles incorporés
31/01/2017 Feuilles De Style CSS 37
Dépendance au média
Types :
all : tous
braille : système tactile
embossed : imprimante braille
handheld : système portable
print : imprimante
projection : système deprojection
screen : moniteur
speech : synthétiseur vocal
tty : terminal texte
tv : télévision
31/01/2017 Feuilles De Style CSS 38
Dépendance au média
Spécifier un média :
@media media1[, media2] {
/* feuille de style */
}
@import url("url_css") [media1
[,media2]] ;
31/01/2017 Feuilles De Style CSS 39
Modèle de boîtes
Tous les éléments HTML/XHTML sont considérés
comme des boîtes
Les deux grands modes d’affichage des boîtes sont :
Le mode ligne (display : inline)
Le mode bloc (display : block)
La taille finale des boîtes dépend de :
Taille
Remplissages
Bords
Marges
31/01/2017 Feuilles De Style CSS 40
31/01/2017 Feuilles De Style CSS 41
Point sur les boîtes
margin
top, bottom, left, right
border
top, bottom, left, right
padding
top, bottom, left, right
Source : [Link]
31/01/2017 Feuilles De Style CSS 42
31/01/2017 Feuilles De Style CSS 43
31/01/2017 Feuilles De Style CSS 44
31/01/2017 Feuilles De Style CSS 45
31/01/2017 Feuilles De Style CSS 46
31/01/2017 Feuilles De Style CSS 47
31/01/2017 Feuilles De Style CSS 48
31/01/2017 Feuilles De Style CSS 49
31/01/2017 Feuilles De Style CSS 50
31/01/2017 Feuilles De Style CSS 51
31/01/2017 Feuilles De Style CSS 52
31/01/2017 Feuilles De Style CSS 53
31/01/2017 Feuilles De Style CSS 54
31/01/2017 Feuilles De Style CSS 55
31/01/2017 Feuilles De Style CSS 56
31/01/2017 Feuilles De Style CSS 57
31/01/2017 Feuilles De Style CSS 58
31/01/2017 Feuilles De Style CSS 59
31/01/2017 Feuilles De Style CSS 60
Quirks Mode
Mode de rendu des nouveau navigateurs lorsqu’ils
tentent de rester compatibles avec les erreurs du passé
Mode déclenché en fonction de la DTD
DTD complète mode de rendu normal
DTD partielle ou absente mode de rendu dégradé
Importance de fixer correctement la DTD !
Différences entre les modes :
Taille des boîtes
Alignements verticaux
Héritage des polices dans les tableaux
31/01/2017 Feuilles De Style CSS 61
31/01/2017 Feuilles De Style CSS 62
31/01/2017 Feuilles De Style CSS 63