CSS-AMALOU Warda

WW
Programmation Web :
Feuilles de style CSS
AMALOU Warda
W
Master 2
Réseaux et Télécommunications
Année universitaire : 2019-2020 1

Mise en forme d’un document HTML
 Base de HTML :
W
 Documents : fond, peu de mise en forme
 Mise en forme des débuts
 Couleurs, alignements, …, décrits dans les balises
W
 Texte transformé en image
 Images pour gérer les espacements
 Tableaux utilisés à outrance
W
Mise en forme figée, très lourde à modifier
Mise en forme peu portable
Pages complexes
Nécessité d’une méthode alternative
2
CSS : Cascading Style Sheets
 Positionnement flexible des styles:
W
 Fichier séparé
 Au début du document
 Dans les balises à mettre en forme
W
 Héritage et cascade
 Dépendance au média
Écran, imprimante, Braille, …
W

 Styles alternatifs
 Rendu plus rapide que mise en forme historique
 Modification de style très aisée
3
Modification de style très aisée
 Exemple de deux feuilles de styles appliquées
W
au même document HTML
WW
4
Appliquer un style à un élément
 Appliquer à une balise
W
Redéfinir le style de toutes les instances d’une balise
 Selon les liens de parenté Vision basique de la
mise en forme
 Descendant, enfant, …
W
Relations entre
 Pseudo-classes structure du
 Liées à l’état de l’élément document et mise
Vision légèrement
en forme !et
 En fonction des attributs de l’élément
dynamique
W
Valeur de l’attribut contextuelle
Affiner la vision
Affiner de
 Attribut class: Affecter des éléments
basique la
à vision
la
la classe
mise ?
basique de la mise
 Élément identifié en forme
en forme
 Identifier un élément HTML ?
5
Classe, identification et description
 Affecter une balise à une classe
W
 Attribut class
 <p class="ma_classe">
 Donner un identifiant à une balise
Sous-groupe de
W
 Attribut id l'ensemble des
 Identifiant doit être unique (chargebalises <p>
du concepteur)
 <p id="mon_id_unique">
W
 Décrire un élément Une balise <p>
 Attribut title pour la plupartrepérée
des éléments
de façonHTML
 Texte affiché sous forme d’info-bulle
unique
(tooltip)
6
Ajouter du style à un document HTML
 Dans le document
W
<head>
<style type="text/css">

W
</style>
W
Fichier externe
<head>
<link href="URL_fichier_CSS"
rel="stylesheet" type="text/css">
7
Feuille de style
sélecteur {
W
propriété : valeur ;
[ propriété : valeur ; ]
…
p {
} WW
/* Commentaire */
color : blue ;
8
Héritage
 Relations Parent - Enfant :
W
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ma première page Web</title>
W
</head>
<body>
<p>Salut !</p>
</body>
</html>
W
 <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
9
Héritage
W
<html>
<head>
W
<!—
html { font-size : 150% ; }
-->
W
</style>
</head>
<body>
Salut !<p>Salut !</p>
</body>
</html>
10
Héritage
W
<html>
<head>
W
<!—
body { font-size : 150% ; }
p { color : red ; }
W
-->
</style>
</head>
<body>
</body>
</html>
11
Héritage
W
<html>
<head>
W
<!—
html { font-size : 150% ; }
p { font-size : 150% ; }
W
-->
</style>
</head>
<body>
</body>
</html>
12
Sélecteurs CSS
Motif Signification
W
* Tout élément.
E Tout élément E (un élément de type E).
E F Tout élément F descendant d’un élément E
W
E > F IE Tout élément F enfant d’un élément E
IE
E:first-child Un élément E premier enfant de son parent
E:link L’élément E, ancre source d’un hyperlien, lorsque la cible
E:visited n’est pas visitée (:link) ou déjà visitée (:visited)
W
E:active
L’élément E durant certaines actions de l’utilisateur :
E:hover
E:focus

IE
IE
est actif, est survolé, a le focus.
E:lang(L) Un élément E s’il emploie la langue L
13
Sélecteurs CSS
Motif Signification
W
E + F  IE
IE
Un élément F immédiatement précédé par un élément E.
E et F ont le même parent.
E[foo] 
IE Tout élément E avec l’attribut foo (peu importe la valeur).
IE
W
E[foo="val"] IE
IE Tout élément E dont l’attribut foo à la valeur val.
Tout élément E dont l’attribut foo est une liste de valeurs

E[foo~="val"]
IE
IE 
séparées par des blancs et dont une à la valeur val.
W
Tout élément E dont l’attribut lang est une liste de valeurs
E[lang|="en"]
séparées par des tirets, celle-ci commençant par val.
E.val Spécifique à HTML. Identique à E[class~="val"]
E#mon_id Tout élément E dont l’ID est mon_id.
14
Exemple de sélecteurs courants
p : toutes les balises p
WW
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)
W
non visitées lors de leur survol
p:first-letter : Première lettre des

paragraphes
15
Exemple de sélecteurs courants
div.ma_classe : les balises div dont l’attribut
W
class contient au moins ma_classe
.ma_classe : les balises dont l’attribut class
W
contient au moins ma_classe
div#mon_id : la balise div dont l’attribut id est
W
mon_id
ul.menu li : Les items des listes à puces

appartenant à la classe 'menu'
16
Valeurs des propriétés
 Taille de police :
W
 xx-small, x-small, small, medium, large, x-
large, xx-large
 Métrique :
W
 in : pouce (25,4 mm), cm, mm
 pt : point (1/72e de pouce)
 pc : pica (12 points)
W
 Pixels : px
 Relatif à la taille de la police : em
 Pourcentage : %
17
Valeurs des propriétés
 URI : url("mon_uri")
W
 Couleurs :
 black, white, orange, yellow, green, red, …
 #RRGGBB (00FF) , #RGB ≡ #RRGGBB
W
 rgb(red,green,blue) (0255)
 rgb(red%,green%,blue%) (0100%)
 Chaînes de caractères :
W
 "chaîne 'bonjour'"
 "chaîne \"bonjour\""
 'chaîne "bonjour"'
 'chaîne \'bonjour\''
18
Exemples de propriétés
color : blue ;
W
font-size : 12pt ;
font-weight : bold ;
list-style-type : square ;
W
margin-top
padding-left
W
text-align
text-decoration
visibility
:
:
:
:
:
20px ;
3em ;
justify ;
none ;
hidden ;
19
Cascade de feuilles de style
 Origine des feuilles de style :
W
 auteur
 utilisateur
 agent utilisateur
W
 Règles de priorité :
 Tri par média
 Tri par origine
W
 agent utilisateur
 utilisateur Ordre d'application
 auteur Écrasement des précédents
 auteur (!important)
 utilisateur (!important)
20
Cascade de feuilles de style
 Règles de priorité (suite) :
W
 Tri par priorité (spécificité)
 4 chiffres calculés pour chaque sélecteur (A,B,C,D)
 A=1 si attribut style (<p style="…">)
W
 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
W
sélecteur
p b a:hover { … }
 Tri par ordre d'apparition
 ordre des feuilles de style
 ordre des styles incorporés
21
Dépendance au média
 Types :
W
 all : tous
 braille : système tactile
 embossed : imprimante braille
W
 handheld : système portable
 print : imprimante
 projection : système deprojection
W
 screen : moniteur
 speech : synthétiseur vocal
 tty : terminal texte
 tv : télévision
22
Dépendance au média
 Spécifier un média :
} W
@media media1[, media2] {
/* feuille de style */
W
W
@import url("url_css") [media1
[,media2]] ;
23
Modèle de boîtes
 Tous les éléments HTML/XHTML sont
W
considérés comme des boîtes
 Les deux grands modes d’affichage des boîtes
sont :
W
 Le mode ligne (display : inline)
 Le mode bloc (display : block)
 La taille finale des boîtes dépend de :
W
 Taille
 Remplissages
 Bords
 Marges
24
Point sur les boîtes
<html><head><title></title>
<style type='text/css'>
W
largeur, hauteur
body { background-color : blue ; }
= width, :height
#a { background-color red ;
border : solid 25px green ;
width : 200px ;
height : 300px
marge; interne
W
padding : 100px ;
margin : 70px = ;padding
}
#a div { width : 100% ;
height : 100% ;
border : 1px solid bord
black ;
W
background-color : white ; }
= border
#b { background-color : white ; }
</style> </head> <body>
<div id='a'><div>div test</div>
</div>
marge externe
<div id='b'>après=divmargin
est</div>
</body> </html>
25
Point sur les boîtes
 margin
W
 top, bottom, left, right
 border
 top, bottom, left, right
 padding

WW
top, bottom, left, right
Source : www.w3.org
26
Ouvrons la boîte
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
W
</style>
WW
<title>Une boîte pour les gouverner tous</title>
</head> <body>
<div class='mon_div'>
<p>Tout n'est que <strong>boîte</strong>.
<em>La compréhension des mécanismes de boîtes
est la <span>clé</span> de la mise en forme
des éléments structurés de la page Web</em></p>
</div>
</body>
</html>
27
Ouvrons la boîte
<html> <head>
W
body { font-size : 2em ;

line-height : 2.5em ;
}
</style>
WW
</head> <body>
</div>
</body>
</html>
28
Ouvrons la boîte
display : inline
<html> <head>
W
* { border : solid 20px red ; }
border-color : purple ; }
div { border-color : blue ; }
W
p { border-color : green ; }
strong { border-color : yellow ; }
em { border-color : black ;
}
span { border-color : gray ; }
W
</style>
</head> <body>
</div> display : block
</body>
</html>
29
Ouvrons la boîte
display : inline
<html> <head>
W
* { border : solid 20px red ; }
div { border-color : blue ; }
W
p { border-color : green ; }
strong { border-color : yellow ; }
em { border-color : black ;
display : block ; }
span { border-color : gray ; }
W
</style>
</head> <body>
</div> display : block
</body>
</html>
30
Autour de et dans la boîte
<html> <head>
W
* { margin : 0 ;
padding : 0 ;
border : solid 20px red ; }
W
div#parent { border-color : blue ;
}
div.enfant {
W
border-color : green ; }
</style>
</head> <body>
<div id='parent'>
<div class='enfant'>a</div>
<div class='enfant'>b</div>
</div>
</body>
</html>
31
<html> <head>
W
* { margin : 0 ;
padding : 0 ;
W
margin : 20px ;
}
div.enfant {
W
</style>
</head> <body>
<div id='parent'>
</div>
</body>
</html>
32
<html> <head>
W
* { margin : 0 ;
padding : 0 ;
W
margin : 20px ;
padding : 20px ; }
div.enfant {
W
</style>
</head> <body>
<div id='parent'>
</div>
</body>
</html>
33
<html> <head>
W
* { margin : 0 ;
padding : 0 ;
W
margin : 20px ;
padding : 20px ; }
div.enfant { margin : 20px ;
W
</style>
</head> <body>
<div id='parent'>
</div>
</body>
</html>
34
<html> <head>
W
* { margin : 0 ;
padding : 0 ;
W
margin : 20px ;
padding : 20px ; }
div.enfant { margin : 20px ;
W
padding : 20px ;
</style>
</head> <body>
<div id='parent'>
</div>
</body>
</html>
35
Les boîtes qui flottent
<html> <head>
W
div { border : solid 20px purple ; }
line-height : 2.5em ; }
#enfant1 { border-color : red ; }
W
#enfant2 { border-color : green ; }
#enfant3 { border-color : blue ; }
</style>
</head> <body>
<div id='parent'>
<div class='enfant' id='enfant1'>aaaaaaaaaa</div>
W
<div class='enfant' id='enfant2'>bbbbbbbbbb</div>
<div class='enfant' id='enfant3'>cccccccccc</div>
</div>
</body>
</html>
36
<html> <head>
W
#enfant1 { border-color : red ;
W
float : left ;
height : 8em ; }
</style>
W
</head> <body>
<div id='parent'>
</div>
</body>
</html>
37
<html> <head>
W
W
#enfant2 { border-color : green ;
float : left ;
height : 8em ; }
</style>
W
</head> <body>
<div id='parent'>
</div>
</body>
</html>
38
<html> <head>
W
W
#enfant3 { border-color : blue ;
float : left ;
height : 8em ; }
</style>
W
</head> <body>
<div id='parent'>
</div>
</body>
</html>
39
<html> <head>
W
W
float : left ;
height : 8em ; }
</style>
W
</head> <body>
<div id='parent'>
</div>
</body>
</html>
40
Les boîtes qui flottent et les autres
<html> <head>
W
W
}
}
}
W
</style>
</head> <body>
<div id='parent'>
</div>
</body>
</html>
41
<html> <head>
W
div { border :
solid 20px purple ; }
body { font-size 2em ;:
line-height :
2.5em ; }
#enfant1 { border-color red ;:
float :
left ;
W
height 8em ;: }
#enfant2 { border-color :
green ;
}
}
W
</style>
</head> <body>
<div id='parent'>
</div>
</body>
</html>
42
<html> <head>
W
float : left ;
W
height : 8em ; }
clear : left ; }
}
W
</style>
</head> <body>
<div id='parent'>
</div>
</body>
</html>
43
<html> <head>
W
div { border :
solid 20px purple ; }
body { font-size 2em ;:
line-height :
2.5em ; }
#enfant1 { border-color red ;:
float :
left ;
W
height 8em ;: }
#enfant2 { border-color :
green ;
}
clear : left ; }
W
</style>
</head> <body>
<div id='parent'>
</div>
</body>
</html>
44
Quirks Mode
 Mode de rendu des nouveau navigateurs
W
lorsqu’ils tentent de rester compatibles avec les
erreurs du passé
 Mode déclenché en fonction de la DTD
W
 DTD complète  mode de rendu normal
 DTD partielle ou absente  mode de rendu dégradé
 Importance de fixer correctement la DTD !
 W
 Différences entre les modes :
Taille des boîtes
Alignements verticaux
Héritage des polices dans les tableaux
45
Quirks Mode : exemple normal
<html> <head>
W
<style type='text/css'> 50px
div { margin : 0 ;
padding : 0 ;
border : solid 20px purple ; }
W
background 300px
: no-repeat url('fond.png') center center ;
height : 300px ;
width : 300px ;
margin : 20px ;
W
padding : 60px ; }
</style>
</head>
50px
<body>
<div id='parent'>
</div>
</body>
</html>
46
Quirks Mode : exemple dégradé
<html> <head>
W
<style type='text/css'> 50px
div { margin : 0 ;
padding : 0 ;
border : solid 20px purple ; }
body { font-size 300px
: 2em ;
W
background : no-repeat url('fond.png') center center ;
height 50px
: 300px ;
width : 300px ;
margin : 20px ;
W
padding : 60px ; }
</style>
</head>
<body>
<div id='parent'>
</div>
</body>
</html>
47

CSS-AMALOU Warda

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

CSS-AMALOU Warda

Încărcat de

Drepturi de autor:

Formate disponibile

WW

Année universitaire : 2019-2020 1

 Positionnement flexible des styles:

 Appliquer à une balise

 Affecter une balise à une classe

 Relations Parent - Enfant :

E:lang(L) Un élément E s’il emploie la langue L

Tout élément E dont l’attribut foo est une liste de valeurs

E.val Spécifique à HTML. Identique à E[class~="val"]

E#mon_id Tout élément E dont l’ID est mon_id.

p : toutes les balises p

p b : les balises b dans une balise p

a:link:hover : les ancres sources (d'un lien)

p:first-letter : Première lettre des

div.ma_classe : les balises div dont l’attribut

.ma_classe : les balises dont l’attribut class

div#mon_id : la balise div dont l’attribut id est

ul.menu li : Les items des listes à puces

 Origine des feuilles de style :

 Règles de priorité (suite) :

body { font-size : 2em ;

S-ar putea să vă placă și