CodeGym/Cours/Frontend SELF FR/Propriétés principales du texte

Propriétés principales du texte

Disponible

1.1 Couleur

CSS (Cascading Style Sheets) offre de nombreuses propriétés pour styliser le texte. Parmi elles, les propriétés clés sont color, font-size et font-weight. Ces propriétés permettent de contrôler la couleur du texte, sa taille et l'épaisseur de la police respectivement. Examinons chacune de ces propriétés en détail.

La propriété color définit la couleur du texte. Elle peut être définie à l'aide de différents formats de couleur, y compris les noms de couleurs, les valeurs hexadécimales, RGB, RGBA, HSL et HSLA.

Exemples d'utilisation

1. Noms de couleurs :

CSS
p {
  color: red;
}

2. Valeurs hexadécimales :

CSS
p {
  color: #ff0000;
}

3. RGB et RGBA :

CSS
p {
  color: rgb(255, 0, 0);
  color: rgba(255, 0, 0, 0.5); /* Rouge transparent */
}

4. HSL et HSLA :

CSS
p {
  color: hsl(0, 100%, 50%);
  color: hsla(0, 100%, 50%, 0.5); /* Rouge transparent */
}

Exemple d'utilisation en HTML :

CSS
p {
  color: #3498db; /* Bleu */
}
HTML
<body>
  <p>Ce texte sera bleu.</p>
</body>

1.2 Propriété font-size

La propriété font-size définit la taille du texte. La valeur peut être spécifiée dans différentes unités telles que les pixels (px), en relatif (em, rem, %), en unités dérivées des pixels (mm, cm, pt, pc), vw et vh (viewport width et viewport height), entre autres.

Exemples d'utilisation

1. Pixels :

CSS
p {
  font-size: 16px;
}

2. Relatif :

%, em, rem

CSS
p {
  font-size: 150%; /* 150% de la taille de police de base */
  font-size: 1.5em; /* 1.5 fois la taille de police de base */
  font-size: 1.5rem; /* taille relative à la taille de police de l'élément <html> */
}

3. Unités liées au viewport :

CSS
p {
  font-size: 2vw; /* 2% de la largeur du viewport */
  font-size: 2vh; /* 2% de la hauteur du viewport */
}

Exemple d'utilisation en HTML :

CSS
p {
  font-size: 18px; /* Taille de texte de 18 pixels */
}
HTML
<body>
  <p>Ce texte aura une taille de 18 pixels.</p>
</body>

1.3 Propriété font-weight

La propriété font-weight définit l'épaisseur du texte. Les valeurs peuvent être définies comme mots clés (normal, bold, bolder, lighter) ou comme valeurs numériques de 100 à 900, où 400 correspond à normal et 700 correspond à bold.

Exemples d'utilisation

1. Mots clés :

CSS
p {
  font-weight: bold;
}

2. Valeurs numériques :

CSS
p {
  font-weight: 300; /* Texte léger */
  font-weight: 700; /* Équivalent à bold */
}

Exemple d'utilisation en HTML :

CSS
p {
  font-weight: 700; /* Texte en gras */
}
HTML
<body>
  <p>Ce texte sera en gras.</p>
</body>
1
Mission
Frontend SELF FR,  niveau 14leçon 0
Bloqué
Taille du texte
Taille du texte
1
Mission
Frontend SELF FR,  niveau 14leçon 0
Bloqué
Épaisseur du texte
Épaisseur du texte
Commentaires
  • Populaires
  • Nouveau
  • Anciennes
Tu dois être connecté(e) pour laisser un commentaire
Cette page ne comporte pas encore de commentaires