Couleur et arrière-plan
Couleur et arrière-plan
Couleur et arrière-plan est une leçon HTML for Kids gratuite sur CoddyKit. Ceci est la leçon 1 sur 1. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML for Kids, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML for Kids comprend 1 leçons au total.
Introduction
Bonjour,
Nous pouvons modifier les couleurs du texte avec la propriété de couleur.
Nous pouvons attribuer à cette propriété des valeurs de type RGB, HEX, HSL, RGBA ou HSLA.
Nous avons déjà utilisé la propriété de couleur dans de nombreux exemples. Illustrons maintenant son utilisation avec différents types de valeurs.
<style>
#txt1{
color: red;
}
#txt2{
color: #ff0000;
}
#txt3{
color: rgb(255,0,0);
}
/*
0.4 is the alpha value.
We can define decimal values
between 1 and 0.
*/
#txt4{
color: rgba(255,0,0, 0.4);
}
</style>
<div class="box">
<h1 id="txt1">
This is red color
</h1>
<h1 id="txt2">
This is red color that defined with HEX type
</h1>
<h1 id="txt3">
This is red color that defined with RGB type
</h1>
<h1 id="txt4">
This is red color that defined with RGBA type
</h1>
</div>Arrière-plan
Nous pouvons définir le style d’arrière-plan des éléments à l’aide des propriétés d’arrière-plan.
Apprenons maintenant les propriétés d’arrière-plan listées ci-dessous.
- couleur d’arrière-plan
- image d’arrière-plan
- répétition de l’arrière-plan
- attachement de l’arrière-plan
- position de l’arrière-plan
couleur d’arrière-plan
Cette propriété permet de modifier la couleur d’arrière-plan d’un élément.
Donnons un exemple.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec ante purus,
eleifend egestas tempus non, consequat ac ex..
</div>
</body>
</html>Opacité
Cette propriété permet de modifier l’opacité de l’arrière-plan d’un élément.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
opacity: 0.5;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">
Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
</div>
</body>
</html>Opacité - 2
La modification de l’opacité CSS est illustrée sur l’image ci-dessus.
Image d’arrière-plan
La propriété image d’arrière-plan permet d’ajouter des images à l’arrière-plan d’un élément.
Notre image se trouve à l’adresse https://coddy.s3.amazonaws.com/cms/Profile_Pictures_dc459075ee.png.
Définissons maintenant un élément div et ajoutons une image à son arrière-plan.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>position de l’arrière-plan
taille de l’arrière-plan
Comme vous l’avez peut-être remarqué dans notre exemple précédent, nous ne pouvions pas la positionner correctement, car la taille standard de l’image est supérieure à la zone dans laquelle nous allons l’ajouter.
Nous utiliserons la propriété de taille d’arrière-plan pour résoudre ce problème.
La propriété de taille d’arrière-plan peut prendre des valeurs telles que cover, contain et auto ; nous pouvons également lui attribuer une valeur précise pour la largeur et la hauteur.
Mettons à nouveau notre exemple à jour.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* the element's background would fill the
div's background without
the image's ratio being distorted*/
background-size: contain;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>position de l’arrière-plan 2
Définissons maintenant sa valeur en pourcentage pour la propriété de position d’arrière-plan.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height values
are set to 50%. */
background-size: 50% 50%;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>répétition de l’arrière-plan
Cependant, un problème se pose ici. Comme la taille de l’image était inférieure à la taille d’arrière-plan de l’élément, elle a été utilisée plusieurs fois pour remplir la zone.
Pour éviter cela, utilisez la propriété de répétition d’arrière-plan (avec les valeurs repeat, repeat-x, repeat-y, initial, inherit ou no-repeat).
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-attachment
Une autre propriété d’arrière-plan est background-attachment. Cette propriété permet de déterminer si l’image d’arrière-plan défile sur la page.
Cette propriété accepte les valeurs fixed ou scroll.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-attachment:scroll;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Raccourci background
Lorsque nous voulons appliquer les propriétés d’arrière-plan étudiées dans les exemples ci-dessus, nous devons parfois définir 4 ou 5 lignes d’expressions.
Nous utilisons la propriété raccourcie background pour effectuer cette définition sur une seule ligne.
Examinons notre exemple.
Dans la propriété background, no-repeat, size, le positionnement dans la page, ainsi que l’URL de l’image source sont définis.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background: no-repeat center/50%
url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Félicitations
Félicitations 🎉
Dans cette section, nous avons appris la couleur et l’arrière-plan.
Dans la prochaine section, nous apprendrons les concepts de boîte, de bloc et de ligne.
Questions Fréquemment Posées
La leçon « Couleur et arrière-plan » est-elle gratuite ?
Oui — le texte complet de « Couleur et arrière-plan » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML for Kids, passe à CoddyKit PRO. Le cours HTML for Kids comprend 1 leçons au total.
Qu'est-ce que j'apprendrai dans « Couleur et arrière-plan » ?
Couleur et arrière-plan Tu pratiques HTML for Kids avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML for Kids ?
Aucune expérience préalable n'est requise. HTML for Kids sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 1.
Combien de temps prend la leçon « Couleur et arrière-plan » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML for Kids ?
Oui. Chaque leçon HTML for Kids inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.