Testez vos compétences : Valeurs et unités

Valeurs et unités n°1

Dans cette tâche, le premier élément de la liste a été coloré en utilisant un code couleur hexadécimal. Complétez le CSS en utilisant la même couleur dans différents formats, plus un dernier élément de la liste où vous devez rendre l'arrière-plan semi-transparent.

• Le deuxième élément de la liste doit utiliser une couleur RGB.
• Le troisième doit utiliser une couleur HSL.
• Le quatrième doit utiliser une couleur RGB mais avec le canal alpha réglé à 0.6.

Vous pouvez convertir la couleur hexadécimale en utilisant convertingcolors.com ^(angl.). Vous devez ensuite déterminer comment utiliser ces valeurs en CSS.

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

<ul>
  <li class="hex">couleur hexadécimale</li>
  <li class="rgb">couleur RGB</li>
  <li class="hsl">couleur HSL</li>
  <li class="transparence">valeur alpha 0.6</li>
</ul>

body {
  font: 1.2em / 1.5 sans-serif;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 1em;
  padding: 0.5em;
}

.hex {
  background-color: #86defa;
}

/* Ajoutez des styles ici */

Le style mis à jour doit ressembler à ceci :

.rgb {
  background-color: rgb(134 222 250);
}

.hsl {
  background-color: hsl(194 92% 75%);
}

.transparence {
  background-color: rgb(134 222 250 / 60%);
}

Valeurs et unités n°2

Dans cette tâche, nous voulons que vous définissiez la taille de la police de différents éléments de texte :

• L'élément <h1> doit être de 50px.
• L'élément <h2> doit être de 2em.
• Tous les éléments <p> doivent être de 16px.
• Un élément <p> qui suit directement un <h1> doit être de 120%.

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

<h1>Titre de niveau 1</h1>
<p>
  Les légumes, c'est un plus pour vous, c'est pourquoi je vous demande de mettre
  davantage de chou-rave, ciboulette, daikon, amarante, tatsoi, tomatillo,
  melon, haricots azuki, ail.
</p>
<h2>Titre de niveau 2</h2>
<p>
  Feuilles de betterave, maïs, soko, endive, courge à gumbo. Persil, échalote,
  courgette, tatsoi, pousses de pois, fèves, chou vert, pissenlit, gombo,
  wakamé, tomate. Pissenlit, concombre, arachide, pois, cacahuète, soko,
  courgette.
</p>

body {
  font: 1.2em / 1.5 sans-serif;
}

h1 {
  /* Ajoutez des styles ici */
}

h2 {
  /* Ajoutez des styles ici */
}

p {
  /* Ajoutez des styles ici */
}

h1 + p {
  /* Ajoutez des styles ici */
}

Le style mis à jour doit ressembler à ceci :

h1 {
  font-size: 50px;
}

h2 {
  font-size: 2em;
}

p {
  font-size: 16px;
}

h1 + p {
  font-size: 120%;
}

Valeurs et unités n°3

Pour compléter la tâche, mettez à jour le CSS afin de déplacer l'image de fond de manière à ce qu'elle soit centrée horizontalement et à 20% du haut de la boîte.

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

<div class="boite"></div>

.boite {
  border: 5px solid black;
  height: 350px;
}

.boite {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/purple-star.png");
  background-repeat: no-repeat;
}

Le style mis à jour doit ressembler à ceci :

.boite {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/purple-star.png");
  background-repeat: no-repeat;
  background-position: center 20%;
}

• Précédent
• Aperçu : Bases de la mise en forme CSS
• Suivant