Part 3 & 4
Toutes balises ouvertes se ferme ◦ Aucun accents ni espace ◦ Encore moins des majuscules Il en va de même pour les noms de fichier
Hello world! This is HTML5 Boilerplate.
Selecteur { propriété : valeur ; propriété2 : valeur; propriété3 : valeur; }
html { color: #222; font-size: 1em; line-height: 1.4; }
Pour rappel en HTML ◦ Se traduit en CSS par ◦.titre { Color:blue; }
La balise sert à créer une division au sein d'une page. Les divisions sont des blocs qui servent à grouper des éléments, et peuvent donc être utilisé par la suite avec un style CSS pour créer un design. bla bla bla
Imaginez l'exemple des poupées russes
Il est parfaitement possible d'inclure plusieurs div les uns dans les autres div1 div2
Au lieu de faire on utilise
: en-tête ; : pied de page ; : liens principaux de navigation ; : section de page ; : informations complémentaires ; : article indépendant.
Le Site Web Accueil Blog CV
Premier arrivé premier servi Si nous omettons la possibilité des calques (que nous introduirons plus loin), tous ces blocs se placent — soit les uns à côté des autres, — soit les uns dans les autres, c.à.d. il n'y a pas de chevauchement partiel. Le flux naturel (ou «flot» naturel) est tout simplement la façon dont ces blocs s'agencent.
Un bloc qui en contient un autre est qualifié d'ancêtre de ce bloc ; réciproquement, ce dernier est un enfant du premier. Par exemple, l'ensemble d'une liste à puces (balise UL) forme un bloc qui est l'ancêtre de chacun de ses articles (balise LI). Le père d'un bloc sera son ancêtre immédiat (exemple : la liste à puces est le père de ses différents articles) Les blocs ayant le même père seront qualifiés de blocs frères (exemple : les différents articles d'une même liste à puces, ou des paragraphes successifs dans une page)
HTML case rouge case bleu CSS article { }.blue { background-color: blue; width: 200px; height: 200px; display: inline-block; }.red { background-color: red; width: 200px; height: 200px; display: inline-block; }
Reproduisez moi le tableau du memento