Home > Article > Web Front-end > Analysis of the difference and usage between class and id in CSS
Analysis of the difference and usage between class and id in CSS
- 不言Original
- 2018-06-15 09:23:011860browse
This article mainly introduces the analysis of the difference and usage of class and id in CSS. It has certain reference value. Now I share it with everyone. Friends in need can refer to it.
Made with p CSS In Xhtml web pages, class and id are often used to choose to call CSS style attributes. So when should we use class and when should we use id? Let’s learn more about the basic attributes and usage of CLASS and ID
We usually use When using p CSS to create Xhtml web pages, class and id are often used to select and call CSS style attributes. For novices learning CSS, class and id may be vague. At the same time, they don’t know when to use class and when to use id, and what their usage and restrictions are. Next, let’s learn more about the basic properties and usage of CLASS and ID.
Class is called "class" in programs, and it is also called "class" in written language in CSS. In the CSS style, it is named with lowercase "dot" and "." such as: .css5{attribute: attribute value;}, and in the html page, class="css5" is used to select the call. The named CSS is also called css selector. For example: .css5{attribute: attribute value;} The selector is called in html as "634316e925df670a1efce184bcd76f27I am a class example94b3e26ee717c64999d7867364b1b4a3" If you don't know how to quote CSS, you can learn about it css reference.
And class can call the same class multiple times in the same HTML page. In this example, you can call "css5" multiple times in the corresponding web page. This also shows that class is generally used to call pre-configured attributes in CSS. For example, if there is a pre-configured attribute like ".class01{attribute: attribute value;}" here, it can be used like calling a function without the need for a A "class" attribute is repeatedly configured in the web page, and you only need to write a class selection, and you can call and select the same CLASS class anywhere on the same page.
ID represents the identity of the tag, and id is used in JS scripts. When JS wants to modify the attributes of a tag, JS will use the id name as the unique identifier of the tag. In other words, the ID is just the identifier of the page element, which can be referenced by other element scripts, etc. If there are two IDs in your page, the JS effect feature will have a logic error and you will not know which ID to use to change its tag attributes. The ID in CSS is not necessarily set for JS, but the same ID can only appear once on the page and is unique. Although we may just learn that CSS enthusiasts can call the same ID multiple times on a page and still not have a page confusion error, but for the sake of W3C and various standards, we must also follow the uniqueness of the ID in a page. To avoid browser compatibility issues.
p How to use the ID in the css page?
Usually when we define CSS styles, we name the id name starting with "#", such as: #css5{Attribute: attribute value;} This is also a bit like the definition of class, except that class is named starting with a lowercase period "." , and ID is defined starting with "#". How to use id? The usage of ID in CSS is the same as the usage of class, just replace class with id. For example: define ID in CSS style --- #css5{height:25px;width: 200px;}, call ID --- 7125bcc5ac010f7937a4a183e9feac26I am ID example94b3e26ee717c64999d7867364b1b4a3.
Next let’s take a look at the complete CLASS and ID examples:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>p CSS中CLASS与ID实例 - -p+CSS-www.pcss5.com</title>
<style>
.css5{ width:100px; height:100px; border:1px solid #000; float:left; }
.css5_class{ background:#FFF;} /* 背景白色 */
#css5_id{ background:#FF0000;} /* 背景红色 */
</style>
</head>
<body>
<p class="css5 css5_class">我在浏览器下浏览，内容背景将是白色</p>
<p class="css5" id="css5_id">我在浏览器下浏览，内容背景将是红色</p>
</body>
</html>Next let’s analyze the above examples: class="css5 css5_class" Why is this like this? This is equivalent to calling the selected class class css5 and css5_class. class="css5" id="css5_id" Here we also choose to call the class class :css5 and id :css5_id.
This page explains CSS instances, CLASS classes and IDs respectively. I believe you will be able to deeply understand and distinguish them and be flexible. Special note: Pay special attention to case when naming id and class. ID and class are very case-sensitive. It is best to start with English. Do not use Chinese to name CSS class names.
The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
How to control the display and hiding of DIV layers with CSS
How to stretch the background image using css Fill to avoid repeated display of
The above is the detailed content of Analysis of the difference and usage between class and id in CSS. For more information, please follow other related articles on the PHP Chinese website!