How to use the class attribute of HTML span tag? Here is a detailed explanation of the class attribute-HTML Tutorial-php.cn

How to use the class attribute of HTML span tag? Here is a detailed explanation of the class attribute

寻∝梦

Release： 2018-08-28 13:54:35

Original

31445 people have browsed it

This article mainly tells you about some usage of the class attribute of the HTML span tag. This needs to be used in conjunction with the css style. Now I can talk a little bit about the basics of the css style, for those who have the basic knowledge. It's all easy. Let us take a look at this article now

First let’s take a look at the meaning of the class attribute of the HTML span tag:

span in English is span means, but in web page production it is a complete tag of html tag:

tag is used to combine inline elements in the document.

class is used to define the style of labels in HTML and can be reused. It can define the length, width, height, background color, etc. for different labels...

For example, , where main is the class name and is defined with "." in css

Look down for the development:

Here is one Example:

<p><span>some text.</span>some other text.</p>

Copy after login

The explanation of the example is here:

If you don't apply styles to span, the text in the span element will not have any visual distinction from other text. difference. Still, the span element in the example above adds extra structure to the p element.

You can apply id or class attributes to span, which can not only add appropriate semantics, but also facilitate the application of styles to span.

It is possible to apply either class or id attributes to the same element, but it is more common to apply only one of them. The main difference between the two is that class is used for groups of elements (similar elements, or can be understood as a certain type of elements), while id is used to identify individual and unique elements.

Tip: In fact, you may have noticed that some text on the W3School site is styled differently than other text. For example, "tips" are in bold orange. Although there are many ways to achieve this effect, our approach is: use the "hint" to use the span element, and then apply class to the parent element of the span element, that is, the p element, so that you can apply span to the child element of this class Corresponding style.

This is the code in HTML:

<p class="tip"><span>提示：</span>... ... ...</p>

Copy after login

This is the code in CSS:

p.tip span {
font-weight:bold;
color:#ff9955;
}

Copy after login

That’s it, a Simple CSS attributes, coupled with the application of span tags, can allow a tag to be applied to other tag elements. This is one of the benefits of CSS styles and is convenient to use.

Here is another complete class example of the HTML span tag:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>PHP中文网(php.cn)</title>
<style>
span.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<span class="intro">标题 1</span>
<p>段落。</p>
<p class="important">注意：这是一个很重要的段落。 :)</p>
</body>
</html>

Copy after login

As far as you can understand from the picture, this is also a very simple web page, with some CSS added Style, you can rectify the entire style. For example, change the font color to blue.

Just like the picture:

How to use the class attribute of HTML span tag? Here is a detailed explanation of the class attribute

Okay, the above is an introduction to the class attribute of the HTML span tag. If you have any questions, please ask below.

【Editor’s Recommendation】

How to write a relative path for the base tag in HTML? (Introduction to use included)

What is the usage of the src attribute of the HTML img tag? Analysis of specific usage methods (examples attached)

The above is the detailed content of How to use the class attribute of HTML span tag? Here is a detailed explanation of the class attribute. For more information, please follow other related articles on the PHP Chinese website!