CSS Summary: differences between SPAN, DIV, Class, and ID

Source: Internet
Author: User

Difference between SPAN and DIV

The difference between SPAN and DIV is that division is a block-level element that can contain paragraphs, titles, tables, and even chapters, summaries, and remarks. While SPAN is an element in the row, it does not wrap the line before and after the SPAN. It has no structural meaning and is purely an application style. When other elements in the row are not appropriate, you can use SPAN.

<Span> the SPAN tag has an important and practical feature, that is, it does nothing, </span> <span> its sole purpose is to focus on other elements in your HTML code, so that you can specify styles for them. In this example, the </span> <span> identifier allows you to divide a paragraph into different parts. </Span>

<Div> A similar identifier is used to create a logical part in an HTML file. </Div> <div> but unlike SPAN, it works at the text block level, </div> <div> it introduces line separation before and after the HTML elements it contains. </Div>

------------------------------------------------------------

Differences between CLASS and ID

When a style table defines a style, you can define the id or class.

1. When writing in the CSS file, the ID is prefixed with "#"; the CLASS uses "."

2. id a page can only be used once;

Class can be referenced multiple times.

3. ID is a label used to distinguish different structures and content, just like a name. If two people in a room have the same name, confusion will occur;

A class is a style that can be embedded in any structure or content, just like a dress;

4. The concept is different:

Id is to first find the structure/content, and then define the style;

Class is to define a style first, and then set it to multiple structures/content.

Currently, browsers can also use multiple identical IDs, which can be normally displayed. However, an error occurs when you need to use JavaScript to control the div through ID.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.