CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS :...
Transcript of CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS :...
![Page 1: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/1.jpg)
introduction principes syntaxe
CSS : introduction
Universite Lille 1 Technologies du Web – CSS : introduction 1
![Page 2: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/2.jpg)
introduction principes syntaxe
au programme...
1 introduction
2 principes
3 syntaxe
Universite Lille 1 Technologies du Web – CSS : introduction 2
![Page 3: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/3.jpg)
introduction principes syntaxe
au programme...
1 introduction
2 principes
3 syntaxe
Universite Lille 1 Technologies du Web – CSS : introduction 3
![Page 4: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/4.jpg)
introduction principes syntaxe
tout cela manque quand meme de style
chaque element HTML est affiche par le navigateur avec un style pardefaut.
sansCSS.html
les elements <h1> apparaissent avec une police de taille 2em et« en gras »les elements <p> forment des blocs qui s’affichent les uns endessous des autres avec une marge haute et basse de 1em et leurtexte est affiche avec la police par defaut du navigateurles elements <q> sont encadres par des guillemetsles elements <strong> sont en grasetc.
Universite Lille 1 Technologies du Web – CSS : introduction 4
![Page 5: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/5.jpg)
introduction principes syntaxe
tout cela manque quand meme de style
chaque element HTML est affiche par le navigateur avec un style pardefaut.
sansCSS.html
les elements <h1> apparaissent avec une police de taille 2em et« en gras »les elements <p> forment des blocs qui s’affichent les uns endessous des autres avec une marge haute et basse de 1em et leurtexte est affiche avec la police par defaut du navigateurles elements <q> sont encadres par des guillemetsles elements <strong> sont en grasetc.
Universite Lille 1 Technologies du Web – CSS : introduction 4
![Page 6: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/6.jpg)
introduction principes syntaxe
CSS
il est possible de modifier le style par defaut grace aux CSS
CSS
Cascading Style Sheetsfeuilles de style « en cascade »
exemple avec CSS
« CSS Zen garden »
Universite Lille 1 Technologies du Web – CSS : introduction 5
![Page 7: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/7.jpg)
introduction principes syntaxe
CSS
il est possible de modifier le style par defaut grace aux CSS
CSS
Cascading Style Sheetsfeuilles de style « en cascade »
exemple avec CSS
« CSS Zen garden »
Universite Lille 1 Technologies du Web – CSS : introduction 5
![Page 8: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/8.jpg)
introduction principes syntaxe
CSS
il est possible de modifier le style par defaut grace aux CSS
CSS
Cascading
Style Sheetsfeuilles de style « en cascade »
exemple avec CSS
« CSS Zen garden »
Universite Lille 1 Technologies du Web – CSS : introduction 5
![Page 9: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/9.jpg)
introduction principes syntaxe
CSS
il est possible de modifier le style par defaut grace aux CSS
CSS
Cascading Style
Sheetsfeuilles de style « en cascade »
exemple avec CSS
« CSS Zen garden »
Universite Lille 1 Technologies du Web – CSS : introduction 5
![Page 10: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/10.jpg)
introduction principes syntaxe
CSS
il est possible de modifier le style par defaut grace aux CSS
CSS
Cascading Style Sheets
feuilles de style « en cascade »
exemple avec CSS
« CSS Zen garden »
Universite Lille 1 Technologies du Web – CSS : introduction 5
![Page 11: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/11.jpg)
introduction principes syntaxe
CSS
il est possible de modifier le style par defaut grace aux CSS
CSS
Cascading Style Sheetsfeuilles de style « en cascade »
exemple avec CSS
« CSS Zen garden »
Universite Lille 1 Technologies du Web – CSS : introduction 5
![Page 12: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/12.jpg)
introduction principes syntaxe
CSS
il est possible de modifier le style par defaut grace aux CSS
CSS
Cascading Style Sheetsfeuilles de style « en cascade »
exemple avec CSS
« CSS Zen garden »
Universite Lille 1 Technologies du Web – CSS : introduction 5
![Page 13: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/13.jpg)
introduction principes syntaxe
au programme...
1 introduction
2 principes
3 syntaxe
Universite Lille 1 Technologies du Web – CSS : introduction 6
![Page 14: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/14.jpg)
introduction principes syntaxe
au programme...
1 introduction
2 principes
3 syntaxe
Universite Lille 1 Technologies du Web – CSS : introduction 7
![Page 15: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/15.jpg)
introduction principes syntaxe
un concept important
separation de la forme et du contenuil faut definir separement la forme et le contenu
la structure d’un document et son contenu sont decrits en HTMLsa presentation est geree par les CSS
1 on cree le document (contenu et structure) sans se preoccuper desa mise en forme
2 on concoit la (les !) mise(s) en formepuis eventuellement on les modifie/adapte
Universite Lille 1 Technologies du Web – CSS : introduction 8
![Page 16: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/16.jpg)
introduction principes syntaxe
un concept important
separation de la forme et du contenuil faut definir separement la forme et le contenu
la structure d’un document et son contenu sont decrits en HTMLsa presentation est geree par les CSS
1 on cree le document (contenu et structure) sans se preoccuper desa mise en forme
2 on concoit la (les !) mise(s) en formepuis eventuellement on les modifie/adapte
Universite Lille 1 Technologies du Web – CSS : introduction 8
![Page 17: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/17.jpg)
introduction principes syntaxe
un concept important
separation de la forme et du contenuil faut definir separement la forme et le contenu
la structure d’un document et son contenu sont decrits en HTML
sa presentation est geree par les CSS
1 on cree le document (contenu et structure) sans se preoccuper desa mise en forme
2 on concoit la (les !) mise(s) en formepuis eventuellement on les modifie/adapte
Universite Lille 1 Technologies du Web – CSS : introduction 8
![Page 18: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/18.jpg)
introduction principes syntaxe
un concept important
separation de la forme et du contenuil faut definir separement la forme et le contenu
la structure d’un document et son contenu sont decrits en HTMLsa presentation est geree par les CSS
1 on cree le document (contenu et structure) sans se preoccuper desa mise en forme
2 on concoit la (les !) mise(s) en formepuis eventuellement on les modifie/adapte
Universite Lille 1 Technologies du Web – CSS : introduction 8
![Page 19: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/19.jpg)
introduction principes syntaxe
un concept important
separation de la forme et du contenuil faut definir separement la forme et le contenu
la structure d’un document et son contenu sont decrits en HTMLsa presentation est geree par les CSS
1 on cree le document (contenu et structure) sans se preoccuper desa mise en forme
2 on concoit la (les !) mise(s) en formepuis eventuellement on les modifie/adapte
Universite Lille 1 Technologies du Web – CSS : introduction 8
![Page 20: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/20.jpg)
introduction principes syntaxe
un concept important
separation de la forme et du contenuil faut definir separement la forme et le contenu
la structure d’un document et son contenu sont decrits en HTMLsa presentation est geree par les CSS
1 on cree le document (contenu et structure) sans se preoccuper desa mise en forme
2 on concoit la (les !) mise(s) en formepuis eventuellement on les modifie/adapte
Universite Lille 1 Technologies du Web – CSS : introduction 8
![Page 21: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/21.jpg)
introduction principes syntaxe
avantages
document HTML et feuille CSS peuvent etre definis dans desfichiers separes
creation plus efficacecode HTML plus simple et plus lisibleon peut changer la feuille de style sans modifier le documenton peut avoir plusieurs feuilles de style pour un document
l’homogeneite visuelle d’un site est faciliteeplusieurs pages peuvent partager la meme feuille de style
Universite Lille 1 Technologies du Web – CSS : introduction 9
![Page 22: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/22.jpg)
introduction principes syntaxe
avantages
document HTML et feuille CSS peuvent etre definis dans desfichiers separes
creation plus efficace
code HTML plus simple et plus lisibleon peut changer la feuille de style sans modifier le documenton peut avoir plusieurs feuilles de style pour un document
l’homogeneite visuelle d’un site est faciliteeplusieurs pages peuvent partager la meme feuille de style
Universite Lille 1 Technologies du Web – CSS : introduction 9
![Page 23: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/23.jpg)
introduction principes syntaxe
avantages
document HTML et feuille CSS peuvent etre definis dans desfichiers separes
creation plus efficacecode HTML plus simple et plus lisible
on peut changer la feuille de style sans modifier le documenton peut avoir plusieurs feuilles de style pour un document
l’homogeneite visuelle d’un site est faciliteeplusieurs pages peuvent partager la meme feuille de style
Universite Lille 1 Technologies du Web – CSS : introduction 9
![Page 24: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/24.jpg)
introduction principes syntaxe
avantages
document HTML et feuille CSS peuvent etre definis dans desfichiers separes
creation plus efficacecode HTML plus simple et plus lisibleon peut changer la feuille de style sans modifier le document
on peut avoir plusieurs feuilles de style pour un document
l’homogeneite visuelle d’un site est faciliteeplusieurs pages peuvent partager la meme feuille de style
Universite Lille 1 Technologies du Web – CSS : introduction 9
![Page 25: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/25.jpg)
introduction principes syntaxe
avantages
document HTML et feuille CSS peuvent etre definis dans desfichiers separes
creation plus efficacecode HTML plus simple et plus lisibleon peut changer la feuille de style sans modifier le documenton peut avoir plusieurs feuilles de style pour un document
l’homogeneite visuelle d’un site est faciliteeplusieurs pages peuvent partager la meme feuille de style
Universite Lille 1 Technologies du Web – CSS : introduction 9
![Page 26: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/26.jpg)
introduction principes syntaxe
avantages
document HTML et feuille CSS peuvent etre definis dans desfichiers separes
creation plus efficacecode HTML plus simple et plus lisibleon peut changer la feuille de style sans modifier le documenton peut avoir plusieurs feuilles de style pour un document
l’homogeneite visuelle d’un site est faciliteeplusieurs pages peuvent partager la meme feuille de style
Universite Lille 1 Technologies du Web – CSS : introduction 9
![Page 27: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/27.jpg)
introduction principes syntaxe
principe
le langage CSS definit un ensemble de proprietes qui ont uneinfluence sur l’affichage des elements d’une page
pour chaque propriete il existe un ensemble de valeurs possiblesil est possible de fixer ces proprietes pour chacun des elementsd’un document HTMLles proprietes agissent sur l’apparence de la boıte d’un elementles proprietes 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, visibilite)...
Universite Lille 1 Technologies du Web – CSS : introduction 10
![Page 28: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/28.jpg)
introduction principes syntaxe
principe
le langage CSS definit un ensemble de proprietes qui ont uneinfluence sur l’affichage des elements d’une pagepour chaque propriete il existe un ensemble de valeurs possibles
il est possible de fixer ces proprietes pour chacun des elementsd’un document HTMLles proprietes agissent sur l’apparence de la boıte d’un elementles proprietes 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, visibilite)...
Universite Lille 1 Technologies du Web – CSS : introduction 10
![Page 29: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/29.jpg)
introduction principes syntaxe
principe
le langage CSS definit un ensemble de proprietes qui ont uneinfluence sur l’affichage des elements d’une pagepour chaque propriete il existe un ensemble de valeurs possiblesil est possible de fixer ces proprietes pour chacun des elementsd’un document HTML
les proprietes agissent sur l’apparence de la boıte d’un elementles proprietes 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, visibilite)...
Universite Lille 1 Technologies du Web – CSS : introduction 10
![Page 30: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/30.jpg)
introduction principes syntaxe
principe
le langage CSS definit un ensemble de proprietes qui ont uneinfluence sur l’affichage des elements d’une pagepour chaque propriete il existe un ensemble de valeurs possiblesil est possible de fixer ces proprietes pour chacun des elementsd’un document HTMLles proprietes agissent sur l’apparence de la boıte d’un element
les proprietes concernentl’apparence du contenu (fonte, style, couleur, ...)la taille de la boıte (largeur, marges, ...)le positionnement de la boıte (absolu ou relatif, visibilite)...
Universite Lille 1 Technologies du Web – CSS : introduction 10
![Page 31: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/31.jpg)
introduction principes syntaxe
principe
le langage CSS definit un ensemble de proprietes qui ont uneinfluence sur l’affichage des elements d’une pagepour chaque propriete il existe un ensemble de valeurs possiblesil est possible de fixer ces proprietes pour chacun des elementsd’un document HTMLles proprietes agissent sur l’apparence de la boıte d’un elementles proprietes 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, visibilite)...
Universite Lille 1 Technologies du Web – CSS : introduction 10
![Page 32: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/32.jpg)
introduction principes syntaxe
au programme...
1 introduction
2 principes
3 syntaxe
Universite Lille 1 Technologies du Web – CSS : introduction 11
![Page 33: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/33.jpg)
introduction principes syntaxe
au programme...
1 introduction
2 principes
3 syntaxe
Universite Lille 1 Technologies du Web – CSS : introduction 12
![Page 34: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/34.jpg)
introduction principes syntaxe
regle CSS
Regle CSSUne regle CSS definit
la valeur d’une propriete CSS pour un selecteur donne
selecteur { propriete : valeur }
le selecteur determine les elements sur lesquels s’applique la regle
Universite Lille 1 Technologies du Web – CSS : introduction 13
![Page 35: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/35.jpg)
introduction principes syntaxe
regle CSS
Regle CSSUne regle CSS definit
la valeur d’une propriete CSS pour un selecteur donne
selecteur { propriete : valeur }
le selecteur determine les elements sur lesquels s’applique la regle
Universite Lille 1 Technologies du Web – CSS : introduction 13
![Page 36: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/36.jpg)
introduction principes syntaxe
regle CSS
Regle CSSUne regle CSS definit
la valeur d’une propriete CSS pour un selecteur donne
selecteur { propriete : valeur }
le selecteur determine les elements sur lesquels s’applique la regle
Universite Lille 1 Technologies du Web – CSS : introduction 13
![Page 37: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/37.jpg)
introduction principes syntaxe
syntaxe
il est possible de regrouper plusieurs regles d’un meme selecteurles definitions sont alors separees par des points-virgules
h1 {color : blue;font -size : 12 px;
}
« tous les elements <h1> aurontleur texte en bleu et une taillede police de 12px »
Universite Lille 1 Technologies du Web – CSS : introduction 14
![Page 38: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/38.jpg)
introduction principes syntaxe
syntaxe
il est possible de regrouper plusieurs regles d’un meme selecteurles definitions sont alors separees par des points-virgules
h1 {color : blue;font -size : 12 px;
}
« tous les elements <h1> aurontleur texte en bleu et une taillede police de 12px »
Universite Lille 1 Technologies du Web – CSS : introduction 15
![Page 39: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/39.jpg)
introduction principes syntaxe
syntaxe
on peut factoriser les regles partagees par des selecteursles selecteurs sont alors separes par des virgules
h1 , h2 {color : blue;font -size : 12 px;
}
« les elements <h1> et les elements<h2> auront leur texte en bleu etune taille de police de 12px »
Universite Lille 1 Technologies du Web – CSS : introduction 16
![Page 40: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/40.jpg)
introduction principes syntaxe
syntaxe
on peut factoriser les regles partagees par des selecteursles selecteurs sont alors separes par des virgules
h1 , h2 {color : blue;font -size : 12 px;
}
« les elements <h1> et les elements<h2> auront leur texte en bleu etune taille de police de 12px »
Universite Lille 1 Technologies du Web – CSS : introduction 17
![Page 41: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/41.jpg)
introduction principes syntaxe
feuille de styleune feuille de style CSS regroupe un ensemble de regles CSS
exemple
Universite Lille 1 Technologies du Web – CSS : introduction 18
![Page 42: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/42.jpg)
introduction principes syntaxe
integration des regles CSS a l’HTML
differentes possibilites :
sans CSS �CSS dans le code HTML (beurk) �
a proscrire !regles 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 �
Universite Lille 1 Technologies du Web – CSS : introduction 19
![Page 43: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/43.jpg)
introduction principes syntaxe
integration des regles CSS a l’HTML
differentes possibilites :sans CSS �
CSS dans le code HTML (beurk) �
a proscrire !regles 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 �
Universite Lille 1 Technologies du Web – CSS : introduction 19
![Page 44: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/44.jpg)
introduction principes syntaxe
integration des regles CSS a l’HTML
differentes possibilites :sans CSS �CSS dans le code HTML (beurk) �
a proscrire !
regles 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 �
Universite Lille 1 Technologies du Web – CSS : introduction 19
![Page 45: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/45.jpg)
introduction principes syntaxe
integration des regles CSS a l’HTML
differentes possibilites :sans CSS �CSS dans le code HTML (beurk) � a proscrire !
regles 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 �
Universite Lille 1 Technologies du Web – CSS : introduction 19
![Page 46: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/46.jpg)
introduction principes syntaxe
integration des regles CSS a l’HTML
differentes possibilites :sans CSS �CSS dans le code HTML (beurk) � a proscrire !regles CSS “en dur” dans le document �
bof, limitant !
feuille de style externe : la solution a adopterstyle 1 � – la feuille css 1 �style 2 � – la feuille css 2 �
Universite Lille 1 Technologies du Web – CSS : introduction 19
![Page 47: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/47.jpg)
introduction principes syntaxe
integration des regles CSS a l’HTML
differentes possibilites :sans CSS �CSS dans le code HTML (beurk) � a proscrire !regles CSS “en dur” dans le document � bof, limitant !
feuille de style externe :
la solution a adopterstyle 1 � – la feuille css 1 �style 2 � – la feuille css 2 �
Universite Lille 1 Technologies du Web – CSS : introduction 19
![Page 48: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/48.jpg)
introduction principes syntaxe
integration des regles CSS a l’HTML
differentes possibilites :sans CSS �CSS dans le code HTML (beurk) � a proscrire !regles CSS “en dur” dans le document � bof, limitant !feuille de style externe :
la solution a adopterstyle 1 � – la feuille css 1 �style 2 � – la feuille css 2 �
Universite Lille 1 Technologies du Web – CSS : introduction 19
![Page 49: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/49.jpg)
introduction principes syntaxe
integration des regles CSS a l’HTML
differentes possibilites :sans CSS �CSS dans le code HTML (beurk) � a proscrire !regles 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 �
Universite Lille 1 Technologies du Web – CSS : introduction 19
![Page 50: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/50.jpg)
introduction principes syntaxe
declaration d’une feuille CSS
dans l’entete (<head>) du document HTML :
<link type="text/css" rel="stylesheet"href="fichier.css" />
ou aussi :
<link type="text/css" rel="stylesheet" href="fichier.css" media="screen"/>
Universite Lille 1 Technologies du Web – CSS : introduction 20
![Page 51: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/51.jpg)
introduction principes syntaxe
declaration d’une feuille CSS
dans l’entete (<head>) du document HTML :
<link type="text/css" rel="stylesheet"href="fichier.css" />
ou aussi :<link type="text/css" rel="stylesheet" href="fichier.css" media="screen"/>
Universite Lille 1 Technologies du Web – CSS : introduction 20
![Page 52: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/52.jpg)
introduction principes syntaxe
Exemples de proprietes
font-family : le type de police utilisee pour le contenu,font-size : la taille des caracteres (en px, em, %, etc.)font-style : normal, italic, obliquefont-weight : normal, bold, lighter, etc.border : la bordure autour du contenu de l’element (couleur,style, ...)width : largeur du contenu (%, px, em, cm)color et background-color : couleurs du texte et del’arriere-plan (rgb(0,128,255), hexa #AAAAAA, symbolespredefinis (navy, white, ...), hsl,)
liste � exemple �
Universite Lille 1 Technologies du Web – CSS : introduction 21
![Page 53: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/53.jpg)
introduction principes syntaxe
Validation
validateurComme pour HTML, des outils de validation permettent de verifier lacorrection syntaxique des feuilles CSS.
http://jigsaw.w3.org/css-validator/
Universite Lille 1 Technologies du Web – CSS : introduction 22
![Page 54: CSS : introduction › ~routier › ... · Universit´e Lille 1 Technologies du Web – CSS : introduction 10. introduction principes syntaxe principe le langage CSS d´efinit un](https://reader030.fdocuments.us/reader030/viewer/2022040412/5f03d4b07e708231d40afaaa/html5/thumbnails/54.jpg)
introduction principes syntaxe
a suivre...
CSS : cascades et selecteurs
Universite Lille 1 Technologies du Web – CSS : introduction 23