Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel des CSS

Changer de mode d'affichage

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous pouvez intervenir sur la manière dont le navigateur va traiter les éléments. Il est alors possible, grâce à la propriété display, de modifier la nature inline ou bloc des éléments. Vous pouvez aussi leur affecter un autre mode d'affichage.
04:33

Transcription

De manière native, un certain nombre de balises html vont être considérées comme des types bloc. Par exemple les balises div et une certaine autre quantité de balises vont être considérées comme de type inline : les balises span. Le navigateur va les interpréter en tant que tel On voit bien que les blocs, les DIV sont placées l'une sur l'autre dans le flux et les inline sont placées l'une à la suite de l'autre dans le flux. Bien entendu ici on a font-size et un line-height de 50 pixels qui nous permet de rester sur des hauteurs de 50 pixels pour chacune. On va voir qu'avec les CSS, il nous est possible d'inverser cette nature, et donc on pourrait très bien dire que les balises de type DIV ici vont être en utilisant la propriété display, de type inline. Et donc, si on les prend de type inline, elles vont se comporter comme des balises de type inline. Et si on fait inversement, les balises span, on va dire qu 'elles sont dans un display de type bloc. Ici, on va pouvoir comme ça inverser leur nature et vous regardez, ici les balises de type bloc sont affichées de mode inline. Et les balises de type 'En ligne' sont basées comme des types de bloc. Donc, c'est complètement inversé. Si d'ailleurs, on rentre dans les balises span ici, maintenant puisque si on lui rajoute un margin-top de 50 pixels ce qui ne serait pas possible sur des balises de type inline, puisqu'on n'accepte pas les marges. Vous voyez bien là maintenant, la zone des marges de type 50 pixels comme si elles étaient en bloc. Et si on rajoute ça, ici, au niveau des balises DIV, ici, pareillement 'Ctrl+S', cela ne bouge pas parce que les balises inline n'ont pas la possibilité d'avoir des margin-top. Donc, ici on a complètement inversé la nature de ces balises. Donc je vais commenter ces 2 parties-là et je vous propose d'ouvrir une nouvelle approche, aussi, sur le mode d'affichage, c'est-à-dire que ici c'est bien, on a pu inverser leur nature et d'un coup, on perd certaines possibilités comme les margin-top, etc. Donc il existe une autre nature qui va être de dire : si je prends par exemple ici, les balises div et je vais leur dire que leur display va être, cette fois-ci, de type inline. Mais cette fois-ci, je vais dire inline-block ici et je vais faire exactement la même chose pour les balises span Ctrl+S, je vais placer. Et regardez : maintenant, tout est en ligne. Il n'y a pas de nature block ou quoi que ce soit, tout est en ligne. Et regardez, si j'agrandis ma page, on voit bien 'En Ligne 2' passer à la suite. Et si je rétrécis, 'En ligne 1' passe. Vous voyez on est vraiment dans une nature de type inline. D'accord donc c'est pas du block c'est du inline inline-block justement. Alors que va-t-il se passer ? Je vais laisser tout sur une ligne ici. Que va-t'il se passer si je mets une margin-top ici de 50 pixels à une Div ? Ctrl+S, j'actualise ma page ici. On a bien 50 pixels Vous allez dire que les autres ont pris 50 pixels aussi Ils n'ont pas vraiment pris 50 pixels. Regardez, si je rajoute un background-color à chacun, alors là, ce que je vais faire, je pourrais faire un section étoile durant toutes les balises qui sont à l'intérieur de la section. Je vais leur mettre un background-color ici. Regardez ! On voit bien que le background color est placé ici à ce niveau-là et tous ont pris 50 pixels. Mais parce que je suis dans une seule ligne, donc le margin-top que j'ai placé au bloc pousse également l'élément. Regardez, si maintenant je mets un margin-top de 100 pixels à notre élément ici. Regardez, tout le monde est poussé. En fait, ce qui se passe c'est que le margin-top que j'ai placé à cet élément-là, pousse la ligne. Alors pour mieux le capter regardez, on va changer le margin en padding. Et donc je vais reprendre également, ce padding je vais aller le placer ici, à cet élément-là. Ne travaillons pas avec margin mais avec padding. Regardez maintenant ici. Quand j'actualise, on voit bien qu'il a un padding de 100 pixels et lui un padding de 50 pixels. C'est la ligne de cet élément là qui pousse l'autre ligne puisqu'ils sont sur une seule ligne. Donc on ne pourrait pas avoir de ligne cassée. On a passé sur une propriété display:inline-block qui va nous permettre de placer tous nos éléments en ligne mais de leur préserver leur capacité de bloc, c'est-à-dire de pouvoir avoir des padding et des margin qui vont être respectés, qui vont être utilisés pour représenter ces éléments. Donc on vient de voir qu'il était possible de changer le mode d'affichage des éléments de types inline et les faire devenir des types bloc. Des éléments de type bloc les faire devenir inline. Ou alors quel que soit l'élément, qu'on soit inline ou bloc les faire transformer en inline-block pour qu'ils se comportent comme des éléments inline tout en acceptant les propriétés de type bloc.

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 !