LabEx
Se connecterInscription gratuite

Explorer les propriétés d'affichage en CSS

CSSCSSBeginner
Pratiquer maintenant

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

Introduction

Dans ce laboratoire, les étudiants exploreront les propriétés d'affichage CSS fondamentales qui contrôlent la disposition et la visibilité des éléments web. Par une série d'exercices pratiques, les participants apprendront à manipuler les propriétés d'affichage block, inline, inline-block et none, acquérant des compétences pratiques dans la structuration et la gestion des dispositions de pages web. Le laboratoire couvre des concepts clés tels que la compréhension de la manière dont différentes propriétés d'affichage affectent le positionnement des éléments, la création de menus de navigation et la commande de la visibilité des éléments, offrant une introduction complète aux techniques de mise en page CSS.

En travaillant sur des exemples pratiques et des démonstrations de code, les apprenants développeront une compréhension solide de la manière dont les propriétés d'affichage influencent la conception web, leur permettant de créer des dispositions de pages web plus flexibles et réactives. L'approche étape par étape permet aux étudiants de construire progressivement leurs connaissances, en commençant par les caractéristiques de base des éléments de niveau bloc jusqu'à des implémentations de propriétés d'affichage plus avancées.

Comprendre la propriété d'affichage block

Dans cette étape, vous allez apprendre à connaître la propriété d'affichage block en CSS, qui est un concept fondamental pour contrôler la disposition des éléments web. Par défaut, de nombreux éléments HTML ont une propriété d'affichage de niveau bloc.

Tout d'abord, créons un fichier HTML pour démontrer les propriétés d'affichage block. Ouvrez le WebIDE et créez un nouveau fichier nommé block-display.html dans le répertoire ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Block Display Property</title>
    <style>
      .block-element {
        display: block;
        background-color: lightblue;
        padding: 10px;
        margin: 10px 0;
        border: 2px solid blue;
      }
    </style>
  </head>
  <body>
    <div class="block-element">This is a block-level div element</div>
    <div class="block-element">Another block-level div element</div>
    <p class="block-element">This is a block-level paragraph</p>
  </body>
</html>

Caractéristiques clés des éléments de niveau bloc :

  • Ils commencent toujours sur une nouvelle ligne
  • Ils occupent toute la largeur disponible par défaut
  • Ils peuvent avoir des propriétés de largeur, de hauteur, de marge et de remplissage appliquées
  • Les éléments block s'empilent verticalement les uns après les autres

Vérifions le contenu du fichier :

cat ~/project/block-display.html

Sortie d'exemple :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Block Display Property</title>
    <style>
       .block-element {
            display: block;
            background-color: lightblue;
            padding: 10px;
            margin: 10px 0;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div class="block-element">This is a block-level div element</div>
    <div class="block-element">Another block-level div element</div>
    <p class="block-element">This is a block-level paragraph</p>
</body>
</html>

Les éléments de niveau bloc courants incluent :

  • <div>
  • <p>
  • <h1> à <h6>
  • <section>
  • <article>
  • <ul> et <ol>

Appliquer la propriété d'affichage inline

Dans cette étape, vous allez apprendre à connaître la propriété d'affichage inline en CSS, qui permet aux éléments de s'écouler horizontalement et de n'occuper que la largeur nécessaire.

Créons un fichier HTML pour démontrer les propriétés d'affichage inline. Ouvrez le WebIDE et créez un nouveau fichier nommé inline-display.html dans le répertoire ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Inline Display Property</title>
    <style>
      .inline-element {
        display: inline;
        background-color: lightgreen;
        padding: 5px;
        margin: 5px;
        border: 2px solid green;
      }
    </style>
  </head>
  <body>
    <span class="inline-element">First inline element</span>
    <span class="inline-element">Second inline element</span>
    <a href="#" class="inline-element">Inline link</a>
  </body>
</html>

Caractéristiques clés des éléments inline :

  • Ils s'écoulent horizontalement sur la même ligne
  • Ils n'occupent que la largeur nécessaire
  • Les propriétés de largeur et de hauteur ne fonctionnent pas
  • Les rembourrages et les marges verticales ont un effet limité
  • On ne peut pas définir directement la largeur et la hauteur

Vérifions le contenu du fichier :

cat ~/project/inline-display.html

Sortie d'exemple :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline Display Property</title>
    <style>
      .inline-element {
            display: inline;
            background-color: lightgreen;
            padding: 5px;
            margin: 5px;
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <span class="inline-element">First inline element</span>
    <span class="inline-element">Second inline element</span>
    <a href="#" class="inline-element">Inline link</a>
</body>
</html>

Les éléments inline courants incluent :

  • <span>
  • <a>
  • <strong>
  • <em>
  • <img>

Implémenter la propriété d'affichage inline-block

Dans cette étape, vous allez apprendre à connaître la propriété d'affichage inline-block en CSS, qui combine les meilleures caractéristiques des éléments inline et de niveau bloc.

Créons un fichier HTML pour démontrer les propriétés d'affichage inline-block. Ouvrez le WebIDE et créez un nouveau fichier nommé inline-block-display.html dans le répertoire ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Inline-Block Display Property</title>
    <style>
      .inline-block-element {
        display: inline-block;
        background-color: lightsalmon;
        padding: 10px;
        margin: 10px;
        border: 2px solid red;
        width: 150px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="inline-block-element">First inline-block element</div>
    <div class="inline-block-element">Second inline-block element</div>
    <div class="inline-block-element">Third inline-block element</div>
  </body>
</html>

Caractéristiques clés des éléments inline-block :

  • S'écoulent horizontalement comme les éléments inline
  • Peuvent avoir une largeur, une hauteur, un remplissage et des marges comme les éléments de niveau bloc
  • Permettent un contrôle précis de la dimensionnement et de l'espacement des éléments
  • Utile pour créer des mises en page horizontales comme des menus de navigation ou des galeries d'images

Vérifions le contenu du fichier :

cat ~/project/inline-block-display.html

Sortie d'exemple :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline-Block Display Property</title>
    <style>
     .inline-block-element {
            display: inline-block;
            background-color: lightsalmon;
            padding: 10px;
            margin: 10px;
            border: 2px solid red;
            width: 150px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="inline-block-element">First inline-block element</div>
    <div class="inline-block-element">Second inline-block element</div>
    <div class="inline-block-element">Third inline-block element</div>
</body>
</html>

Utilisations courantes de l'élément inline-block :

  • Création de menus de navigation horizontaux
  • Conception de galeries d'images
  • Alignement d'éléments côte à côte avec un contrôle précis

Utiliser la propriété d'affichage none pour cacher un élément

Dans cette étape, vous allez apprendre à connaître la propriété display: none en CSS, qui supprime complètement un élément du layout de la page, le rendant invisible et ne prenant pas d'espace.

Créons un fichier HTML pour démontrer la propriété d'affichage none. Ouvrez le WebIDE et créez un nouveau fichier nommé none-display.html dans le répertoire ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>None Display Property</title>
    <style>
      .visible-element {
        background-color: lightblue;
        padding: 10px;
        margin: 10px;
      }

      .hidden-element {
        display: none;
        background-color: lightgray;
        padding: 10px;
        margin: 10px;
      }

      .toggle-button {
        padding: 5px 10px;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <div class="visible-element">This element is always visible</div>
    <div id="hiddenDiv" class="hidden-element">This element is hidden</div>
    <button class="toggle-button" onclick="toggleElement()">
      Toggle Hidden Element
    </button>

    <script>
      function toggleElement() {
        var hiddenDiv = document.getElementById("hiddenDiv");
        if (hiddenDiv.style.display === "none") {
          hiddenDiv.style.display = "block";
        } else {
          hiddenDiv.style.display = "none";
        }
      }
    </script>
  </body>
</html>

Caractéristiques clés de display: none :

  • Supprime complètement l'élément du layout de la page
  • L'élément ne prend pas d'espace
  • Différent de visibility: hidden (qui conserve l'espace mais rend l'élément invisible)
  • Utile pour cacher dynamiquement du contenu et pour la conception responsive

Vérifions le contenu du fichier :

cat ~/project/none-display.html

Sortie d'exemple :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>None Display Property</title>
    <style>
       .visible-element {
            background-color: lightblue;
            padding: 10px;
            margin: 10px;
        }

       .hidden-element {
            display: none;
            background-color: lightgray;
            padding: 10px;
            margin: 10px;
        }

       .toggle-button {
            padding: 5px 10px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="visible-element">This element is always visible</div>
    <div id="hiddenDiv" class="hidden-element">This element is hidden</div>
    <button class="toggle-button" onclick="toggleElement()">Toggle Hidden Element</button>

    <script>
        function toggleElement() {
            var hiddenDiv = document.getElementById('hiddenDiv');
            if (hiddenDiv.style.display === 'none') {
                hiddenDiv.style.display = 'block';
            } else {
                hiddenDiv.style.display = 'none';
            }
        }
    </script>
</body>
</html>

Utilisations courantes de display: none :

  • Cacher des éléments conditionnellement
  • Créer des menus responsive
  • Gérer la visibilité du contenu dynamique
  • Implémenter des interfaces de bascule et de menu déroulant

Dans cette étape, vous allez créer un menu de navigation horizontal en utilisant les propriétés d'affichage apprises dans les étapes précédentes. Cet exemple pratique démontrera comment utiliser l'affichage inline-block pour créer un layout de navigation responsive et propre.

Créons un fichier HTML avec un menu de navigation. Ouvrez le WebIDE et créez un nouveau fichier nommé navigation-menu.html dans le répertoire ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Navigation Menu</title>
    <style>
      .nav-menu {
        background-color: #333;
        padding: 10px;
      }

      .nav-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      .nav-menu li {
        display: inline-block;
        margin-right: 20px;
      }

      .nav-menu a {
        text-decoration: none;
        color: white;
        font-family: Arial, sans-serif;
        transition: color 0.3s ease;
      }

      .nav-menu a:hover {
        color: #ffd700;
      }
    </style>
  </head>
  <body>
    <nav class="nav-menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </body>
</html>

Techniques clés utilisées dans ce menu de navigation :

  • display: inline-block pour les éléments du menu
  • Suppression du style de liste par défaut
  • Ajout d'effets au survol
  • Création d'un layout horizontal

Vérifions le contenu du fichier :

cat ~/project/navigation-menu.html

Sortie d'exemple :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigation Menu</title>
    <style>
       .nav-menu {
            background-color: #333;
            padding: 10px;
        }

       .nav-menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

       .nav-menu li {
            display: inline-block;
            margin-right: 20px;
        }

       .nav-menu a {
            text-decoration: none;
            color: white;
            font-family: Arial, sans-serif;
            transition: color 0.3s ease;
        }

       .nav-menu a:hover {
            color: #ffd700;
        }
    </style>
</head>
<body>
    <nav class="nav-menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

Meilleures pratiques pour les menus de navigation :

  • Utiliser des balises HTML5 sémantiques comme <nav>
  • Garder la structure du menu simple
  • Vérifier une bonne lisibilité et accessibilité
  • Ajouter des états au survol et en cours d'utilisation pour une meilleure interaction utilisateur

Récapitulatif

Dans ce laboratoire, les participants ont exploré les propriétés d'affichage en CSS, en se concentrant sur la compréhension de la manière dont différentes valeurs d'affichage affectent la mise en page de la page web et le comportement des éléments. Le laboratoire a commencé par l'examen de la propriété d'affichage bloc, en démontrant la manière dont les éléments de niveau bloc occupent toute la largeur, commencent sur de nouvelles lignes et peuvent être stylisés avec des marges, des rembourrages et des bordures. Les participants ont appris à connaître les éléments de niveau bloc courants tels que <div>, <p> et les balises de titre, et la manière dont ils s'empilent naturellement verticalement dans un document.

Les étapes suivantes ont guidé les apprenants dans l'application des propriétés d'affichage inline, inline-block et none, en leur fournissant des aperçus pratiques sur la commande du rendu et de la visibilité des éléments. En créant des exemples pratiques et en expérimentant avec les styles CSS, les participants ont acquis une expérience pratique dans la manipulation des caractéristiques d'affichage des éléments, comprenant finalement comment créer des mises en page de page web plus flexibles et réactives en utilisant les propriétés d'affichage CSS.

Connexe CSS Cours
Démarrage rapide avec CSS

Démarrage rapide avec CSS

CSS
Débutant
Construire une application web Tic-Tac-Toe

Construire une application web Tic-Tac-Toe

HTMLCSSJavaScript
Débutant
Création d'un jeu web de Tapez - le - taupe

Création d'un jeu web de Tapez - le - taupe

HTMLCSSJavaScript
Débutant