Cours 3 : Couleurs et arrière-plans en CSS

Dans cette conférence, nous explorerons comment utiliser les couleurs et les arrière-plans pour rendre votre site Web visuellement attrayant. Comprendre comment appliquer efficacement les couleurs et les arrière-plans est essentiel pour créer des conceptions Web attrayantes et esthétiques.

Utiliser les couleurs en CSS

CSS vous permet de spécifier les couleurs de plusieurs manières, notamment en utilisant des noms de couleurs, des valeurs hexadécimales, RVB, RGBA, HSL et HSLA.

1. Noms des couleurs

CSS fournit une large gamme de noms de couleurs prédéfinis.

• Exemple :

  h1 {
    color: red;
  }

Cela définira la couleur du texte de tous les fichiers

éléments en rouge.

2. Couleurs hexadécimales

Les codes hexadécimaux sont une combinaison à six chiffres de chiffres et de lettres définis par leur mélange de valeurs rouge, verte et bleue (RVB).

• Exemple :

  p {
    color: #3498db; /* A shade of blue */
  }

3. RVB et RVBA

RVB signifie Rouge, Vert et Bleu. RGBA ajoute un canal Alpha pour l'opacité.

• Exemple (RVB) :

  div {
    color: rgb(255, 99, 71); /* Tomato color */
  }

• Exemple (RGBA) :

  div {
    background-color: rgba(255, 99, 71, 0.5); /* Semi-transparent tomato color */
  }

4. HSL et HSLA

HSL signifie Teinte, Saturation et Légèreté. HSLA comprend un canal Alpha.

• Exemple (HSL) :

  h2 {
    color: hsl(120, 100%, 50%); /* Pure green */
  }

• Exemple (HSLA) :

  h2 {
    color: hsla(120, 100%, 50%, 0.5); /* Semi-transparent green */
  }

Application d'arrière-plans

Les arrière-plans en CSS peuvent améliorer le design en ajoutant de la couleur, des images, des dégradés et bien plus encore aux éléments.

1. Couleur de fond

Vous pouvez définir la couleur d'arrière-plan de n'importe quel élément HTML à l'aide de la propriété background-color.

• Exemple :

  body {
    background-color: #f4f4f4; /* Light gray background */
  }

2. Images d'arrière-plan

CSS vous permet d'utiliser des images comme arrière-plans.

• Exemple :

  .banner {
    background-image: url('banner.jpg');
    background-size: cover;
    background-position: center;
  }

Cela définira une image d'arrière-plan sur un élément avec la bannière de classe. L'image couvrira toute la zone et sera centrée.

3. Répétition en arrière-plan

Contrôlez si une image d'arrière-plan se répète horizontalement, verticalement ou pas du tout.

• Exemple :

  .tile {
    background-image: url('tile.png');
    background-repeat: repeat; /* Repeats both horizontally and vertically */
  }

4. Position d'arrière-plan

Vous pouvez contrôler la position de départ de l'image d'arrière-plan.

• Exemple :

  .header {
    background-image: url('header.jpg');
    background-position: top right;
  }

5. Dégradé de fond

Les dégradés vous permettent de créer des transitions douces entre deux couleurs ou plus.

• Exemple (dégradé linéaire) :

  .gradient-box {
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient from left to right */
  }

• Exemple (dégradé radial) :

  .circle-gradient {
    background: radial-gradient(circle, #ff7e5f, #feb47b); /* Circular gradient */
  }

Exemple pratique :

Mettons ces concepts en pratique avec un exemple qui utilise des couleurs, une image d'arrière-plan et un dégradé.

HTML :

<div class="content">
  <h1>Welcome to My Website</h1>
  <p>This is a simple example of using colors and backgrounds in CSS.</p>
</div>

CSS :

/* Background color */
body {
  background-color: #f4f4f4;
}

/* Text color */
h1 {
  color: #2c3e50;
}

/* Background image with gradient overlay */
.content {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background.jpg');
  background-size: cover;
  color: white;
  padding: 20px;
  text-align: center;
}

/* Text color for paragraph */
p {
  color: #ecf0f1;
}

Dans cet exemple :

• Le corps a une couleur de fond gris clair.
• Le

  le texte est bleu foncé.

• Le div .content a une image d'arrière-plan avec une superposition de dégradé sombre, faisant ressortir le texte blanc.
• Le

  le texte est une teinte claire pour compléter l’arrière-plan.

Exercice pratique

1. Créez une page Web comprenant des titres, des paragraphes et des div.
2. Expérimentez avec différents formats de couleurs (hex, RVB, HSL) pour styliser le texte et les arrière-plans.
3. Appliquez une image d'arrière-plan à une section et jouez avec sa position, sa taille et ses propriétés de répétition.
4. Créez une section avec un arrière-plan dégradé linéaire ou radial.

Prochaine étape : Dans la prochaine conférence, nous aborderons la Typographie et le style des polices en CSS, où vous apprendrez à choisir et à personnaliser les polices pour améliorer la lisibilité de votre site Web. et faire appel. Rendez-vous là-bas !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!