Analysis of the difference between class and ID in CSS and its usage

This article mainly introduces the CSS in the class and ID differences and usage of the analysis, has a certain reference value, now share to everyone, the need for friends can refer to

When using the P CSS to make XHTML page pages, we often use class and ID to choose the CSS style attributes, then when to use class, and when to use the ID, the following details about class and ID basic properties and Usage

When we use the P CSS to make XHTML page pages, we often use class and ID to choose to invoke CSS style attributes. For beginners learning CSS, class and ID can be fuzzy, and they don't know when to use class, when to use IDs, and how they are used and restricted. Next we'll learn more about class and ID basic attributes and how to use them.

Class is called "Classes" in the program, and in CSS it is also called "Class". In a CSS style, in lowercase "dots" and "." To name such as:. Css5{Property: Property value, and in the HTML page class= "CSS5" to select the call, named Good CSS is called CSS selector. such as:. Css5{Property: property value;} selector in HTML call as "<p class=" CSS5 "> I am class example </p>" If you do not know how to reference CSS, then you can understand the following CSS reference.

and Class (Class) in the same HTML page can be called countless times the same class class, in this case can be in the corresponding page can be called countless times to select "Css5". This also means that class is typically used to invoke pre-configured properties in CSS, such as a pre-configured property such as ". Class01{Property: property value;} ", so that you can call a function like a page without repeating the configuration of a" class "property, and simply write a class selection, you can call anywhere in the same page to choose the same class class.

ID is the identity of the label, in the JS script will use the ID, when JS to modify the properties of a tag, JS will be the ID name as the label's unique identity to operate. That is, the ID is just the identity of the page element and is referenced by other element scripts. If there are two IDs in your page, the JS effect is more than a logical error, and you don't know which ID to change its tag properties. In CSS, the ID is not necessarily set for JS, but the same ID can only appear once in the page, and is unique. Although we may be able to learn p+css enthusiasts in a page to invoke the same ID multiple times but there is still no page chaos error, but we for the web and various standards we also have to follow the ID on a page unique. Avoid browser compatibility issues.

What is the use of the ID in the P CSS page?
Usually we start with "#" at the time of CSS style definition named ID name such as: #css5 {attribute: property value;} This is a bit like the definition of class, except that class is in lowercase. The first name is named, and the ID is defined with a "#" good start. What is the use of that ID? The ID usage in CSS is the same as class usage, except that class is changed to ID. As an example: in the CSS style definition id---#css5 {height:25px;width:200px;}, call ID---<p id= "css5" > I am ID example </p>.

Let's take a look at the complete example of class and ID:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
Next we analyze the above example: class= "Css5 css5_class" How is this? Here is the equivalent of calling the Class class CSS5 with Css5_class selected. class= "CSS5" id= "css5_id" Here is also the choice to call the Class class: Css5 and id:css5_id.

This page is based on CSS instances and class and ID respectively, I believe you can understand and differentiate them and flexible. Special note: When naming IDs and class classes, pay special attention to case, ID and class are very sensitive to case, preferably beginning with English, do not name the CSS class name in Chinese.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!