Programmation Web - CSS

Fabien Duchateau

Description

Séparation du fond et de la forme. Mise en place du CSS sur une page HTML avec une introduction complète sur le CSS

Informations

• Publié par: Force_IT
• Nombre de lectures: 34
• Licence : En savoir +
  Paternité, pas d'utilisation commerciale, partage des conditions initiales à l'identique
• Langue: Français
• Poids de l'ouvrage: 1 Mo

Extrait

LIF4 - Programmation Web - CSS

Fabien Duchateau

fabien.duchateau [at] univ-lyon1.fr

Université Claude Bernard Lyon 1 2013 - 2014

http://liris.cnrs.fr/~fduchate/ens/2013-2014/LIF4/

1/59

Rappel du cours (ou du week-end) précédent

Et le CSS dans tout ça?

http://www.luc-damas.fr/humeurs/ LIF4 - Initiation aux Bases de Données et Réseaux // Programmation Web - cours CSS

2/59 UCBL Lyon 1

Rappel du cours (ou du week-end) précédent

Et le CSS dans tout ça? Glaçons, parasol, alcool/sirop à mélanger avec la bière, etc.

http://www.luc-damas.fr/humeurs/ LIF4 - Initiation aux Bases de Données et Réseaux // Programmation Web - cours CSS

2/59 UCBL Lyon 1

Contexte

Avant : mise en forme et mise en page dans le code HTML, avec les données (balises obsolètes<center>,<font>, etc.)

Avantages de séparer données et mise en forme/page : Facilité de maintenance I I Facilité de portage pour un autre site Simplification et lisibilité du code I I Uniformisation du code entre les pages du même site et entre différents médias (e.g., impression, écran) I Améliorer l’accessibilité

LIF4 - Initiation aux Bases de Données et Réseaux // Programmation Web - cours CSS

3/59 UCBL Lyon 1

Contexte

Avant : mise en forme et mise en page dans le code HTML, avec les données (balises obsolètes<center>,<font>, etc.)

Avantages de séparer données et mise en forme/page : Facilité de maintenance I Facilité de portage pour un autre site I Simplification et lisibilité du code I Uniformisation du code entre les pages du même site et I entre différents médias (e.g., impression, écran) I Améliorer l’accessibilité

⇒en forme/page avec les Cascading Style SheetsMise 3/59 LIF4 - Initiation aux Bases de Données et Réseaux // Programmation Web - cours CSSUCBL Lyon 1

Cascading Style Sheets

CSS pour Cascading Style Sheets :

Langage de présentation/de rendu des données I

I Origine : 1994-1995 (standard W3C en 1996)

I Toujours en développement (CSS3 depuis 2010)

I Extension d’un fichier CSS :.css

http://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade http://fr.openclassrooms.com/informatique/css/cours http://css.mammouthland.net/ 4/59 http://fr.html.net/tutorials/css/ LIF4 - Initiation aux Bases de Données et Réseaux // Programmation Web - cours CSSUCBL Lyon 1

Une page web sans CSS, puis avec CSS

LIF4 - Initiation aux Bases de Données et Réseaux // Programmation Web - cours CSS

5/59

UCBL Lyon 1

Plan

Introduction aux CSS

Mise en forme avec CSS

Mise en page en CSS

6/59

Introduction aux CSS

Mise en forme avec CSS

Différents niveaux d’insertion

On peut placer du code CSS à cinq niveaux :

Dans une balise, via un attribut (inline) I

I Dans un script intégré dans l’entête de la page web (interne)

I Dansune feuille externe

I Dansplusieurs feuilles externes

I L’utilisateurice possèdesa feuille(cas très rare)

LIF4 - Initiation aux Bases de Données et Réseaux // Programmation Web - cours CSS

Mise en page en CSS

7/59 UCBL Lyon 1

Introduction aux CSS

Mise en forme avec CSS

Différents niveaux d’insertion

On peut placer du code CSS à cinq niveaux :

I Dans une balise, via un attribut (inline)

I Dans un script intégré dans l’entête de la page web (interne)

I Dansune feuille externe

I Dansplusieurs feuilles externes

L’utilisateurice possèdesa feuille(cas très rare) I

Quel est le niveau d’insertion recommandé ?

LIF4 - Initiation aux Bases de Données et Réseaux // Programmation Web - cours CSS

Mise en page en CSS

7/59 UCBL Lyon 1

Introduction aux CSS

Mise en forme avec CSS

Différents niveaux d’insertion

On peut placer du code CSS à cinq niveaux :

Dans une balise, via un attribut (inline) I

Dans un script intégré dans l’entête de la page web I (interne)

I Dansune feuille externe

Dansplusieurs feuilles externes I

L’utilisateurice possèdesa feuille(cas très rare) I

Mise en page en CSS

Quel est le niveau d’insertion recommandé ? Idéalement plusieurs feuilles externes (e.g., pour chaque média), mais généralement dansune seule feuille externe 7/59 LIF4 - Initiation aux Bases de Données et Réseaux // Programmation Web - cours CSSUCBL Lyon 1