Styler les éléments web avec des bordures et du rembourrage en CSS

Introduction

Dans ce laboratoire, vous allez apprendre à styliser les éléments web à l'aide de bordures et de rembourrage CSS, en mettant l'accent sur l'amélioration de la présentation visuelle des éléments HTML. Le laboratoire fournit un guide étape par étape pour créer un document HTML et appliquer diverses techniques de bordure et de rembourrage pour améliorer la conception et la mise en page du contenu web.

Par des exercices pratiques, vous allez explorer la manière d'ajouter des styles de bordure aux paragraphes, de personnaliser les propriétés de bordure, d'appliquer du rembourrage et d'expérimenter avec différentes combinaisons de ces techniques de style CSS. À la fin du laboratoire, vous aurez acquis une expérience pratique dans l'utilisation de CSS pour créer des éléments web plus attrayants visuellement et structurés.

Créer un document HTML

Dans cette étape, vous allez apprendre à créer un document HTML qui servira de base pour la mise en forme avec les bordures et le rembourrage CSS. HTML fournit la structure du contenu web, et nous allons commencer par configurer un document de base.

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

Voici une structure de base de document HTML5 que vous utiliserez :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Border and Padding Example</title>
    <style>
      /* CSS styles will be added here in later steps */
    </style>
  </head>
  <body>
    <p>Welcome to CSS Styling!</p>
  </body>
</html>

Analysons les composants clés :

<!DOCTYPE html> déclare que ceci est un document HTML5
<html lang="en"> est l'élément racine avec la spécification de la langue
<head> contient les métadonnées du document
<meta charset="UTF-8"> assure une encodage de caractères correct
<title> définit le titre de la page affiché dans l'onglet du navigateur
La balise <style> est là où nous ajouterons notre CSS dans les étapes suivantes
<body> contient le contenu visible de la page

Copiez ce code dans le fichier styles.html de l'IDE Web. Enregistrez le fichier en appuyant sur Ctrl+S ou en utilisant l'icône d'enregistrement.

Sortie exemple :
Lorsque vous ouvrez ce fichier dans un navigateur web, vous verrez un simple paragraphe qui dit "Welcome to CSS Styling!" Ceci sera notre point de départ pour ajouter des bordures et du rembourrage dans les étapes suivantes.

Ajouter des styles de bordure à un paragraphe

Dans cette étape, vous allez apprendre à ajouter des styles de bordure à un paragraphe à l'aide de CSS. Les bordures sont un moyen fondamental de définir et de séparer visuellement les éléments sur une page web.

Ouvrez le fichier styles.html que vous avez créé dans l'étape précédente. À l'intérieur de la balise <style>, ajoutez le CSS suivant pour créer une bordure pour le paragraphe :

<style>
  p {
    border: 2px solid blue;
  }
</style>

Analysons la propriété de bordure :

border est une propriété raccourcie qui combine trois sous-propriétés
2px définit la largeur de la bordure à 2 pixels
solid définit un style de ligne continue et ininterrompue
blue spécifie la couleur de la bordure

Sortie exemple :
Lorsque vous ouvrez ce fichier HTML dans un navigateur web, vous verrez le paragraphe entouré d'une bordure bleue solide de 2 pixels de large. Cela montre à quel point il est facile d'ajouter une définition visuelle aux éléments HTML à l'aide de CSS.

Pour vous aider à comprendre, voici une représentation visuelle de ce que fait la bordure :

+-------------------+
|                   |
| Welcome to CSS    |
| Styling!          |
|                   |
+-------------------+

La bordure crée une limite claire autour du paragraphe, le faisant ressortir du reste du contenu de la page.

Personnaliser les propriétés de bordure

Dans cette étape, vous allez explorer des techniques de personnalisation de bordure plus avancées en CSS. Nous allons modifier les propriétés de bordure individuelles pour créer des designs plus complexes et intéressants.

Mettez à jour la section <style> de votre fichier styles.html avec le CSS suivant :

<style>
  p {
    border-width: 4px;
    border-style: dashed;
    border-color: green;
    border-radius: 10px;
  }
</style>

Analysons les nouvelles propriétés de bordure :

border-width : Définit l'épaisseur de la bordure à 4 pixels
border-style : Change la bordure de solide à pointillé
border-color : Change la couleur de la bordure en vert
border-radius : Ajoute des coins arrondis avec une courbure de 10 pixels

Vous pouvez également utiliser la propriété raccourcie border avec toutes les valeurs :

p {
  border: 4px dashed green;
}

Sortie exemple :
Lorsque vous ouvrez le fichier HTML, vous verrez un paragraphe avec :

Une bordure d'épaisseur 4 pixels
Un style de ligne pointillée
Une couleur verte
Des coins arrondis

Pour démontrer une plus grande flexibilité, essayez ces variations supplémentaires :

p {
  /* Différents styles de bordure */
  border-top: 3px dotted red;
  border-bottom: 3px double blue;
  border-left: 3px groove purple;
  border-right: 3px ridge orange;
}

Appliquer du rembourrage à un paragraphe

Dans cette étape, vous allez apprendre à propos du rembourrage, une propriété CSS qui crée de l'espace entre le contenu d'un élément et sa bordure. Le rembourrage aide à améliorer la lisibilité et l'espacement visuel des éléments.

Mettez à jour la section <style> de votre fichier styles.html avec le CSS suivant :

<style>
  p {
    border: 4px dashed green;
    border-radius: 10px;
    padding: 20px;
  }
</style>

Explorons différentes façons d'appliquer du rembourrage :

Rembourrage uniforme (tous les côtés) :

padding: 20px; /* 20px de rembourrage sur tous les côtés */

Rembourrage individuel par côté :

padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;

Raccourci avec des valeurs différentes :

padding: 10px 20px 15px 25px;
/* Haut : 10px, Droite : 20px, Bas : 15px, Gauche : 25px */

Rembourrage horizontal et vertical :

padding: 15px 30px;
/* Haut/Bas : 15px, Gauche/Droite : 30px */

Sortie exemple :
Lorsque vous ouvrez le fichier HTML, vous verrez le paragraphe avec :

Une bordure pointillée verte
Des coins arrondis
20 pixels de rembourrage sur tous les côtés, créant de l'espace entre le texte et la bordure

Visualisation du rembourrage :

+---------------------------+
|                           |
|    [20px de rembourrage]   |
|    Welcome to CSS         |
|    Styling!               |
|    [20px de rembourrage]   |
|                           |
+---------------------------+

Expérimenter avec les combinaisons de bordures et de rembourrages

Dans cette dernière étape, vous allez explorer des façons créatives de combiner les propriétés de bordure et de rembourrage pour créer des designs visuellement intéressants. Nous allons ajouter plusieurs paragraphes pour démontrer différentes techniques de mise en forme.

Mettez à jour votre fichier styles.html avec le HTML et le CSS suivants :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Border and Padding Combinations</title>
    <style>
      .box1 {
        border: 3px solid purple;
        padding: 15px;
        border-radius: 10px;
        margin-bottom: 10px;
      }

      .box2 {
        border: 2px dashed orange;
        padding: 10px 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
      }

      .box3 {
        border: 4px double green;
        padding: 25px;
        border-radius: 5px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <p>First paragraph with purple solid border and 15px padding</p>
    </div>
    <div class="box2">
      <p>Second paragraph with orange dashed border and asymmetric radius</p>
    </div>
    <div class="box3">
      <p>Third paragraph with green double border and centered text</p>
    </div>
  </body>
</html>

Techniques clés démontrées :

Différents styles de bordure (solide, pointillé, double)
Configurations de rembourrage variées
Rayon de bordure asymétrique
Marge pour l'espacement entre les éléments
Alignement du texte à l'intérieur des éléments avec rembourrage

Sortie exemple :
Lorsque vous ouvrez le fichier HTML, vous verrez trois paragraphes avec des combinaisons uniques de bordure et de rembourrage :

Bordure solide violette avec rembourrage uniforme
Bordure pointillée orange avec coins arrondis asymétriques
Bordure double verte avec rembourrage supplémentaire et texte centré

Visualisation des combinaisons :

+--- Box 1 ---+   +--- Box 2 ---+   +--- Box 3 ---+
|  Purple     |   |  Orange     |   |  Green      |
|  Solid      |   |  Dashed     |   |  Double     |
|  Border     |   |  Border     |   |  Border     |
+-------------+   +-------------+   +-------------+

Sommaire

Dans ce laboratoire, les participants ont appris à styliser les éléments web à l'aide de bordures et de rembourrages CSS. Le laboratoire a commencé par la création d'une structure de document HTML5 de base, démontrant le paramétrage fondamental pour la mise en forme des pages web. Les participants ont exploré l'ajout de styles de bordure à des paragraphes, y compris la personnalisation des propriétés de bordure telles que la largeur, la couleur et le style.

Le laboratoire a guidé les apprenants à travers des techniques CSS pratiques, y compris l'application de bordures solides, l'expérimentation avec différentes configurations de bordure et la compréhension de la manière dont le rembourrage peut modifier l'espacement et l'apparence des éléments. En travaillant sur des exemples pratiques, les participants ont acquis des compétences pratiques dans l'utilisation de CSS pour améliorer la présentation visuelle des éléments de page web, apprenant à créer des designs web plus attrayants et structurés.