Propriétés CSS les plus utilisées
Propriétés CSS les plus utilisées
Propriétés CSS les plus utilisées 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,
Dans cette section, nous découvrirons les propriétés CSS les plus courantes.
Jusqu’à présent, nous avons généralement utilisé des propriétés simples comme color et font-size.
Largeur et hauteur
Hauteur - Largeur
Nous utiliserons les propriétés de largeur et de hauteur pour définir les valeurs de largeur et de hauteur de nos éléments.
Deux points doivent être pris en compte.
- Nous ne pouvons pas attribuer de largeur ni de hauteur aux éléments de type en ligne.
- Par défaut, les propriétés de largeur et de hauteur que nous attribuons sont indépendantes d’autres propriétés telles que la marge, l’espacement interne et la bordure. Elles s’appliquent uniquement à la zone située à l’intérieur de l’élément.
Nous fournirons plus tard des informations complémentaires sur les exceptions ci-dessus.
<!DOCTYPE html>
<html>
<head>
<style>
.my-box {
width: 100px;
height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="my-box">My Box</div>
</body>
</html>
Largeur et hauteur 2
Dans notre exemple précédent, nous avons attribué des valeurs statiques à la largeur et à la hauteur. Cependant, les valeurs pouvant être attribuées ne se limitent pas à des nombres fixes.
Voyons maintenant comment attribuer une largeur en pourcentage dans notre exemple.
<style>
.box1 {
height: 200px;
width: 200px;
background-color: #1cac84;
}
.box2 {
height: 200px;
width: 70%;
background-color: powderblue;
}
.box3 {
background-color: #c974af;
}
</style>
<div class="box1">First Box</div>
<div class="box2">Second Box</div>
<div class="box3">This box takes
the auto value for the width and height
properties by default.</div>
content-box ou border-box
La propriété box-sizing prend par défaut la valeur content-box.
Par défaut, les valeurs de largeur et de hauteur servent à faire référence au contenu.
Les valeurs de bordure et de marge intérieure s’ajoutent aux valeurs de largeur et de hauteur.
Supposons que la largeur d’une boîte soit de 100px.
Lorsque nous ajoutons une marge intérieure de 10px et une bordure de 20px à cette boîte, la largeur totale de l’élément sera de 100px + 10px + 20px = 130px.
Largeur maximale
Avec la propriété max-width, nous pouvons définir la largeur maximale qu’un élément peut prendre.
Dans l’exemple ci-dessous, comme la valeur de max-width est définie sur 100px, bien que la valeur par défaut de width soit auto (l’élément doit couvrir 100 % de son parent), il occupe 100px et le contenu déborde de la boîte.
<style>
.box {
height: 200px;
max-width: 100px;
background-color: #1cac84;
}
</style>
<div class="box">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi lacinia ut felis
et sagittis
</div>
Décoration du texte
Nous pouvons définir une décoration pour les textes avec la propriété text-decoration.
Je pense qu’il sera plus pertinent d’examiner cette propriété à partir de l’exemple. Regardez le résultat de notre code d’exemple dans l’aperçu.
<style>
.head1 {
text-decoration: overline;
}
.head2 {
text-decoration: line-through;
}
.head3 {
text-decoration: underline;
}
.head4 {
text-decoration: underline overline;
}
</style>
<h1 class="head1">
Text-decoration is overline
</h1>
<h1 class="head2">
Text-decoration is line-through
</h1>
<h1 class="head3">
Text-decoration is underline
</h1>
<h1 class="head4">
Text-decoration is both underline
and overline
</h1>Retrait du texte
Nous pouvons vouloir ajouter un espace au début d’un texte. Nous utilisons pour cela la propriété text-indent.
<style>
.indent-txt{
text-indent: 20px;
}
</style>
<p class="indent-txt">Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat
</p>Alignement du texte
Nous définissons le positionnement horizontal d’un texte avec la propriété text-align.
Définissons un exemple de code HTML.
<style>
.h1-center {
text-align: center;
}
.h1-left {
text-align: left;
}
.h1-right {
text-align: right;
}
</style>
<h1 class="h1-center">
Lorem ipsum (center)
</h1>
<h1 class="h1-left">
Lorem ipsum (left)
</h1>
<h1 class="h1-right">
Lorem ipsum (right)
</h1>Famille de polices
Nous définissons le style font-family pour utiliser les types de polices souhaités pour les textes.
Voici quelques points importants à connaître.
- La police que j’ai définie doit être installée sur le système de notre utilisateur. Pour cela, nous devons utiliser l’une des polices considérées comme police sûre pour le Web.
- Si nous voulons utiliser une police personnalisée, nous devons ajouter la police utilisée comme dépendance tierce entre les balises head. Lors de l’ajout de font-family, nous devons définir nos préférences de famille de polices principale et secondaire.
- Si le navigateur ne trouve pas notre préférence principale sur le système, il affiche notre préférence secondaire à l’utilisateur.
famille de polices 2
Dans l’exemple ci-dessous, la police Times New Roman a été attribuée à la classe principale.
Les polices Times et serif sont attribuées respectivement comme polices secondaire et tertiaire.
Le navigateur essaie d’abord d’utiliser la police Times New Roman ; si cette police n’est pas disponible sur le système, il utilise nos autres préférences.
Si les polices que nous avons attribuées ne sont pas disponibles, le navigateur utilise la police par défaut.
<style>
.header {
font-family: "Times New Roman", Times, serif;
}
</style>
<h1 class="header">
Hello Font Family
</h1>style de police
Comme son nom l’indique, cette propriété définit le style de police du texte que nous utilisons.
Examinons maintenant la propriété de style de police avec un exemple.
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
<p class="normal">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="italic">Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="oblique">Lorem ipsum
dolor sit amet. consectetur
adipiscing elit
</p>Félicitations
Félicitations 🎉
Dans cette section, nous avons étudié les propriétés CSS les plus utilisées.
Dans la prochaine section, nous découvrirons la marge CSS.
Questions Fréquemment Posées
La leçon « Propriétés CSS les plus utilisées » est-elle gratuite ?
Oui — le texte complet de « Propriétés CSS les plus utilisées » 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 « Propriétés CSS les plus utilisées » ?
Propriétés CSS les plus utilisées 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 « Propriétés CSS les plus utilisées » ?
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.