LE CSS - isn-lpc.pagesperso-orange.fr · CSS modèle de page 2 colonnes (navigation à gauche) CSS...

LE CSS

ISN Terminale S

CSS

Types de styles

Styles intégrés

Styles internes

Styles externes

La cascade…

Syntaxe CSS

Syntaxe CSS

Syntaxe CSS : exemple

Syntaxe CSS pour les couleurs

Grouper des styles

Sélecteurs CSS

Sélecteur ’’ class ’’

CSS pseudo-classes

Sélecteur ’’id’’

Sélecteur contextuel

L’élément div : <div>

L’élément span : <span>

span : exemple

Le modèle de la « boite »

Le modèle de la boite

Configurer les marges

Configurer le padding

Configurer les bordures

L’affichage peut varier

Configurer un côté spécifique

Centrer le contenu d’une page

Visualiser avec les outils développeurs

de Firefox…

La typographie en CSS

Police : font-family

Configurer la taille, la graisse, le style

Aligner et indenter du texte

Hauteur et largeur

CSS3 propriété opacity

Images et CSS

CSS background-image

CSS background-repeat

Usages de background-repeat

Configurer les listes avec CSS

list-type-style

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.

Le flux d’éléments

Flux normal

Positionnement relatif

Positionnement absolu

Propriété float

Propriété clear

Maquette de page

CSS modèle de page 2 colonnes

(navigation à gauche)

CSS modèle de page 2 colonnes (top

logo, left nav)

Configurer les liens dans une liste non

ordonnée

Propriété display

Configurer les liens dans une liste non

ordonnée