Changement d'affichage
Différents type d'affichage
Il existe différents types d'affichage. Nous en avons déjà couvert 2, soit l'affichage en ligne et
l'affichage en bloc. 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 et leur hauteur est facilement manipulable.
inline-bloc
Combinaison de l'affichage en ligne et en bloc. C'est essentiellement un affichage en
ligne, mais dont nous pouvons y modifier facilement la hauteur, contrairement à
l'affichage en ligne traditionnel.
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 nouveau type d'affichage 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 nouveau type d'affichage très pratique pour organiser un
site Web sous la forme d'une grille. Nous verrons comment utiliser ce type d'affichage
plus tard.
Vous trouverez l'ensemble des types d'affichage sur w3school.
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 un menu de navigation en utilisant
l'affichage inline-bloc pour mieux contrôler la hauteur des éléments.
CSS
nav a {
Différents type d'affichage
Il existe différents types d'affichage. Nous en avons déjà couvert 2, soit l'affichage en ligne et
l'affichage en bloc. 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 et leur hauteur est facilement manipulable.
inline-bloc
Combinaison de l'affichage en ligne et en bloc. C'est essentiellement un affichage en
ligne, mais dont nous pouvons y modifier facilement la hauteur, contrairement à
l'affichage en ligne traditionnel.
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 nouveau type d'affichage 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 nouveau type d'affichage très pratique pour organiser un
site Web sous la forme d'une grille. Nous verrons comment utiliser ce type d'affichage
plus tard.
Vous trouverez l'ensemble des types d'affichage sur w3school.
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 un menu de navigation en utilisant
l'affichage inline-bloc pour mieux contrôler la hauteur des éléments.
CSS
nav a {
