Auteur : Nicolas Chourot.  Langage de spécifications de rendu d’éléments HTML  Évite la duplication  Encourage et facilite l’homogénéisation des pages.

Présentation au sujet: "Auteur : Nicolas Chourot.  Langage de spécifications de rendu d’éléments HTML  Évite la duplication  Encourage et facilite l’homogénéisation des pages."— Transcription de la présentation:

1 Auteur : Nicolas Chourot

2  Langage de spécifications de rendu d’éléments HTML  Évite la duplication  Encourage et facilite l’homogénéisation des pages d’un site web  Facilite l’entretien et la mise à jour des pages web https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference

3  À même des balises HTML (interne)  Localement dans la page web (local)  Dans un fichier (externe)

4

5  Implique seulement la balise visée  Entraine beaucoup de duplications  A préscéance sur le style hérité  Repérage et entretien difficiles

6  Implique seulement la page web visée  Styles non réutilisables dans d’autres pages

7  Facile d’entretien  Transportable  Centralisation des styles pour un site web Attention! L’URL est sensible à la casse

8 “C”“S” “ascading”“tyle”“heets”

9 https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Selectors

10

11 “C”“S” “ascading”“tyle”“heets”

12 https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Selectors Sélecteur { propriété-X:valeur; propriété-Y:valeur; propriété-Z:valeur; … }  nom d’une balise valide .nom d’une classe  #identificateur unique Attributs de sélection: …

13 objet_X objet_Y {…} objet_X objet_Y objet_X objet_Y objet_... objet_Xobjet_Y Tous les objets Y qui ont comme ancêtre un objet X

14 objet_X > objet_Y {…} objet_X objet_Y objet_X objet_Y objet_... objet_Xobjet_Y Tous les objets Y qui ont comme père un objet X

15 objet_Y:first-child {…} objet_X objet_Y objet_X objet_Y objet_... objet_Xobjet_Y Tous les objets Y qui sont les premiers enfants de son parent

16 objet_X + objet_Y {…} objet_X objet_Y objet_X objet_Y objet_... objet_Xobjet_Y Tous les objets Y qui sont les frères suivants d’un objet X

17  :link :link  :visited :visited  :active :active  :hover :hover  :focus :focus  :first-child :first-child  :nth-child :nth-child  :nth-last-child :nth-last-child  :nth-of-type :nth-of-type  :first-of-type :first-of-type  :last-of-type :last-of-type  :empty :empty  :target :target  :checked :checked  :enabled :enabled  :disabled :disabled Sélecteur:pseudo-classe { propriété-X:valeur; propriété-Y:valeur; propriété-Z:valeur; … }

18