Tutoriel sur la propriété CSS text-emphasis

La propriété CSS text-emphasis vous permet d'ajouter une emphase visuelle à certains éléments de texte dans votre page web. Elle est utile pour mettre en évidence des mots-clés, des noms propres ou tout autre élément de texte important.

Définition

La propriété text-emphasis est utilisée pour définir le style d'emphase à appliquer au texte. Elle peut être utilisée avec les valeurs suivantes :

Syntaxe générale de la propriété CSS text-emphasis

Voici la syntaxe générale pour utiliser la propriété text-emphasis:

      selector {
        text-emphasis: <emph-style> <emph-color>;
      }

Le selector peut être un élément HTML spécifique, une classe ou un ID. L'emph-style représente le style d'emphase à appliquer, tandis que l'emph-color représente la couleur de l'emphase.

Valeurs par défaut	none
Inherited:	non
Version:	CSS3
Syntaxe JavaScript:	object.style.textEmphasis="filled blue"

Valeurs possibles de la propriété CSS text-emphasis

Voici les valeurs possibles de la propriété CSS text-emphasis:

none : Aucune emphase n'est appliquée.
accent : Une marque d'accentuation est ajoutée au texte.
dot : Des points sont ajoutés au-dessus du texte.
circle : Des cercles sont ajoutés au-dessus du texte.
double-circle : Des cercles doubles sont ajoutés au-dessus du texte.
filled : Les marques d'accentuation sont remplies d'une couleur unie
open : Les marques d'accentuation sont creuses
triangle : Les accents sont des triangles
Sesame : Les accents sont des sésames
String : Les marques d'accentuation sont la chaîne de caractères donnée (un caractère)
color : Définit la couleur des marques d'accentuation

La couleur de l'emphase peut être spécifiée en utilisant une valeur de couleur CSS valide, comme #ff0000 , rgb(250 0 0) ou red.

Exemples pratiques d'utilisation de la propriété CSS text-emphasis

Voici quelques exemples pratiques d'utilisation de la propriété text-emphasis:

      h1 {
        text-emphasis: accent red;
      }

      p {
        text-emphasis: dot #00ff00;
      }

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Tutoriel text-emphasis</title> 
    <style>
     body {
  background-color: #cfcbc9;
  margin: auto;
  max-width: clamp(300px, 75%, 700px);
}

h2 {
  background: #fff;
  border: 1px solid #dd2c00;
  font-size: 1.5em;
  padding:10px;
}

h2:nth-child(1) {
  text-emphasis: filled;
}
h2:nth-child(2) {
  text-emphasis: open;
}
h2:nth-child(3) {
  text-emphasis: dot;
}
h2:nth-child(4) {
  text-emphasis: circle;
}
h2:nth-child(5) {
  text-emphasis: double-circle;
}
h2:nth-child(6) {
  text-emphasis: triangle;
}
h2:nth-child(7) {
  text-emphasis: sesame;
}
h2:nth-child(8) {
  text-emphasis: none;
}
h2:nth-child(9) {
  text-emphasis: "*";
}
    </style>
  </head>
  <body>
    <h2>text-emphasis: <strong>filled</strong></h2>
	<h2>text-emphasis: <strong>open</strong></h2>
	<h2>text-emphasis: <strong>dot</strong></h2>
	<h2>text-emphasis: <strong>circle</strong></h2>
	<h2>text-emphasis: <strong>double-circle</strong></h2>
	<h2>text-emphasis: <strong>triangle</strong></h2>
	<h2>text-emphasis: <strong>sesame</strong></h2>
	<h2>text-emphasis: <strong>none</strong></h2>
	<h2>text-emphasis: <strong>string</strong></h2>
  </body>
</html>

Dans cet exemple, tous les titres de niveau 1 (h1) seront mis en évidence avec une marque d'accentuation en rouge, tandis que tous les paragraphes (p) auront des points verts ajoutés au-dessus du texte.

Astuces et conseils d'utilisation de la propriété CSS text-emphasis

Voici quelques astuces et conseils pour utiliser efficacement la propriété text-emphasis:

Utilisez l'emphase de texte avec parcimonie pour éviter de surcharger visuellement votre contenu.
Choisissez des couleurs et des styles d'emphase qui contrastent suffisamment avec le texte de base pour une meilleure lisibilité.
Expérimentez avec différentes valeurs et combinaisons pour trouver l'effet d'emphase qui correspond le mieux à votre design.
Utilisez la propriété text-emphasis-style avec la valeur filled pour remplir le texte avec l'emphase plutôt que de l'ajouter au-dessus du texte.
Assurez-vous que l'emphase ne perturbe pas la hiérarchie de lecture de votre contenu. Il est important que le texte principal reste clairement lisible.

Maintenant que vous avez une meilleure compréhension de la propriété text-emphasis, vous pouvez l'expérimenter dans vos projets CSS pour ajouter une touche visuelle supplémentaire à votre texte.