CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML5 et CSS3 / Part 2 - Tuto CSS3: Les Feuilles de Style

Maîtriser les Propriétés d'Affichage en CSS

Retour à la formation
Chapitre 3 Leçon 14
Précédent
Suivant

Cette leçon explore les propriétés d'affichage CSS visibility et display, illustrant comment elles affectent la présentation et le positionnement des éléments sur une page web.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous examinons les propriétés d'affichage en CSS, notamment les propriétés visibility et display. La propriété visibility peut rendre un élément visible ou hidden, tandis que la propriété display peut enlever un élément de la mise en page avec display: none. Nous avons également exploré comment transformer le comportement des éléments block et inline via display: inline-block, permettant une flexibilité accrue dans la mise en forme des menus et des layouts.

Nous avons démontré comment display: inline aligne les éléments li horizontalement et comment vertical-align: top permet un alignement parfait sur la ligne de base. Cette leçon est essentielle pour maîtriser la gestion de l'affichage des éléments HTML afin d'améliorer l'expérience utilisateur et le design web.

Objectifs de cette leçon

Les objectifs de cette vidéo sont d'apprendre :

  • À utiliser les propriétés visibility et display
  • À comprendre les différences entre display: block, display: inline, et display: inline-block
  • À implémenter des menus en ligne avec CSS

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé de connaître les bases du HTML et du CSS. Avoir une compréhension de la structure d'un document HTML et des sélecteurs CSS de base sera utile.

Métiers concernés

La maîtrise des propriétés visibility et display est cruciale pour les développeurs front-end, les designer web et tous les professionnels impliqués dans la création de sites web.

Alternatives et ressources

Des alternatives pour gérer l'affichage des éléments incluent l'utilisation de Flexbox et Grid Layout en CSS, qui offrent des moyens plus avancés et flexibles pour la mise en page.

Questions & Réponses

La propriété visibility cache un élément sans le retirer du flux du document, tandis que display: none cache également l'élément mais le retire du flux du document.
Les valeurs de la propriété display incluent notamment block, inline, none, et inline-block, chacune modifiant différemment le comportement des éléments.
Display: inline-block permet de combiner les propriétés de block et d'inline, permettant d'appliquer des dimensions tout en gardant les éléments alignés horizontalement.