0% ont trouvé ce document utile (0 vote)

94 vues47 pages

CSS-AMALOU Warda

Transféré par

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PPT, PDF, TXT ou lisez en ligne sur Scribd

0% ont trouvé ce document utile (0 vote)

94 vues47 pages

CSS-AMALOU Warda

Transféré par

amalou warda

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PPT, PDF, TXT ou lisez en ligne sur Scribd

Vous êtes sur la page 1/ 47

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">
<!--
Mon style


-->

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

W
<html>
<head>
<title>Ma première page Web</title>
<style type="text/css">

W
<!—
html { font-size : 150% ; }
-->

W
</style>
</head>
<body>
Salut !<p>Salut !</p>
</body>
</html>

10
Héritage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

W
<html>
<head>
<title>Ma première page Web</title>
<style type="text/css">

W
<!—
body { font-size : 150% ; }
p { color : red ; }

W
-->
</style>
</head>
<body>
Salut !<p>Salut !</p>
</body>
</html>
11
Héritage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

W
<html>
<head>
<title>Ma première page Web</title>
<style type="text/css">

W
<!—
html { font-size : 150% ; }
p { font-size : 150% ; }

W
-->
</style>
</head>
<body>
Salut !<p>Salut !</p>
</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 type='text/css'>

</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
<!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 type='text/css'>

body { font-size : 2em ;

line-height : 2.5em ;
}

</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>
28
Ouvrons la boîte
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
display : inline
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

W
<style type='text/css'>
* { border : solid 20px red ; }
body { font-size : 2em ;
line-height : 2.5em ;
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>
<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> display : block
</body>
</html>
29
Ouvrons la boîte
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
display : inline
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

W
<style type='text/css'>
* { border : solid 20px red ; }
body { font-size : 2em ;
line-height : 2.5em ;
border-color : purple ; }
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>
<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> display : block
</body>
</html>
30
Autour de et dans 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">