id y clase css
<!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>
Al usar este atributo, vemos que todo es normal. Pero intentemos con 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 para incluir dos, ¡así como así!
¿Explica que? Significa que cada elemento de id tiene uno y solo uno en la audiencia, y el # en estilo es el mismo, y la audiencia solo se puede dar a una persona. ¡Solo bidireccional! ! ! De lo contrario, se informa un error, al igual que su identificación, es imposible que dos personas tengan el mismo número de identificación, ¿verdad?
1. Diferencia de sintaxis:
id corresponde a css con el selector de estilo "#" (signo de almohadilla).
La clase correspondiente a css usa el selector de estilo "." (Ingrese un punto en inglés de medio ancho).
2. Diferencia en los tiempos de uso: el
atributo id solo puede ser llamado por un elemento (el estilo CSS nombrado con el selector "#" solo se puede usar y llamar una vez en una página). En la misma página, solo se puede llamar una vez, lo que se indica con "#" en CSS.
La etiqueta de clase se puede usar para ser llamada por varios elementos (nombrados con el estilo de selector "." Se puede usar varias veces en una página) es una etiqueta de clase, que se puede llamar innumerables veces en la misma página (ilimitado), se usa en CSS "." significa.
La identificación es como la tarjeta de identificación de una persona, que se usa para identificar este DIV, la clase es como la ropa que usa una persona, que se usa para definir el estilo de este DIV. Generalmente, una página web no tiene dos o más divs con el mismo ID, pero la clase puede usar la misma clase para múltiples DIV.
3. La semántica y el uso son diferentes:
id se usa como la etiqueta del elemento para distinguir diferentes estructuras y contenidos, mientras que la clase es un estilo, que se puede aplicar a cualquier estructura y contenido. En términos de ideas de diseño, generalmente se adhiere al principio: id primero determina la estructura y el contenido de la página, y luego define el estilo para ella: por el contrario, class define un tipo de estilo primero y luego aplica el estilo de clase a diferentes tipos según sea necesario Elementos y contenido anteriores.