Appliquer des styles de marge en CSS

Introduction

Dans ce laboratoire, les participants exploreront les bases de l'application de styles de marge en CSS par une approche pratique. Le laboratoire guide les apprentis dans la création d'un document HTML, la compréhension de la syntaxe de la propriété de marge et l'expérimentation de diverses techniques de marge. En travaillant étape par étape, les étudiants apprendront à manipuler l'espacement autour des éléments HTML à l'aide de styles en ligne et de propriétés de marge CSS.

Le laboratoire commence par l'établissement d'une structure de base de document HTML5, en introduisant trois éléments <div> qui serviront de toile de fond pour les démonstrations de style de marge. Les participants ajouteront progressivement des styles en ligne, exploreront différentes syntaxes de valeurs de marge et appliqueront des propriétés de marge individuelles pour gagner une expérience pratique dans le contrôle de l'espacement des éléments et la conception de la mise en page.

Créer un document HTML avec une structure de base

Dans cette étape, vous allez apprendre à créer un document HTML de base qui servira de base pour explorer les styles de marge CSS. HTML fournit la structure des pages web, et créer un document correctement formé est la première étape du développement web.

Ouvrez l'IDE Web et accédez au répertoire ~/projet. Créez un nouveau fichier appelé index.html en cliquant droit dans l'explorateur de fichiers et en sélectionnant "Nouveau fichier".

Voici une structure de base de document HTML5 que vous utiliserez pour ce laboratoire :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Margin Styles Lab</title>
  </head>
  <body>
    <div>Premier paragraphe</div>
    <div>Second paragraphe</div>
    <div>Troisième paragraphe</div>
  </body>
</html>

Analysons les composants clés de cette structure HTML :

<!DOCTYPE html> déclare que ceci est un document HTML5
<html> est l'élément racine de la page HTML
<head> contient des informations méta sur le document
<meta charset="UTF-8"> spécifie l'encodage des caractères
<meta name="viewport"> assure une présentation correcte sur différents appareils
<body> contient le contenu visible de la page

J'ai ajouté trois éléments <div> que nous utiliserons pour démontrer les styles de marge dans les étapes suivantes.

Enregistrez le fichier en appuyant sur Ctrl+S ou en utilisant l'icône d'enregistrement dans l'IDE Web.

Ajouter des styles en ligne à des éléments HTML

Dans cette étape, vous allez apprendre à ajouter des styles en ligne à des éléments HTML à l'aide de l'attribut style. Les styles en ligne vous permettent d'appliquer directement le CSS à des éléments HTML individuels, ce qui est un moyen rapide d'ajouter du style à votre page web.

Ouvrez le fichier index.html que vous avez créé dans l'étape précédente à l'aide de l'IDE Web. Modifiez les éléments <div> pour inclure des styles en ligne qui démontrent les propriétés de marge :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Margin Styles Lab</title>
  </head>
  <body>
    <div style="margin: 20px; background-color: lightblue;">
      Premier paragraphe
    </div>
    <div style="margin: 30px; background-color: lightgreen;">
      Second paragraphe
    </div>
    <div style="margin: 40px; background-color: lightsalmon;">
      Troisième paragraphe
    </div>
  </body>
</html>

Points clés sur les styles en ligne :

L'attribut style est ajouté directement à l'élément HTML
Les propriétés CSS sont écrites entre les guillemets
Plusieurs propriétés sont séparées par des points-virgules
Dans cet exemple, nous avons ajouté une propriété margin et une background-color pour rendre les marges plus visibles

Remarquez comment chaque <div> a maintenant une taille de marge et une couleur d'arrière-plan différentes. La propriété margin crée de l'espace autour de l'élément, repoussant les autres éléments.

Enregistrez le fichier en appuyant sur Ctrl+S ou en utilisant l'icône d'enregistrement dans l'IDE Web.

Explorer la syntaxe de la propriété de marge

Dans cette étape, vous approfondirez la syntaxe de la propriété de marge CSS et apprendrez les différentes manières de spécifier les marges. Ouvrez votre fichier index.html dans l'IDE Web et mettez à jour le pour démontrer diverses options de syntaxe de marge :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Margin Styles Lab</title>
    <style>
      .single-value {
        margin: 20px; /* Tous les côtés 20px */
        background-color: lightblue;
      }

      .two-values {
        margin: 10px 30px; /* Haut/Bas 10px, Gauche/Droite 30px */
        background-color: lightgreen;
      }

      .four-values {
        margin: 5px 10px 15px 20px; /* Haut, Droite, Bas, Gauche */
        background-color: lightsalmon;
      }
    </style>
  </head>
  <body>
    <div class="single-value">Marge à valeur unique</div>
    <div class="two-values">Marge à deux valeurs</div>
    <div class="four-values">Marge à quatre valeurs</div>
  </body>
</html>

Explication de la syntaxe de la marge :

Valeur unique : margin: 20px;
- Applique une marge de 20px à tous les quatre côtés (haut, droit, bas, gauche)
Deux valeurs : margin: 10px 30px;
- La première valeur (10px) définit les marges haut et bas
- La deuxième valeur (30px) définit les marges gauche et droite
Quatre valeurs : margin: 5px 10px 15px 20px;
- Première valeur (5px) : Marge supérieure
- Deuxième valeur (10px) : Marge droite
- Troisième valeur (15px) : Marge inférieure
- Quatrième valeur (20px) : Marge gauche

Remarque : Nous avons passé à l'utilisation d'une balise <style> interne pour démontrer différentes syntaxes de marge, qui est plus flexible que les styles en ligne.

Enregistrez le fichier en appuyant sur Ctrl+S ou en utilisant l'icône d'enregistrement dans l'IDE Web.

Appliquer différentes valeurs de marge

Dans cette étape, vous allez explorer comment différentes valeurs de marge peuvent créer divers effets d'espacement dans la conception web. Ouvrez votre fichier index.html dans l'IDE Web et mettez à jour les styles pour démontrer les valeurs de marge en utilisant des pixels, des pourcentages et d'autres unités :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Margin Styles Lab</title>
    <style>
      .pixel-margin {
        margin: 20px; /* Marge en pixels fixe */
        background-color: lightblue;
        border: 1px solid blue;
      }

      .percentage-margin {
        margin: 5%; /* Marge basée sur le pourcentage */
        background-color: lightgreen;
        border: 1px solid green;
      }

      .mixed-margin {
        margin: 10px 5%; /* Mixte de pixels et de pourcentages */
        background-color: lightsalmon;
        border: 1px solid red;
      }

      .container {
        width: 80%;
        margin: 0 auto; /* Centrer le conteneur */
        background-color: #f0f0f0;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="pixel-margin">Marge en pixels (20px)</div>
      <div class="percentage-margin">Marge en pourcentage (5%)</div>
      <div class="mixed-margin">
        Marge mixte (10px haut/bas, 5% gauche/droite)
      </div>
    </div>
  </body>
</html>

Types de valeurs de marge expliqués :

Marges en pixels (20px) :
- Espacement fixe et exact
- Cohérent sur différentes tailles d'écran
- Bon pour le contrôle précis de la mise en page
Marges en pourcentage (5%) :
- Relative à la largeur du conteneur parent
- Responsive et adaptable à différentes tailles d'écran
- Change avec la largeur du conteneur
Marges mixtes (10px 5%) :
- Combiner des unités fixes et relatives
- Marges haut/bas en pixels
- Marges gauche/droite en pourcentages
Centrage avec des marges (margin: 0 auto) :
- 0 pour les marges haut/bas
- auto pour les marges gauche/droite
- Centre horizontalement les éléments de niveau bloc

Enregistrez le fichier en appuyant sur Ctrl+S ou en utilisant l'icône d'enregistrement dans l'IDE Web.

Expérimenter avec les propriétés de marge individuelles

Dans cette étape, vous allez explorer les propriétés de marge individuelles qui permettent un contrôle précis de l'espacement pour chaque côté d'un élément. Ouvrez votre fichier index.html dans l'IDE Web et mettez à jour les styles pour démontrer les propriétés de marge individuelles :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Individual Margin Properties</title>
    <style>
      .box {
        width: 200px;
        background-color: lightblue;
        border: 2px solid blue;
        margin-top: 20px; /* Marge supérieure */
        margin-right: 30px; /* Marge droite */
        margin-bottom: 40px; /* Marge inférieure */
        margin-left: 50px; /* Marge gauche */
        padding: 10px;
      }

      .individual-margins {
        display: flex;
        justify-content: space-between;
      }

      .margin-example {
        width: 100px;
        height: 100px;
        background-color: lightgreen;
        margin-top: 10px;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div class="individual-margins">
      <div class="box">Marge sur tous les côtés</div>
      <div class="margin-example">Marges verticales</div>
    </div>
  </body>
</html>

Propriétés de marge individuelles expliquées :

margin-top : Contrôle la marge supérieure
- Fixe un espace de 20px au-dessus de l'élément
margin-right : Contrôle la marge droite
- Fixe un espace de 30px à droite de l'élément
margin-bottom : Contrôle la marge inférieure
- Fixe un espace de 40px en dessous de l'élément
margin-left : Contrôle la marge gauche
- Fixe un espace de 50px à gauche de l'élément

Observations clés :

Chaque côté peut avoir une valeur de marge différente
Utile pour le contrôle précis de la mise en page
Permet d'ajuster finement l'espacement entre les éléments
Peut être combiné avec d'autres propriétés CSS

Astuce : Les propriétés de marge individuelles offrent un contrôle plus granulaire par rapport à la propriété raccourcie margin, vous permettant d'ajuster les côtés spécifiques indépendamment.

Enregistrez le fichier en appuyant sur Ctrl+S ou en utilisant l'icône d'enregistrement dans l'IDE Web.

Sommaire

Dans ce laboratoire, les participants apprennent les bases de l'application de styles de marge CSS en créant un document HTML et en explorant diverses techniques de style. Le laboratoire commence par la construction d'une structure HTML5 de base, en introduisant des éléments essentiels tels que <!DOCTYPE html>, <head> et <body>, et en créant trois éléments <div> pour démontrer les propriétés de marge.

Le processus d'apprentissage se poursuit avec l'ajout de styles en ligne directement aux éléments HTML à l'aide de l'attribut style, ce qui fournit une approche pratique pour comprendre comment les marges peuvent être appliquées pour contrôler l'espacement autour des éléments. Les participants expérimenteront avec différentes syntaxes de marge, exploreront les propriétés de marge individuelles et appliqueront diverses valeurs de marge pour gagner de l'expérience pratique dans les techniques de style CSS.