L'essentiel des CSS

Analyser le flux de lecture d'un navigateur

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Analysez le flux normal de lecture d'un navigateur et distinguez les deux natures principales d'éléments. Il s'agit de bloc et d'inline.
04:33

Transcription

Avant de démarrer ce chapitre sur les éléments, les modèles de boîte et l'affichage, il est important de bien comprendre le flux de lecture d'un navigateur. Pour cela, je vous propose d'avoir deux types d'éléments, de type div et de type span, on reviendra juste après sur leur nature, et on va simplement leur donner une couleur ici, qui va être identique pour les deux, hsl(30,100%,40%). Ce qu'on va faire, c'est récupérer ce fragment ici... alors si vous n'utilisez pas Emmet, ne vous inquiétez pas, c'est juste pour pouvoir taper du code plus vite, voilà, je lui ai demandé de me créer trois div, bloc01, bloc02, bloc03. Si je les regarde dans le navigateur, regardez, on a bien ces trois blocs qui sont affichés les uns après les autres. Parfait. Je les ai volontairement appelés blocs. Si Emmet vous intéresse, vous pouvez vous rapprocher de notre catalogue et chercher une formation dédiée à Emmet, c'est assez intéressant pour travailler en CSS et en HTML. Là, je viens de demander de créer 20 lignes de span, avec « En ligne 01 » jusqu'à « En ligne 20 ». J'enregistre et regardez maintenant la manière dont c'est écrit. En fait, il s'agit de deux blocs principaux du HTML qu'on appelle les éléments de type block et les éléments de type inline. Les éléments de type block vont s'afficher les uns sous les autres en partant du coin supérieur gauche par défaut parce que si je regarde bien ici, c'est en langue anglaise, j'aurais pu être en français, mais ce que j'appellerai la direction, le dir, est égal à ltr, ltr, left to right. Si j'actualise ma page, on est bien dans ce mode de lecture. Si j'étais par contre dans un mode de lecture rtl, ou right to left, à ce moment-là, les blocs sont placés de droite à gauche, on est pas dans le même sens. Donc on est bien d'accord que le flux du navigateur par défaut va être placé de gauche à droite, donc tous les éléments de type block vont s'empiler les uns sous les autres en fonction de l'espace, c'est-à-dire que si celui-ci avait besoin de plus d'espace, si je génère du caractère Lorem ipsum ici, et que j'actualise, vous voyez que le bloc 02 est poussé vers le bas par le premier. Donc on va dire que tous les éléments de type block vont se placer en haut à gauche du navigateur, quand le deuxième bloc arrive, il se met à la suite, il va se mettre en dessous, en haut à gauche. Alors que les éléments de type en ligne, inline, sous forme de span par exemple, vont s'afficher les uns à la suite des autres jusqu'à la fin de la ligne, puis ils passent à la ligne et continuent, c'est-à-dire que si j'agrandis ici, vous voyez bien qu'ils vont monter. Les autres ne bougent pas. Ceux-là vont s'adapter à la largeur du navigateur. Donc il est très important de bien comprendre qu'on a des familles de blocs de type block, et des familles de blocs de type inline. Généralement, ce qui va se contenir dans un texte, comme les annotations, les span, la mise en gras, la mise en italique, etc. vont être des éléments de type inline. Par contre, tous les éléments structurels, les balises article, section, aside, nav, vont être des éléments de type block. Donc c'est important de comprendre comment le flux du navigateur va fonctionner. L'info arrive, tu es block, je te mets tout seul en haut à gauche, tu es block, en dessous, tu es en ligne, à la suite les uns des autres. En gros, ça fonctionne comme ça. On peut alors étudier le modèle de boîte. Pour cela, je vous invite déjà, avant d'aller dans les étapes ultérieures, à regarder comment le W3C définit le modèle de boîte. Le modèle de boîte va dire que le contenu, donc ce qui est écrit ici, ça c'est le contenu, va se situer à l'intérieur, autour de lui va avoir ce qu'on appelle le padding. Le padding c'est une marge de remplissage entre la bordure physique du bloc et le contenu. Ce padding peut avoir toute l'épaisseur qu'on veut. Le content, on verra que ce qu'on appelle la largeur et la hauteur peuvent influer en fonction du modèle de boîte. Et autour du border, on a le margin. Le margin est également transparent et sera placé tout autour de la bordure. On pourrait avoir, entre le margin et le border, ce qu'on appelait le outline plus tôt, mais qui n'entre pas dans le modèle de boîte, donc il ne va pas influer, il sera rajouté par-dessus, il viendra se placer au-dessus de la marge, à cet endroit. Et vous voyez très bien que la marge qu'il peut y avoir entre la bordure extrême d'un élément et la bordure de son contenu, là où on écrit, va commencer en tenant compte de la marge, de l'épaisseur de la bordure, de l'épaisseur du padding, et on arrivera au contenu. Donc je vous propose maintenant d'explorer les éléments inline et les éléments de type block de manière indépendante.

L'essentiel des CSS

​Explorez et assimilez les outils de base des CSS pour en comprendre les interactions visuelles. Structurez et gérez ainsi l’apparence et le visuel de vos sites web.

5h09 (54 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :28 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !