Maîtriser les feuilles de style CSS : règles typographiques, positionnement et grille
Adresses derrière les liens

Évolution du standard CSS dans le temps
Écran 4
  1. cascading style sheets (CSS) https://www.w3.org/Style/CSS/
  2. CSS-1 http://www.w3.org/TR/CSS1
  3. CSS-2 (CSS 2 révision 1) https://www.w3.org/TR/CSS21/
Ressources didactiques : livres
Écran 5
  1. Eric Meyer on CSS http://www.ericmeyeroncss.com/
  2. More Eric Meyer on CSS http://more.ericmeyeroncss.com/
Ressources didactiques : sites de veille ou tutoriels
Écran 6
  1. A List Apart http://www.alistapart.com/
  2. CSS Maxdesign http://css.maxdesign.com.au/
  3. Alsacréation http://www.alsacreations.com/
  4. Tutoriel CSS sur W3schools http://www.w3schools.com/css/
  5. Trucs et astuces CSS au W3C http://www.w3.org/Style/Examples/007/
  6. liste complète de ressources pour apprendre les CSS http://www.w3.org/Style/CSS/learning
Outils essentiels pour le développement CSS
Écran 7
  1. http://jigsaw.w3.org/css-validator/ http://jigsaw.w3.org/css-validator/
  2. http://validator.w3.org/ http://validator.w3.org/
  3. https://addons.mozilla.org/fr/firefox/addon/60/ https://addons.mozilla.org/fr/firefox/addon/60/
Quelques propriétés des CSS
Écran 9
  1. http://www.w3.org/TR/CSS21/propidx.html http://www.w3.org/TR/CSS21/propidx.html
  2. Feuille de style par défaut recommandée aux fureteurs pour le HTML 4.0 http://www.yoyodesign.org/doc/w3c/css2/sample.html
Héritage parent/enfant
Écran 11
  1. héritage parent-enfant adresse privée
  2. http://www.yoyodesign.org/doc/w3c/css2/cascade.html#inheritance http://www.yoyodesign.org/doc/w3c/css2/cascade.html#inheritance
  3. http://www.w3.org/TR/CSS21/cascade.html#inheritance http://www.w3.org/TR/CSS21/cascade.html#inheritance
Unités de mesure
Écran 14
  1. 7 CSS Units You Might Not Know About http://webdesign.tutsplus.com/articles/7-css-units-you-might-not-know-about--cms-22573
Classes
Écran 28
  1. classes sur un élément adresse privée
Classes libres
Écran 29
  1. classes libres adresse privée
  2. http://www.yoyodesign.org/doc/w3c/css2/selector.html#class-html http://www.yoyodesign.org/doc/w3c/css2/selector.html#class-html
  3. http://www.w3.org/TR/CSS21/selector.html#class-html http://www.w3.org/TR/CSS21/selector.html#class-html
Pseudoclasses
Écran 30
  1. http://www.w3.org/TR/CSS21/selector.html#pseudo-elements http://www.w3.org/TR/CSS21/selector.html#pseudo-elements
  2. pseudoclasses adresse privée
Grouper des éléments
Écran 32
  1. groupement d'une règle adresse privée
Sélecteurs : descendance et filiation
Écran 33
  1. sélecteurs contextuels adresse privée
Sélecteurs : adjacence et attributs
Écran 34
  1. http://www.w3.org/TR/CSS21/selector.html http://www.w3.org/TR/CSS21/selector.html
  2. http://www.css3.info/selectors-test/ http://www.css3.info/selectors-test/
Sélecteur universel et autres sélecteurs
Écran 35
  1. http://www.yoyodesign.org/doc/w3c/css2/selector.html http://www.yoyodesign.org/doc/w3c/css2/selector.html
  2. sélecteur universel adresse privée
Exemple simple de résolution
Écran 37
  1. http://www.w3.org/TR/CSS1#the-cascade http://www.w3.org/TR/CSS1#the-cascade
  2. résolution de conflit simple adresse privée
Exemple complexe de résolution
Écran 38
  1. http://www.w3.org/TR/CSS1#cascading-order http://www.w3.org/TR/CSS1#cascading-order
  2. http://www.yoyodesign.org/doc/w3c/css1/#cascading-order http://www.yoyodesign.org/doc/w3c/css1/#cascading-order
  3. résolution de conflit complexe adresse privée
Exemple de div
Écran 41
  1. style sur élément div adresse privée
Exemple de span
Écran 42
  1. style sur élément span adresse privée
Éléments d'un bloc
Écran 43
  1. http://www.w3.org/TR/CSS2/box.html http://www.w3.org/TR/CSS2/box.html
Ajouter une bordure
Écran 49
  1. page complète adresse privée
Trucs et astuces (2/2)
Écran 51
  1. http://www.w3.org/TR/CSS21/visuren.html#propdef-display http://www.w3.org/TR/CSS21/visuren.html#propdef-display
  2. http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
  3. http://www.positioniseverything.net/easyclearing.html http://www.positioniseverything.net/easyclearing.html
Exemple de positionnement
Écran 57
  1. positionnement à 20,200 adresse privée
  2. positionnement à 200,20 adresse privée
Tronquer une région
Écran 58
  1. région tronquée adresse privée
Quelques utilisations de la propriété overflow
Écran 59
  1. http://brainjar.com/dhtml/windows/ http://brainjar.com/dhtml/windows/
  2. http://www.cssplay.co.uk/menu/scroll_gallery.html http://www.cssplay.co.uk/menu/scroll_gallery.html
  3. http://www.cssplay.co.uk/menu/tablescroll.html http://www.cssplay.co.uk/menu/tablescroll.html
  4. http://www.cssplay.co.uk/layouts/body.html http://www.cssplay.co.uk/layouts/body.html
  5. http://www.cssplay.co.uk/layouts/bodyfix.html http://www.cssplay.co.uk/layouts/bodyfix.html
Exemple de profondeur
Écran 60
  1. blocs à différentes profondeurs adresse privée
Exemples
Écran 66
  1. http://www.lesimone.com http://www.lesimone.com/fr/
  2. http://www.alistapart.com/articles/goingtoprint/ http://www.alistapart.com/articles/goingtoprint/
Règles média pour iPad
Écran 67
  1. iPad-Specific CSS http://css-tricks.com/snippets/css/ipad-specific-css/

Tous droits réservés 2016, Espace Courbe Formation inc. —22 août 2016 — 14:17:26