Home > Web Front-end > HTML Tutorial > Comparison of the differences between id and class in html css_html/css_WEB-ITnose

Comparison of the differences between id and class in html css_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:40:59
Original
1324 people have browsed it

When defining styles, sometimes the usage of id and class are confused, so I will explain it here:

The id and class attributes are two common attributes in web pages. They work together to make the entire page colorful. When we define a style for an element. You can use id or class.

1. When writing in a CSS style sheet, the prefix symbol ‘#’ should be added before the id selector, and the prefix symbol ‘.’ should be added before the class selector.

2. The id attribute can generally only be used once in a page, while class can be referenced multiple times.

3. ID is used as a tag of an element to distinguish different structures and contents, while class is a style that can be applied to any structure and content.

4. In terms of layout ideas, we generally adhere to this principle: id determines the structure and content of the page first, and then defines a style for it: on the contrary, class defines a type of style first, and then Apply class styles to different elements and content on the page as needed.

5. Currently, browsers can allow multiple IDs with the same attribute value to appear on the same page. Under normal circumstances, they can be displayed normally. However, when using JavaScript to control elements through IDs, errors will occur. .

6. In practical applications, class is more often used in text sections and page modifications, while id is more often used to implement grand layouts and design containing blocks, or styles of containing boxes.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template