![Page 1: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/1.jpg)
LE CSS
ISN Terminale S
![Page 2: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/2.jpg)
CSS
![Page 3: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/3.jpg)
Types de styles
![Page 4: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/4.jpg)
Styles intégrés
![Page 5: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/5.jpg)
Styles internes
![Page 6: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/6.jpg)
Styles externes
![Page 7: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/7.jpg)
La cascade…
![Page 8: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/8.jpg)
Syntaxe CSS
![Page 9: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/9.jpg)
Syntaxe CSS
![Page 10: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/10.jpg)
Syntaxe CSS : exemple
![Page 11: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/11.jpg)
Syntaxe CSS pour les couleurs
![Page 12: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/12.jpg)
Grouper des styles
![Page 13: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/13.jpg)
Sélecteurs CSS
![Page 14: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/14.jpg)
Sélecteur ’’ class ’’
![Page 15: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/15.jpg)
CSS pseudo-classes
![Page 16: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/16.jpg)
Sélecteur ’’id’’
![Page 17: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/17.jpg)
Sélecteur contextuel
![Page 18: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/18.jpg)
L’élément div : <div>
![Page 19: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/19.jpg)
L’élément span : <span>
![Page 20: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/20.jpg)
span : exemple
![Page 21: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/21.jpg)
Le modèle de la « boite »
![Page 22: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/22.jpg)
Le modèle de la boite
![Page 23: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/23.jpg)
Configurer les marges
![Page 24: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/24.jpg)
Configurer le padding
![Page 25: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/25.jpg)
Configurer les bordures
![Page 26: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/26.jpg)
L’affichage peut varier
![Page 27: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/27.jpg)
Configurer un côté spécifique
![Page 28: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/28.jpg)
Centrer le contenu d’une page
![Page 29: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/29.jpg)
Visualiser avec les outils développeurs
de Firefox…
![Page 30: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/30.jpg)
La typographie en CSS
![Page 31: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/31.jpg)
Police : font-family
![Page 32: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/32.jpg)
Configurer la taille, la graisse, le style
![Page 33: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/33.jpg)
Aligner et indenter du texte
![Page 34: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/34.jpg)
Hauteur et largeur
![Page 35: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/35.jpg)
CSS3 propriété opacity
![Page 36: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/36.jpg)
Images et CSS
![Page 37: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/37.jpg)
CSS background-image
![Page 38: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/38.jpg)
CSS background-repeat
![Page 39: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/39.jpg)
Usages de background-repeat
![Page 40: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/40.jpg)
Configurer les listes avec CSS
![Page 41: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/41.jpg)
list-type-style
![Page 42: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/42.jpg)
TP structurer des pages web (suite)
� TP suite
� Lors du TP précédent vous aviez structuré les pages
web du site « Les pâtisseries de Camille » à l’aide de
balises html.
� Travail a mener : créer la feuille de style externe
permettant d’obtenir la mise en page proposée en
modèle.
![Page 43: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/43.jpg)
Le flux d’éléments
![Page 44: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/44.jpg)
Flux normal
![Page 45: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/45.jpg)
Positionnement relatif
![Page 46: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/46.jpg)
Positionnement absolu
![Page 47: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/47.jpg)
Propriété float
![Page 48: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/48.jpg)
Propriété clear
![Page 49: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/49.jpg)
![Page 50: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/50.jpg)
Maquette de page
![Page 51: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/51.jpg)
CSS modèle de page 2 colonnes
(navigation à gauche)
![Page 52: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/52.jpg)
CSS modèle de page 2 colonnes (top
logo, left nav)
![Page 53: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/53.jpg)
Configurer les liens dans une liste non
ordonnée
![Page 54: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/54.jpg)
Propriété display
![Page 55: LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS modèle de page 2 colonnes (top logo, leftnav) Configurer les liens dans une liste](https://reader033.vdocuments.fr/reader033/viewer/2022053014/5f110d24fefb2655e63acf59/html5/thumbnails/55.jpg)
Configurer les liens dans une liste non
ordonnée