Guide de mise en forme du texte en CSS

Lors de la conception d'un site Web, la mise en forme du texte est un aspect important de la création d'une interface attrayante et lisible.

CSS fournit plusieurs propriétés qui vous permettent de personnaliser divers éléments de texte, notamment la couleur de la police, la taille, la famille, l'alignement, l'espacement, etc.

Vous trouverez ci-dessous un guide détaillé sur chaque propriété de formatage de texte, ainsi que des exemples pour chaque propriété.

 

Couleur de la police

Paramètre : une valeur de couleur, qui peut être un nom de couleur(par exemple, red), un code hexadécimal(par exemple, "#FF0000"), une valeur RVB(par exemple, "rgb(255, 0, 0)") ou une valeur RGBA(par exemple, "rgba(255, 0, 0, 0.5)").

p {  
  color: blue;  
}  

 

Taille de police

Paramètre : une valeur de taille, qui peut être exprimée en pixels(par exemple, "16px"), en unités em(par exemple, "1em"), en unités rem(par exemple, "1.2rem"), en unités de largeur de fenêtre(par exemple, "10vw"), les unités de hauteur de la fenêtre(par exemple, "5vh") ou d'autres unités.

h1 {  
  font-size: 24px;  
}  

 

Famille de polices

Paramètre : une liste de familles de polices, spécifiée dans l'ordre préféré. Vous pouvez spécifier le nom de la police(par exemple, Arial) ou placer les noms de police contenant des caractères spéciaux entre guillemets doubles(par exemple, " Times New Roman).

body {  
  font-family: Arial, sans-serif;  
}  

 

Poids et style de la police

Paramètre font-weight: normal(default), bold, bolder, lighter, ou valeurs numériques de 100 à 900.

Paramètre font-style: normal(default), italic.

em {  
  font-style: italic;  
}  
  
strong {  
  font-weight: bold;  
}  

 

Décoration de texte

Paramètre : "none"(default), "underline", "overline", "line-through"  ou une combinaison de valeurs séparées par des espaces.

a {  
  text-decoration: underline;  
}  
  
del {  
  text-decoration: line-through;  
}  

 

Alignement du texte

Paramètre: "left"(default), "right", "center" or "justify".

p {  
  text-align: center;  
}  

 

Hauteur de ligne et marges

Paramètre line-height : une valeur numérique ou un pourcentage de la taille de police actuelle.

Marge de paramètre : valeur de mesure, telle que pixels(px), unités em(em), unités rem(rem), etc.

p {  
  line-height: 1.5;  
  margin-bottom: 10px;  
}  

 

Disposition de texte multicolonne

Paramètre: Un entier positif ou "auto"(default).

.container {  
  column-count: 2;  
}  

 

Changement de couleur du texte au survol

Pas de paramètre spécifique, utilisez uniquement la pseudo-classe :hover.

a:hover {  
  color: red;  
}  

 

Changement de couleur du texte sur l'état(actif, visité)

Pas de paramètre spécifique, n'utilisez que les pseudo-classes :active  et :visited.

a:visited {  
  color: purple;  
}  

 

Nous espérons que les explications et exemples ci-dessus vous ont aidé à comprendre comment utiliser et personnaliser les propriétés de mise en forme du texte dans CSS pour créer une interface texte visuellement attrayante et engageante sur votre site Web.