Voy a suponer que son iguales y se pueden utilizar indistintamente.
Pero se diferencian en:
1 – La sintaxis del selector id utiliza # como prefijo, y class utiliza . como prefijo del nombre de la regla CSS
2 – El valor del atributo class no identifica al elemento que lo contiene, lo que hace es asociar los valores del estilo al elemento. Con class podemos poner varios atributos, y se puede repetir cuantas veces sea necesario
incluso podemos aplicarlo a distintos tags. Un font:31px; es aplicable mediante class a un <h1> y a un <p> por ejemplo…
3- El atributo id identifica de forma única a un elemento dentro de un documento HTML.
El valor del atributo id de un elemento no puede repetirse en ningún otro atributo id del mismo documento.
Que me lio
id para identificar algo único, cabecera, menú, pie, cosas que no van a cambiar, que pertenecen a la estructura de la página.
class para elementos html que varían, tamaño, color, tipo de fuente y al mismo tiempo puedo mezclar.
Un ejemplo puede ser: (Es difícil de entender, encontré en la nube páginas muy buenas y no entendí nada, no queda mas remedio que pasar a la practica y razonar )
Copiamos en un editor lo siguiente, llamado class index.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<HTML>
<head>
<style type=”text/css”>
@import url(‘class estilo.css’);
@import url(‘class horizontal.css’);
</style>
</head>
<div class=’sombra’>
<div class=’cuerpo’>
<div class=’cabecera’>
<p id=’titulo’>POCO SENTIDO</p>
</div>
<div id=’menuhor’>
<div id=’divmenu’>
<ul>
<li>POCO SENTIDO</li>
<li><p>poco dentido</p></li>
</ul>
</div>
</div>
</div>
<div>
<p id=”titulo fuente”>mira el codigo fuente,no funciona el id</p>
<p>es lo mismo que arriba</p>
<p id=”titulo”>mira el codigo fuente, si funciona id</p><br /><br /><br /><br /><br />
<p class=’rojo’>POCO SENTIDO que mal se coloca un class debajo de un id</p><br />
<p>POCO SENTIDO</p><br />
<P>POCO SENTIDO</p><br />
<p>POCO SENTIDO</P><br />
<p>Versión <script> document.write(document.lastModified) </script>®</p>
</div>
<br /> <br />
</div> <!– cuerpo –>
</div> <!– sombra –>
</BODY>
</HTML>
Después copiamos en un editor de texto lo siguiente llamado class estilo.css
body{
background-color: #fff;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.sombra {
margin-top: 0;
margin-left: auto;
margin-bottom: 0;
margin-right: auto;
width: 900px;
-moz-box-shadow: -5px 5px 8px #818181;
-webkit-box-shadow: -5px 5px 8px #818181;
}
.cuerpo {
margin-top: 0;
margin-left: auto;
margin-bottom: 0;
margin-right: auto;
background-color: #f1f1f1;
font-size: 18px;
color: #3a3a3a;
-moz-box-shadow: -5px 5px 8px #818181;
-webkit-box-shadow: -5px 5px 8px #818181;
}
.cabecera {
margin: 0 0 0 0;
width: 100%;
height: 100px;
background-color: #f1f1f1;
}
#titulo
{
float:left;
padding: 1px 10px;
color:black;
font-size: 60px;
margin-top: 0px;
margin-bottom:0px;
}
#fuente {font-size: 50px;}
.menuhor {
margin: 0 0 0 0;
width: 100%;
height: 25px;
background-color: white;
}
.texto {
margin: 0 0 0 0;
width: 890px;
background-color: #f1f1f1;
padding: 5px 5px 5px 5px;
font-size: 14px;
color: #3a3a3a;
}
.cursiva {font-style: italic;}
.rojo {font-weight: bold; color: red;}
.fuente {font-size:50px;}
Y por ultimo si tenemos paciencia algo llamado class horizontal.css
/* menu sencillito de todo basado en listas
solo juega con los colores para remarcar las opciones
seleccionadas
*/
#divmenu ul
{
margin: 0;
padding: 0;
margin-bottom: 1em;
float: left;
font: bold 100% Tahoma;
width: 100%;
background-color: white;
}
* html #divmenu ul
{
width: 99%;
}
#divmenu ul li
{
display: inline;
}
#divmenu ul li a
{
float: left;
color: #000;
padding: 2px 12px;
text-decoration: none;
}
#divmenu ul li a:hover /* cuando se pasa con el raton cambia fondo y color de texto */
{
color: #fff;
background-color: #3a3a3a;
}
Y a razonar.
javierolas
Valor
