Définir des couleurs de bord en CSS

Introduction

Dans ce laboratoire, vous allez apprendre à définir et à manipuler les couleurs de bord à l'aide de CSS, en explorant diverses techniques pour styliser les éléments HTML. Le laboratoire vous guide tout au long de la création d'un fichier HTML, de l'application de styles de bord en ligne, de la définition de couleurs de bord individuelles et de l'expérimentation avec différentes variations de couleurs sur plusieurs éléments. En suivant les instructions étape par étape, vous acquerrez des compétences pratiques dans l'utilisation de CSS pour améliorer l'apparence visuelle des composants de page web grâce au style de bord.

Le laboratoire propose une approche pratique pour comprendre les propriétés de couleur de bord, en commençant par une structure HTML de base et en ajoutant progressivement des techniques de style plus complexes. Vous découvrirez comment appliquer directement des couleurs de bord aux éléments, personnaliser les côtés de bord individuels et créer des designs visuellement intéressants en utilisant différentes approches de couleur.

Créer un fichier HTML et une structure de base

Dans cette étape, vous allez apprendre à créer un fichier HTML de base qui servira de base pour explorer les couleurs de bord CSS. Nous utiliserons l'IDE Web pour créer et configurer notre structure HTML initiale.

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

Voici la structure HTML de base que vous allez créer :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Exemple de couleurs de bord CSS</title>
  </head>
  <body>
    <div class="container">
      <h1>Exploration des couleurs de bord CSS</h1>
      <p>Ceci est notre premier élément HTML à styliser avec des bordures.</p>
    </div>
  </body>
</html>

Analysons les composants clés de cette structure HTML :

<!DOCTYPE html> déclare que ceci est un document HTML5
La balise <html> est l'élément racine de la page HTML
<head> contient des informations méta sur le document
<body> contient le contenu visible de la page
Nous avons ajouté un conteneur <div> avec un titre et un paragraphe pour fournir des éléments que nous allons styliser dans les étapes suivantes

Après avoir créé le fichier, enregistrez-le en appuyant sur Ctrl+S ou en utilisant l'icône d'enregistrement dans l'IDE Web.

Exemple de sortie lors de la visualisation du contenu du fichier :

$ cat ~/projet/index.html
<!DOCTYPE html>
html lang="en">
...

Cette structure HTML simple fournit la base pour notre exploration des couleurs de bord CSS dans les étapes suivantes.

Ajouter un style de bord en ligne

Dans cette étape, vous allez apprendre à ajouter des styles de bord en ligne directement aux éléments HTML à l'aide de l'attribut style. Les styles en ligne sont un moyen rapide d'appliquer directement les propriétés CSS à des éléments individuels.

Ouvrez le fichier index.html dans l'IDE Web que vous avez créé dans l'étape précédente. Modifiez le HTML pour inclure des styles de bord en ligne pour différents éléments :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Exemple de couleurs de bord CSS</title>
  </head>
  <body>
    <div class="container">
      <h1 style="border: 2px solid black;">
        Exploration des couleurs de bord CSS
      </h1>
      <p style="border: 3px dotted blue;">
        Ceci est notre premier élément HTML avec un style de bord en ligne.
      </p>
      <div style="border: 4px dashed red; padding: 10px;">
        Ce div a un style de bord différent et une largeur différente.
      </div>
    </div>
  </body>
</html>

Analysons les styles de bord en ligne :

border: 2px solid black; crée une bordure noire solide de 2 pixels de large
border: 3px dotted blue; crée une bordure bleue pointillée de 3 pixels de large
border: 4px dashed red; crée une bordure rouge pointillée de 4 pixels de large

La propriété border est un raccourci qui combine :

La largeur de la bordure (en pixels)
Le style de la bordure (solide, pointillée, pointillée, etc.)
La couleur de la bordure

Exemple de sortie lors de la visualisation du contenu du fichier :

$ cat ~/projet/index.html
<!DOCTYPE html>
<html lang="en">
...
<h1 style="border: 2px solid black;">...

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

Définir des couleurs de bord individuelles

Dans cette étape, vous allez apprendre à définir des couleurs de bord individuelles pour les différents côtés d'un élément HTML à l'aide de CSS. Cette technique permet un style de bord plus précis et créatif.

Ouvrez le fichier index.html dans l'IDE Web et mettez à jour le avec le code suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Exemple de couleurs de bord CSS</title>
    <style>
      .individual-borders {
        border-top-color: red;
        border-right-color: green;
        border-bottom-color: blue;
        border-left-color: purple;
        border-style: solid;
        border-width: 4px;
        padding: 10px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Couleurs de bord individuelles</h1>
      <div class="individual-borders">
        Ce div a des couleurs différentes pour chaque côté de la bordure.
      </div>
      <p>Remarquez comment chaque côté de la bordure a une couleur unique!</p>
    </div>
  </body>
</html>

Propriétés CSS clés pour les couleurs de bord individuelles :

border-top-color : Définit la couleur de la bordure supérieure
border-right-color : Définit la couleur de la bordure droite
border-bottom-color : Définit la couleur de la bordure inférieure
border-left-color : Définit la couleur de la bordure gauche

Nous avons également ajouté :

border-style: solid; pour s'assurer que les bordures sont visibles
border-width: 4px; pour rendre les bordures plus proéminentes

Exemple de sortie lors de la visualisation du contenu du fichier :

$ cat ~/projet/index.html
<!DOCTYPE html>
<html lang="en">
...
<div class="individual-borders">...

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

Expérimenter avec les variations de couleurs de bord

Dans cette étape, vous allez explorer différentes manières de spécifier les couleurs de bord en utilisant divers formats et techniques de couleurs CSS. Ouvrez le fichier index.html dans l'IDE Web et mettez à jour le avec le code suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Variations de couleurs de bord</title>
    <style>
      .color-demo {
        width: 200px;
        height: 100px;
        margin: 10px;
        padding: 10px;
      }

      .named-color {
        border: 5px solid tomato;
      }

      .hex-color {
        border: 5px solid #4caf50;
      }

      .rgb-color {
        border: 5px solid rgb(33, 150, 243);
      }

      .rgba-color {
        border: 5px solid rgba(255, 152, 0, 0.7);
      }

      .hsl-color {
        border: 5px solid hsl(120, 100%, 25%);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Variations de couleurs de bord</h1>

      <div class="color-demo named-color">Couleur nommée (Tomate)</div>

      <div class="color-demo hex-color">Couleur hexadécimale (#4CAF50)</div>

      <div class="color-demo rgb-color">Couleur RGB (Bleu)</div>

      <div class="color-demo rgba-color">
        Couleur RGBA (Orange transparente)
      </div>

      <div class="color-demo hsl-color">Couleur HSL (Vert foncé)</div>
    </div>
  </body>
</html>

Méthodes de spécification de couleurs :

Couleurs nommées : Utilisez des noms de couleurs prédéfinis comme tomate
Couleurs hexadécimales : Utilisez des codes hexadécimaux à 6 chiffres (par exemple, #4CAF50)
Couleurs RGB : Utilisez le format rgb(rouge, vert, bleu)
Couleurs RGBA : Ajoutez une transparence alpha avec rgba()
Couleurs HSL : Utilisez le format hsl(teinte, saturation, luminosité)

Exemple de sortie lors de la visualisation du contenu du fichier :

$ cat ~/projet/index.html
<!DOCTYPE html>
<html lang="en">
...
<div class="color-demo named-color">...

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

Appliquer une couleur de bord à différents éléments

Dans cette étape, vous allez apprendre à appliquer des couleurs de bord à différents éléments HTML, démontrant comment CSS peut styliser divers éléments de manière unique. Ouvrez le fichier index.html dans l'IDE Web et mettez à jour le avec le code suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Couleurs de bord sur différents éléments</title>
    <style>
      /* Styles de titre */
      h1 {
        border: 3px solid #2196f3;
        padding: 10px;
        text-align: center;
      }

      /* Styles de paragraphe */
      p {
        border: 2px dashed green;
        padding: 15px;
        margin: 10px 0;
      }

      /* Styles de bouton */
      .custom-button {
        border: 4px dotted purple;
        background-color: #f0f0f0;
        padding: 10px 20px;
        display: inline-block;
        margin: 10px;
      }

      /* Styles d'image */
      .bordered-image {
        border: 5px solid orange;
        max-width: 300px;
      }

      /* Styles de liste */
      ul {
        border: 3px solid red;
        padding: 20px;
      }

      li {
        border-bottom: 1px solid #ccc;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Stylisation de différents éléments</h1>

      <p>Ce paragraphe a une bordure pointillée verte.</p>

      <button class="custom-button">Bouton bordé</button>

      <img
        class="bordered-image"
        src="https://via.placeholder.com/300"
        alt="Image de remplacement"
      />

      <ul>
        <li>Élément de liste avec bordure inférieure</li>
        <li>Un autre élément de liste</li>
        <li>Dernier élément de liste</li>
      </ul>
    </div>
  </body>
</html>

Points clés :

Différents éléments peuvent avoir des styles de bord uniques
Utilisez les sélecteurs CSS pour cibler des types d'éléments spécifiques
Combinez les propriétés de bord telles que la couleur, le style et la largeur
Image de remplacement utilisée à des fins de démonstration

Exemple de sortie lors de la visualisation du contenu du fichier :

$ cat ~/projet/index.html
<!DOCTYPE html>
<html lang="en">
...
<h1>Stylisation de différents éléments</h1>
...

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 du paramétrage des couleurs de bord en CSS grâce à une approche étape par étape. En commençant par la création d'une structure de fichier HTML de base, les apprenants établissent une base pour explorer les techniques de style de bord CSS. Les premières étapes portent sur la compréhension de la manière d'appliquer directement des styles de bord en ligne à des éléments HTML à l'aide de l'attribut style, démontrant une méthode rapide pour ajouter des bordures visuelles aux composants de page web.

Le laboratoire progresse en enseignant à définir des couleurs de bord individuelles, à expérimenter avec différentes variations de couleurs et à appliquer des couleurs de bord à divers éléments HTML. En travaillant sur des exemples pratiques, les participants acquièrent une expérience pratique dans la manipulation des styles de bord, en comprenant comment CSS peut être utilisé pour améliorer la présentation visuelle des pages web grâce à un contrôle précis des couleurs de bord.