css class and id
<!DOCTYPE html>
<html>
<style>
body{
margin: 0;
padding: 10px;
}
.a_1{
display: block;
width: 100px;
height: 50px;
overflow: hidden;
padding: 10px;
border: dashed;
margin: 10px;
background-image: url(img/1.jpg);
}
#a_1img{
width: 100%;
height: 100%;
}
.BgImg{
background-size:contain;
}
#BgImg{
background-size:contain;
}
#a_1{
display: block;
width: 100px;
height: 50px;
overflow: hidden;
padding: 10px;
border: dashed;
margin: 10px;
background-image: url(img/1.jpg);
}
</style>
<head>
<meta charset="{CHARSET}">
<title></title>
</head>
<body>
<div class="a_1 BgImg "<!--id="a_1 BgImg"--> >
<!--<img id="a_1img" src="img/1.jpg"/>-->
</div>
</body>
</html>
When using this attribute, we see that everything is normal. But let's try with id
<!DOCTYPE html>
<html>
<style>
body{
margin: 0;
padding: 10px;
}
.a_1{
display: block;
width: 100px;
height: 50px;
overflow: hidden;
padding: 10px;
border: dashed;
margin: 10px;
background-image: url(img/1.jpg);
}
#a_1img{
width: 100%;
height: 100%;
}
.BgImg{
background-size:contain;
}
#BgImg{
background-size:contain;
}
#a_1{
display: block;
width: 100px;
height: 50px;
overflow: hidden;
padding: 10px;
border: dashed;
margin: 10px;
background-image: url(img/1.jpg);
}
</style>
<head>
<meta charset="{CHARSET}">
<title></title>
</head>
<body>
<div id="a_1 BgImg"<!--class="a_1 BgImg "--> >
<!--<img id="a_1img" src="img/1.jpg"/>-->
</div>
</body>
</html>
Use id to include two, just like that!
Explain what? It means that each element of id has one and only one in the audience, and the # in style is the same, and the audience can only be given to one person. Two-way only! ! ! Otherwise, an error is reported, just like your ID, it’s impossible for two people to have the same ID number, right?
1. Syntax difference:
id corresponds to css with the style selector "#" (pound sign).
The class corresponding to css uses the style selector "." (enter a period in English half-width).
2. Difference in usage times:
id attribute can only be called by one element (CSS style named with "#" selector can only be used and called once in a page). In the same page, it can only be called once, which is represented by "#" in CSS.
The class tag can be used to be called by multiple elements (named with the "." selector style can be used multiple times in a page) is a class tag, which can be called countless times on the same page (unlimited), used in CSS "." means.
ID is like a person's ID card, used to identify this DIV, Class is like the clothes worn by a person, used to define the style of this DIV. Generally, a webpage does not have two or more divs with the same ID, but the Class can use the same Class for multiple DIVs.
3. Semantics and usage are different:
id is used as the label of the element to distinguish different structures and contents, while class is a style, which can be applied to any structure and content. In terms of layout ideas, generally adhere to the principle: id first determines the structure and content of the page, and then defines the style for it: On the contrary, class defines a type of style first, and then applies the class style to different types according to the needs of the page. Elements and content above.