03 - HTML et CSS avancés

Harmonisation

• chaque navigateur possède ses propres styles
• solutions à inclure avant ses CSS
  • Reset: annule les styles par défaut des navigateurs, => 0: http://meyerweb.com/eric/tools/css/reset/
  • Normalize: harmonise les styles pour tous les navigateurs : https://necolas.github.io/normalize.css/

##Sélecteurs avancés exercice1 exercice2 exercice3

• Sélecteurs : enfant (>) , adjacent suivant direct (+), adjacent suivant indirect(~)
• priorité : inline style>ID>classes/attributes/pseudo-classes>tag/pseudo-elements , https://specificity.keegan.st/
• pseudo-classes: focus, hover, active, visited, first-child, last-child

##Positionnement CSS avancé exercice3

• reste dans le flux : static, relative
• sort du flux: absolute, fixed, par rapport au premier parent non static

##Background exercice4 exercice5

• image de fond : background-image: url(""),url(""),
• répétition:background-repeat,
• position:background-position: left top
• taille: background-size
• sprite : https://www.smashingmagazine.com/2009/04/the-mystery-of-css-sprites-techniques-tools-and-tutorials/