Une analyse approfondie de la propriété CSS text-emphasis et de son utilisation !

Cet article vous amènera à comprendre l'attribut CSS text-emphasis et à présenter l'utilisation de l'attribut text-emphasis à travers plusieurs exemples.

De manière générale, les pages que nous créons ne sont pas destinées aux utilisateurs littéraires, il est donc peu probable qu'ils entrent en contact avec le symbole « soulignement ». Si vous êtes familier avec Word, sachez qu'il existe un paramètre de texte dans Word, qui consiste à définir le « signe d'accentuation ».

Je n'ai pas Word sur mon ordinateur, alors j'en ai cherché un sur Baidu. Quoi qu'il en soit, c'est probablement l'effet.

Ensuite, la propriété CSS dont nous allons parler dans cet article est l'attribut "emphasis". Nous pouvons définir le style "emphasis" du texte via l'attribut text-emphasis. C'est le raccourci pour les deux attributs text-emphasis-color et text-emphasis-style C'est-à-dire que nous pouvons transmettre text-emphasis. code> code> En même temps, définissez le style et la couleur du caractère « marque d'accentuation », tels que : text-emphasis 属性设置文本“着重号”样式。这是 text-emphasis-color 和 text-emphasis-style 这两个属性的简写方式，也就是说，我们可以通过 text-emphasis 同时设定“着重号”字符样式以及颜色，比如：

p {
    -webkit-text-emphasis: dot red;
    text-emphasis: dot red;
}

那么就可以看到这样的效果。

至于在 word 中看到的是不是这样的效果，这个我也不知道了，反正呢，在 web 页面中，我们所看到的着重号不仅可以修改字符样式以及颜色，还可以修改大小和位置。

• text-emphasis-style 有好几个属性值，并且也可以输入任意字符；
• text-emphasis-color 则可以使用常规的 web 中使用的颜色值，rgba()、rgb()什么的都可以；

而如果想要调整位置的话，那么就是要额外一个属性 text-emphasis-position，虽然看着这个属性跟 style 和 color 很相近，但并不是 text-emphasis 简写中的一个。那么对于 text-emphasis-position 在常规的情况下，我们能控制的位置是上以及下这两个方向，也就是：

• text-emphasis-position: over;
• text-emphasis-position: under;

如想要了解更多的话，可以翻阅一下 MDN 中的具体介绍，这里不赘述。那么按照上面说的，我们把 CSS 部分修改一下，就像这样：

p {
    -webkit-text-emphasis: '——' rgba(255, 0, 0, .5);
    text-emphasis: '——' rgba(255, 0, 0, .5);
    -webkit-text-emphasis-position: under;
    text-emphasis-position: under;
}

然后得到的结果就是：

看着是不是很像文本的下划线 text-decoration: underline; 的效果呢？那我们再增加一条这个属性看看效果。

p {
    -webkit-text-emphasis: '——' rgba(255, 0, 0, .5);
    text-emphasis: '——' rgba(255, 0, 0, .5);
    -webkit-text-emphasis-position: under;
    text-emphasis-position: under;
    text-decoration: underline;
}

这两个是不同的属性，差异必定也是有的。具体就不细化，主要的差异通过文档也是可以看到。这里需要提一下的是，text-decoration 属性值如果父级设定了 underline 样式，那么子级设定 overline，两个线条样式是会存在，就算是更换了 text-decoration-style 值也是如此。

而 text-emphasis 当我们改变了其中的属性值之后，结果也就不同。同时，如果我们未设定颜色值的话，“着重号”的颜色将会继承元素自身的文本颜色。因为可以设定颜色值，所以我们同样可以使用 transparent 直接设置元素为透明。

提到继承，这里需要注意一个点，“着重号”的文本大小差不多是正常文本的一半左右。

回顾一下前面提到的几个点：

• 可以输入任意字符；
• 如未设定颜色将继承元素自身的 color

  <p>文本内容，<span>一个 span 元素</span><em>是　em &yen;&#67;元素哦</em>，啊啊啊……</p>

Ensuite, vous pouvez voir cet effet.
• 

Comme car je ne sais pas si c'est l'effet que nous voyons dans Word. Quoi qu'il en soit, dans les pages Web, les marques d'accentuation que nous voyons peuvent non seulement modifier le style et la couleur des caractères, mais aussi modifier la taille et la position.

text-emphasis-style a plusieurs valeurs d'attribut, et vous pouvez également saisir n'importe quel caractère

 ;

text-emphasis-color peut utiliser des valeurs de couleur Web normales. ​​utilisé dans rgba(), rgb() peut être n'importe quoi ;

• Et si vous souhaitez ajuster la position, vous avez besoin d'un attribut supplémentaire ; text-emphasis-position, bien que cet attribut ressemble beaucoup à style et color, ce n'est pas text-emphasis l'un des les abréviations. Donc pour text-emphasis-position dans des circonstances normales, les positions que nous pouvons contrôler sont les deux directions up
et
• down, soit :

text-emphasis -position : over;

text-emphasis-position: under;

Si vous souhaitez en savoir plus, vous pouvez lire l'introduction détaillée dans MDN, qui ne sera pas décrite ici. Donc comme mentionné plus haut, on modifie la partie CSS, comme ceci : 🎜rrreee🎜Ensuite le résultat est : 🎜🎜🎜🎜Est-ce que cela ressemble à l'effet du soulignement du texte text-decoration: underline; ? Ajoutons ensuite un autre attribut pour voir l'effet. 🎜rrreee🎜🎜🎜 Ces deux attributs sont différents et il doit y avoir des différences. Je n'entrerai pas dans les détails. Les principales différences peuvent également être vues à travers la documentation. Ce qui doit être mentionné ici, c'est que si le parent définit le style underline pour la valeur de l'attribut text-decoration, alors l'enfant définit le style overline. style. Les deux Le style de ligne existera même si la valeur text-decoration-style est modifiée. 🎜🎜Et lorsque nous modifions la valeur de l'attribut text-emphasis, le résultat sera différent. En même temps, si nous 🎜 ne définissons pas de valeur de couleur, la couleur de la « marque d'accentuation » héritera de la couleur du texte de l'élément lui-même 🎜. Étant donné que la valeur de couleur peut être définie, nous pouvons également utiliser transparent pour définir directement l'élément comme étant transparent. 🎜🎜En ce qui concerne l'héritage, une chose doit être notée ici 🎜La taille du texte du « point d'accentuation » est presque la moitié du texte normal🎜. 🎜🎜Revoyez les points mentionnés précédemment : 🎜🎜🎜Vous pouvez saisir n'importe quel caractère ; 🎜🎜Si la couleur n'est pas définie, elle héritera de la valeur color de l'élément lui-même, et elle peut également être définie. à transparent ; 🎜🎜 La taille du « point d'accentuation » est environ la moitié du texte normal 🎜🎜🎜En combinant ces points, nous pouvons jouer comme ça ; 🎜🎜🎜🎜🎜Il y a des endroits où il n'y a pas de "marques d'accentuation", certains sont des caractères vides ou spéciaux, certains sont saisis avec désinvolture et certains sont intentionnels. Je veux principalement voir comment la "marque d'accentuation" est affichée dans certains caractères spéciaux. 🎜🎜🎜🎜Un seul caractère 🎜 sera affiché, qu'il s'agisse d'un caractère pleine chasse ou demi-chasse, ou même d'un caractère spécial emoji 🎜🎜🎜 n'affichera que la 🎜 « marque d'accentuation » sur les caractères de texte visibles ; 🎜🎜🎜Alors le code pour cet effet est :🎜rrreee🎜🎜🎜

C'est tout pour cet article ? Non, il y a encore une chose que je veux dire. Comme vous pouvez le voir sur le rendu ci-dessus, la "marque d'accentuation" est en dessous ou au-dessus du texte, donc pour un texte normal, la hauteur de ligne (line-height) je pense que tout le monde la connaîtra. Alors, quel sera l'effet après avoir ajouté line-height à la pièce avec « marque d'accentuation » ? line-height）相信大家不会陌生。那么在有“着重号”的部分，加上 line-height 后会是怎么样的效果呢？

line-height: 20px; 加到 p 中之后，并未看到任何变化；而如果把 20px 换成 60px，有变化了，高度撑开了一丢丢；那再加大点，撑开了，“着重号”紧随着文本隔开了上下行内容。

突发奇想，当 line-height 的值比较小的时候，并未看到效果，正常情况下，没有 text-emphasis 时，比较小的 line-height 会让多行内容重叠，就像这样：

可现在有了 text-emphasis 后，并不会重叠了，看来是直接影响了 line-height 最小值的情况，必须保证多行之间的高度值在某个特定值，看着似乎是 1em 左右的大小，以便于放得下比文字正常 font-size 小一半的，且要与文本内容保持一定间距的“着重号”。

回到「冷门的 text-emphasis有什么用呢？」这个话题上。是啊，有什么用呢，除了正常表示某部分的文字内容是着重标记的以外，似乎也感受不到有什么用了。除非就是我们重复利用这个“着重号”的特性来玩，尤其是会撑开 line-height，以保证最少有 1em 左右的空间存在于多行之间。那么如果我们使用一个透明颜色的“着重号”，是不是代表着这部分文字的永远都不会叠加呢？

然后再结合 emoji

line-height : 20px ; Après l'avoir ajouté à p, aucun changement n'est visible et si 20px est remplacé par 60px ; , il y a un changement, la hauteur est un peu étirée ; puis agrandissez-la, étirez-la, et la "marque d'accentuation" suit le texte pour séparer les lignes supérieure et inférieure du contenu.

Juste par hasard, lorsque la valeur de line-height est relativement petite, aucun effet n'est observé. Dans des circonstances normales, lorsqu'il n'y a pas de text-emphasis, le relativement petit. > line-height fera chevaucher plusieurs lignes de contenu, comme ceci :

🎜🎜Mais maintenant avec text-emphasis, il n'y a pas de chevauchement cela semble affecter directement la ligne- Dans le. Dans le cas de la valeur minimale de la hauteur, il est nécessaire de s'assurer que la valeur de la hauteur entre plusieurs lignes est à une certaine valeur. Elle semble être d'environ 1em, afin qu'elle puisse être placée. plus petit que le texte normalfont-size est la moitié de la taille et doit être maintenu à une certaine distance du contenu du texte. 🎜🎜Retour au sujet "A quoi sert l'impopulaire text-emphasis ?" Oui, à quoi ça sert ? Hormis l'indication normale qu'une certaine partie du contenu du texte est mise en évidence, cela ne semble avoir aucune utilité. À moins que nous réutilisions la fonctionnalité "numéro d'accentuation" pour jouer, notamment pour étendre line-height afin de garantir qu'il y a au moins 1em d'espace entre plusieurs lignes. Alors si l’on utilise une « marque d’accentuation » de couleur transparente, cela signifie-t-il que cette partie du texte ne sera jamais superposée ? 🎜🎜Ensuite, combiné avec un emoji ou une combinaison chaotique de haut en bas, cela créera-t-il un ciel différent ? 🎜🎜Avec le recul, je pense qu'une bonne "marque d'accentuation" devrait être laissée faire son propre travail et être utilisée pour marquer le texte pour l'accentuer. Je ne jouerai plus avec. 🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!