Accueil Formations Apprendre CSS 3

Comprendre et Utiliser la Propriété CSS Display

Retour à la formation
Chapitre 26 Leçon 2
Précédent
Suivant

Cette leçon explique comment utiliser la propriété CSS display pour contrôler la nature des éléments HTML sur une page web, y compris les éléments block et inline.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous explorerons la propriété CSS display, essentielle pour définir la nature des éléments HTML. Par défaut, les éléments block sont en display: block, occupant toute la largeur disponible, et les éléments inline sont en display: inline, s'adaptant à leur contenu. Vous apprendrez comment changer ces propriétés pour gérer l'affichage des éléments, par exemple en utilisant display: none pour masquer des éléments ou display: block pour transformer des éléments inline en éléments block.

Nous examinerons également comment cette propriété peut affecter la disposition de la page, en modifiant la largeur et l'alignement des éléments. Par exemple, transformer des liens de navigation inline en block pour qu'ils se placent les uns sous les autres et occupent toute la largeur disponible.

Cette compréhension détaillée de la propriété display vous permettra de créer des mises en page web plus flexibles et dynamiques.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de:

  • Comprendre les différences entre les éléments block et inline.
  • Apprendre à utiliser la propriété CSS display pour manipuler la présentation des éléments HTML.
  • Découvrir comment cacher des éléments en utilisant display: none.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir des connaissances de base en HTML et CSS.

Métiers concernés

Les compétences abordées ici sont utiles pour les métiers suivants:

  • Développeur web
  • Intégrateur web
  • Designer UI/UX

Alternatives et ressources

Il existe d'autres moyens de contrôler l'affichage des éléments, comme les propriétés visibility, position, et l'utilisation des frameworks CSS comme Bootstrap ou Tailwind.

Questions & Réponses

Un élément block occupe toute la largeur disponible et commence toujours sur une nouvelle ligne, tandis qu'un élément inline occupe uniquement la largeur nécessaire à son contenu.
On peut cacher un élément HTML en utilisant la propriété CSS display avec la valeur none.
L'application de 'display: block' sur un élément inline le transforme en élément block, le faisant occuper toute la largeur disponible et forçant un retour à la ligne après lui.