Shulou(Shulou.com)05/31 Report--

This article mainly explains "what is the function of text-emphasis attribute in css". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "what is the role of the text-emphasis attribute in css"?

Generally speaking, the pages we make are not for literary users, so we are less likely to come into contact with the "emphasis" symbol. If you are no stranger to word, you should know that there is a text setting in word, which is to set the "emphasis".

There is no word in the computer, so I searched one from Baidu. Anyway, this is probably the effect.

So the CSS attribute that this article will talk about is the property of this "emphasis". We can set the text "emphasis" style through the text-emphasis attribute. This is the abbreviation for text-emphasis-color and text-emphasis-style, that is, we can set the accent character style and color at the same time through text-emphasis, such as:

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

As for the effect we see in word, I don't know, anyway, on the web page, the emphasis we see can change not only the character style and color, but also the size and position.

Text-emphasis-style has several attribute values and can enter any character

Text-emphasis-color can use the color values used in regular web, such as rgba (), rgb () and so on.

If you want to reposition, you need an additional attribute, text-emphasis-position, which is similar to style and color, but not one of the abbreviations of text-emphasis. So for text-emphasis-position under normal circumstances, the positions we can control are the upper and lower directions, that is:

Text-emphasis-position: over

Text-emphasis-position: under

If you want to know more, you can refer to the specific introduction in MDN. I won't repeat it here. So, as mentioned above, let's modify the CSS section, like this:

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

Does it look a lot like the effect of text-decoration: underline; underlined text? Let's add another attribute to see the effect.

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

These two are different attributes, and there must be differences. The details are not detailed, and the main differences can also be seen in the documentation. It is important to mention that the text-decoration attribute value if the parent sets the underline style, then the child sets the overline, and two line styles will exist, even if the text-decoration-style value is changed.

In text-emphasis, when we change the value of the attribute, the result is different. At the same time, if we do not set the color value, the color of the emphasis will inherit the text color of the element itself. Because we can set the color value, we can also use transparent to set the element to transparent directly.

When it comes to inheritance, it is important to note that the text size of the "emphasis" is about half the size of the normal text.

Review the points mentioned earlier:

You can enter any character

If the color is not set, the color value of the element itself will be inherited, or it can be set to transparent.

The size of the "emphasis" is about half of the normal text.

Combined with these points, we can play like this.

There are some places where there is no "emphasis", some are blank or special characters, some are casually typed, some are intentional. The main reason is to see how the "emphasis" is displayed in some special character cases.

Only one character is displayed, whether it is a full-width or half-width character, or even an emoji special character

Display "emphasis" only on visible text characters

Then the code for this effect is:

Text content, a span element is the em ¥C element. Oh, ah...

So that's all for this article? No, there's one more thing I want to talk about. As you can see from the effect above, the emphasis is under or above the text, so line-height is no stranger to a normal text. So what will be the effect of adding line-height to the part with "emphasis"?

Line-height: 20px; after being added to p, there is no change; if you replace 20px with 60px, there is a change and the height is lost; then increase it a little bit, and the emphasis separates the upper and lower lines of the text.

On a whim, when the value of line-height is relatively small, there is no effect. Normally, when there is no text-emphasis, a smaller line-height will make multiple lines overlap, like this:

But now with text-emphasis, and will not overlap, it seems that a direct impact on the minimum value of line-height, we must ensure that the height between multiple lines in a specific value, looks like the size of 1em or so, in order to put less than half of the normal text font-size, and to maintain a certain spacing with the text content of the "emphasis".

Back to "what's the use of the unpopular text-emphasis? "on this topic. Yes, what's the use? apart from the normal indication that a certain part of the text is heavily marked, it doesn't seem to be of any use. Unless we re-use this "emphasis" feature to play, especially the line-height will be stretched to ensure that at least a little space around the 1em exists between multiple lines. So if we use a transparent color "emphasis", does it mean that this part of the text will never be superimposed?

Then combined with emoji or a messy combination of top and bottom, will you play a different sky?

In retrospect, ah, a good "emphasis", or let it do its own thing, used to mark the text to emphasize it, or not to play.

At this point, I believe you have a deeper understanding of "what is the role of the text-emphasis attribute in css". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.