intro ductio princip e syntax
n s e
CSS : introduction
Technologies du Web – CSS : introduction 1
intro ductio princip e syntax
n s e
au
programme...
1 introducti
on
2 principes
3 syntaxe
Technologies du Web – CSS : introduction 2
intro ductio princip e syntax
n s e
au
programme...
1 introducti
on
2 principes
3 syntaxe
Technologies du Web – CSS : introduction 3
intro ductio princip e syntax
n s e
tout cela manque quand mˆeme de style
chaque ´el´ement HTML est affiche´ par le navigateur avec un
style par d´efaut.
Technologies du Web – CSS : introduction 4
intro ductio princip e syntax
n s e
tout cela manque quand mˆeme de style
chaque ´el´ement HTML est affiche´ par le navigateur avec un
style par d´efaut.
les ´el´ements <h1> apparaissent avec une police de taille
2em et
« en gras »
les ´el´ements <p> forment des blocs qui s’affichent les uns
en dessous des autres avec une marge haute et basse de 1em
et leur texte est affiche´ avec la police par d´efaut du
navigateur
les ´el´ements <q> sont encadr´es par des
guillemets les ´el´ements <strong> sont en
Technologies du Web – CSS : introduction 4
intro ductio princip e syntax
n s e
CSS
il est possible de modifier le style par d´efaut grˆace aux
CSS
Technologies du Web – CSS : introduction 5
intro ductio princip e syntax
n s e
CSS
il est possible de modifier le style par d´efaut grˆace aux
CSS
CSS
Technologies du Web – CSS : introduction 5
intro ductio princip e syntax
n s e
CSS
il est possible de modifier le style par d´efaut grˆace aux
CSS
CSS
Cascading
Technologies du Web – CSS : introduction 5
intro ductio princip e syntax
n s e
CSS
il est possible de modifier le style par d´efaut grˆace aux
CSS
CSS
Cascading Style
Technologies du Web – CSS : introduction 5
intro ductio princip e syntax
n s e
CSS
il est possible de modifier le style par d´efaut grˆace aux
CSS
CSS
Cascading Style Sheets
Technologies du Web – CSS : introduction 5
intro ductio princip e syntax
n s e
CSS
il est possible de modifier le style par d´efaut grˆace aux
CSS
CSS
Cascading Style Sheets
feuilles de style « en cascade »
Technologies du Web – CSS : introduction 5
intro ductio princip e syntax
n s e
CSS
il est possible de modifier le style par d´efaut grˆace aux
CSS
CSS
Cascading Style Sheets
feuilles de style « en cascade »
exemple avec
CSS
« CSS Zen ga
Technologies du Web – CSS : introduction 5
intro ductio princip e syntax
n s e
au
programme...
1 introducti
on
2 principes
3 syntaxe
Technologies du Web – CSS : introduction 6
intro ductio princip e syntax
n s e
au
programme...
1 introducti
on
2 principes
3 syntaxe
Technologies du Web – CSS : introduction 7
intro ductio princip e syntax
n s e
un concept
important
s´eparation de la forme et du
contenu
il faut d´efinir s´epar´ement la forme et le
contenu
Technologies du Web – CSS : introduction 8
intro ductio princip e syntax
n s e
un concept
important
s´eparation de la forme et du
contenu
il faut d´efinir s´epar´ement la forme et le
contenu
Technologies du Web – CSS : introduction 8
intro ductio princip e syntax
n s e
un concept
important
s´eparation de la forme et du contenu
il faut d´efinir s´epar´ement la forme et le contenu
la structure d’un document et son contenu sont d´ecrits en
HTML
Technologies du Web – CSS : introduction 8
intro ductio princip e syntax
n s e
un concept
important
s´eparation de la forme et du contenu
il faut d´efinir s´epar´ement la forme et le contenu
la structure d’un document et son contenu sont d´ecrits en
HTML sa pr´esentation est g´er´ee par les CSS
Technologies du Web – CSS : introduction 8
intro ductio princip e syntax
n s e
un concept
important
s´eparation de la forme et du contenu
il faut d´efinir s´epar´ement la forme et le contenu
la structure d’un document et son contenu sont d´ecrits en
HTML sa pr´esentation est g´er´ee par les CSS
1 on cr´ee le document (contenu et structure) sans se pr
´eoccuper de sa mise en forme
Technologies du Web – CSS : introduction 8
intro ductio princip e syntax
n s e
un concept
important
s´eparation de la forme et du contenu
il faut d´efinir s´epar´ement la forme et le contenu
la structure d’un document et son contenu sont d´ecrits en
HTML sa pr´esentation est g´er´ee par les CSS
1 on cr´ee le document (contenu et structure) sans se pr
´eoccuper de sa mise en forme
2 on conc¸oit la (les !) mise(s) en forme
puis ´eventuellement on les modifie/adapte
Technologies du Web – CSS : introduction 8
intro ductio princip e syntax
n s e
avantag
es
document HTML et feuille CSS peuvent ˆetre d´efinis
dans des fichiers s´epar´es
Technologies du Web – CSS : introduction 9
intro ductio princip e syntax
n s e
avantag
es
document HTML et feuille CSS peuvent ˆetre d´efinis
dans des fichiers s´epar´es
cr´eation plus efficace
Technologies du Web – CSS : introduction 9
intro ductio princip e syntax
n s e
avantag
es
document HTML et feuille CSS peuvent ˆetre d´efinis
dans des fichiers s´epar´es
cr´eation plus efficace
code HTML plus simple et plus lisible
Technologies du Web – CSS : introduction 9
intro ductio princip e syntax
n s e
avantag
es
document HTML et feuille CSS peuvent ˆetre d´efinis
dans des fichiers s´epar´es
cr´eation plus efficace
code HTML plus simple et plus lisible
on peut changer la feuille de style sans modifier le
document
Technologies du Web – CSS : introduction 9
intro ductio princip e syntax
n s e
avantag
es
document HTML et feuille CSS peuvent ˆetre d´efinis
dans des fichiers s´epar´es
cr´eation plus efficace
code HTML plus simple et plus lisible
on peut changer la feuille de style sans modifier le
document on peut avoir plusieurs feuilles de style
pour un document
Technologies du Web – CSS : introduction 9
intro ductio princip e syntax
n s e
avantag
es
document HTML et feuille CSS peuvent ˆetre d´efinis
dans des fichiers s´epar´es
cr´eation plus efficace
code HTML plus simple et plus lisible
on peut changer la feuille de style sans modifier le
document on peut avoir plusieurs feuilles de style
pour un document
l’homog´en´eit´e visuelle d’un site est facilit´ee
plusieurs pages peuvent partager la mˆeme feuille
de style
Technologies du Web – CSS : introduction 9
intro ductio princip e syntax
n s e
principe
le langage CSS d´efinit un ensemble de propri´et´es qui
ont une influence sur l’affichage des ´el´ements d’une page
Technologies du Web – CSS : introduction 10
intro ductio princip e syntax
n s e
principe
le langage CSS d´efinit un ensemble de propri´et´es qui
ont une influence sur l’affichage des ´el´ements d’une page
pour chaque propri´et´e il existe un ensemble de valeurs
possibles
Technologies du Web – CSS : introduction 10
intro ductio princip e syntax
n s e
principe
le langage CSS d´efinit un ensemble de propri´et´es qui
ont une influence sur l’affichage des ´el´ements d’une page
pour chaque propri´et´e il existe un ensemble de valeurs
possibles
il est possible de fixer ces propri´et´es pour chacun des ´el
´ements d’un document HTML
Technologies du Web – CSS : introduction 10
intro ductio princip e syntax
n s e
principe
le langage CSS d´efinit un ensemble de propri´et´es qui
ont une influence sur l’affichage des ´el´ements d’une page
pour chaque propri´et´e il existe un ensemble de valeurs
possibles
il est possible de fixer ces propri´et´es pour chacun des ´el
´ements d’un document HTML
les propri´et´es agissent sur l’apparence de la boˆıte d’un
´el´ement
Technologies du Web – CSS : introduction 10
intro ductio princip e syntax
n s e
principe
le langage CSS d´efinit un ensemble de propri´et´es qui
ont une influence sur l’affichage des ´el´ements d’une page
pour chaque propri´et´e il existe un ensemble de valeurs
possibles
il est possible de fixer ces propri´et´es pour chacun des ´el
´ements d’un document HTML
les propri´et´es agissent sur l’apparence de la boˆıte d’un
´el´ement les propri´et´es concernent
l’apparence du contenu (fonte, style,
couleur, ...) la taille de la boˆıte (largeur,
marges, ...)
le positionnement de la boˆıte (absolu ou
relatif, visibilit´e)
... Technologies du Web – CSS : introduction 10
intro ductio princip e syntax
n s e
au
programme...
1 introducti
on
2 principes
3 syntaxe
Technologies du Web – CSS : introduction 11
intro ductio princip e syntax
n s e
au
programme...
1 introducti
on
2 principes
3 syntaxe
Technologies du Web – CSS : introduction 12
intro ductio princip e syntax
n s e
r`egle
CSS
R`egle CSS
Une r`egle CSS d´efinit
la valeur d’une propri´et´e CSS pour un s
´electeur donn´e
Technologies du Web – CSS : introduction 13
intro ductio princip e syntax
n s e
r`egle
CSS
R`egle CSS
Une r`egle CSS d´efinit
la valeur d’une propri´et´e CSS pour un s
´electeur donn´e
selecteur { propriete : valeur }
Technologies du Web – CSS : introduction 13
intro ductio princip e syntax
n s e
r`egle
CSS
R`egle CSS
Une r`egle CSS d´efinit
la valeur d’une propri´et´e CSS pour un s´electeur
donn´e
selecteur { propriete : valeur }
le s´electeur d´etermine les ´el´ements sur lesquels s’applique
la r`egle
Technologies du Web – CSS : introduction 13
intro ductio princip e syntax
n s e
syntax
e
il est possible de regrouper plusieurs r`egles d’un mˆeme s
´electeur les d´efinitions sont alors s´epar´ees par des points-
virgules
Technologies du Web – CSS : introduction 14
intro ductio princip e syntax
n s e
syntax
e
il est possible de regrouper plusieurs r`egles d’un mˆeme s
´electeur les d´efinitions sont alors s´epar´ees par des points-
virgules
h1 { « tous les ´el´ements <h1>
c ol or : bl ue ;
f ont - s i z e : 12 auront leur texte en bleu et
px ; une taille de police de
} 12px »
Technologies du Web – CSS : introduction 15
intro ductio princip e syntax
n s e
syntax
e
on peut factoriser les r`egles partag´ees par des s
´electeurs les s´electeurs sont alors s´epar´es par des
virgules
Technologies du Web – CSS : introduction 16
intro ductio princip e syntax
n s e
syntax
e
on peut factoriser les r`egles partag´ees par des s
´electeurs les s´electeurs sont alors s´epar´es par des
virgules
h1 , h2 { « les ´el´ements <h1> et les
c ol or : bl ue ;
f ont - s i z e : 12 ´el´ements
px ; <h2> auront leur texte en
} bleu et une taille de police de
12px »
Technologies du Web – CSS : introduction 17
intro ductio princip e syntax
n s e
feuille de style
une feuille de style CSS regroupe un ensemble de
r`egles CSS
Technologies du Web – CSS : introduction 18
intro ductio princip e syntax
n s e
int´egration des r`egles CSS `a
l’HTML
diff´erentes possibilit
´es :
Universit´e Lille Technologies du Web – CSS : introduction 19
intro ductio princip e syntax
n s e
int´egration des r`egles CSS `a
l’HTML
diff´erentes possibilit
´es : sans CSS
Technologies du Web – CSS : introduction 19
intro ductio princip e syntax
n s e
int´egration des r`egles CSS `a
l’HTML
diff´erentes possibilit
´es : sans CSS
CSS dans le code
HTML `a
proscrire !
Technologies du Web – CSS : introduction 19
intro ductio princip e syntax
n s e
int´egration des r`egles CSS `a
l’HTML
diff´erentes possibilit
´es : sans CSS
CSS dans le code
HTML `a
proscrire !
r`egles CSS “en dur”
dans le document
bof, limitant !
Technologies du Web – CSS : introduction 19
intro ductio princip e syntax
n s e
int´egration des r`egles CSS `a
l’HTML
diff´erentes possibilit
´es : sans CSS
CSS dans le code
HTML `a
proscrire !
r`egles CSS “en dur” dans le document bof, limitant !
feuille de style externe :
Technologies du Web – CSS : introduction 19
intro ductio princip e syntax
n s e
int´egration des r`egles CSS `a
l’HTML
diff´erentes possibilit
´es : sans CSS
CSS dans le code
HTML `a
proscrire !
r`egles CSS “en dur” dans le document bof, limitant !
feuille de style externe : la solution `a adopter
style 1 – la feuille css 1
style 2 – la feuille css 2
Technologies du Web – CSS : introduction 19
intro ductio princip e syntax
n s e
d´eclaration d’une
feuille CSS
dans l’entˆete (<head>) du document HTML :
<link type="text/css" rel="stylesheet" href= "[Link]" />
ou aussi :
Technologies du Web – CSS : introduction 20
intro ductio princip e syntax
n s e
d´eclaration d’une
feuille CSS
dans l’entˆete (<head>) du document HTML :
<link type="text/css" rel="stylesheet" href= "[Link]" />
ou aussi :
< l i n k type="text/ c ss" rel="s ty les heet " href="[Link]" media="screen"/>
Technologies du Web – CSS : introduction 20
intro ductio princip e syntax
n s e
Exemples de propri´et´es
font-family : le type de police utilis´ee pour le
contenu, font-size : la taille des caract`eres (en px,
em, %, etc.) font-style : normal, italic,
oblique
font-weight : normal, bold, lighter, etc.
border : la bordure autour du contenu de l’´el´ement
(couleur, style, ...)
width : largeur du contenu (%, px, em, cm)
color et background-color : couleurs du texte et
de l’arri`ere-plan (rgb(0,128,255), hexa #AAAAAA,
symboles pr´ed´efinis (navy, white, ...), hsl,)
liste 8 exemple 8
Technologies du Web – CSS : introduction 21
intro ductio princip e syntax
n s e
Validatio
n
validateur
Comme pour HTML, des outils de validation permettent de v´erifier
la correction syntaxique des feuilles CSS.
[Link]
Technologies du Web – CSS : introduction 22
intro ductio princip e syntax
n s e
`a
suivre...
SAÉ 14 - Se présenter sur Internet
Technologies du Web – CSS : introduction 23