55
LE CSS ISN Terminale S

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

  • Upload
    others

  • View
    8

  • Download
    0

Embed Size (px)

Citation preview

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
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

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

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

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

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

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

Configurer les liens dans une liste non

ordonnée