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.

Présentation au sujet: "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."— Transcription de la présentation:

1 Part 3 & 4

2

3

4

5

6  Toutes balises ouvertes se ferme ◦ Aucun accents ni espace ◦ Encore moins des majuscules  Il en va de même pour les noms de fichier

7 Hello world! This is HTML5 Boilerplate.

8 Selecteur { propriété : valeur ; propriété2 : valeur; propriété3 : valeur; }

9  html {  color: #222;  font-size: 1em;  line-height: 1.4;  }

10  Pour rappel en HTML ◦  Se traduit en CSS par ◦.titre {  Color:blue; }

11 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

12  Imaginez l'exemple des poupées russes

13  Il est parfaitement possible d'inclure plusieurs div les uns dans les autres    div1   div2 

14  Au lieu de faire on utilise

15 : en-tête ; : pied de page ; : liens principaux de navigation ; : section de page ; : informations complémentaires ; : article indépendant.

16 http://espacecours.com/iut/web/memCSS.docx   Le Site Web   Accueil  Blog  CV 

17

18  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.

19  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)

20 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; }

21  Reproduisez moi le tableau du memento 

22