Mode d'affichage

Types d'affichage

Il existe différents types d'affichage en HTML et CSS. Nous en avons déjà couvert 2, soit l'affichage en ligne et l'affichage en bloc, qui sont généralement les 2 types d'affichage par défaut du HTML. Il existe toutefois de nombreux autres types d'affichage et CSS nous permettra de les manipuler facilement.

Voici une courte liste des types d'affichage que vous utiliserez dans ce cours:

inline

L'affichage en ligne. Les éléments utilisant cet affichage suive le flux du texte dans la page Web.

block

L'affichage en bloc. Les éléments utilisant cet affichage prennent par défaut tout l'espace en largeur.

none

L'affichage vide. Ce type d'affiche indique que l'élément ne doit pas être visible. On l'utilise beaucoup avec de l'intéraction, comme pour cacher des menus si nous cliquons sur un bouton.

flex

L'affichage flexible en boîte. C'est un type d'affichage plus récent et très pratique pour les sites web qui s'affiche bien sur ordinateur ou sur mobile. Nous verrons comment utiliser ce type d'affichage plus tard.

grid

L'affichage en grille. C'est un type d'affichage plus récent très pratique pour organiser un site Web sous la forme d'une grille. Nous ne verrons pas comment utiliser ce type d'affichage dans le cours puisqu'il est très complexe, mais il est il vaut la peine d'être appris.

Propriété CSS

Si vous voulez changer le type d'affichage d'un élément, vous utiliserez la propriété CSS display. Vous pouvez ensuite mettre l'un des type d'affichage ci-dessus comme valeur. Dans l'exemple suivant, nous stylons une image pour changer son affichage en bloc, ce qui ne l'alignera plus avec le texte puisque son affichage ne sera plus en ligne.