Junto al uso de clases, tenemos el uso de id’s, que en su definición más básica apuntan a cumplir la misma funcionalidad que las clases, es decir, definir el estilo a usar en una etiqueta HTML. La gran diferencia radica en la frecuencia de uso de cada una; veámoslo por separado en términos comparativos:
- En el caso de las clases, las podemos utilizar en todas las etiquetas que quisiéramos, sin importar número o lugar;
- por su parte, y especificando la diferencia fundamental en la definición de un estilo por medio de Id con respecto a las clases, es que solo podemos utilizar ese estilo en una sola etiqueta sin posibilidad de repetir, ya que todos los Id que se definen en una página HTML deben ser distintos.
Si usas un estilo de id, restringes las reglas de estilo a un bloque o elemento concreto. Si usas un estilo de class, aplicas las reglas de estilo a una determinada clase de bloques y elementos.
Pero.. ¿Una etiqueta? ¿Una sola?, entonces nos preguntamos ¿Cuál es la gracia?, bueno, lo explicamos. Por convenciones y estándares, el uso correcto de CSS para estilizar nuestros sitios implica el uso de clases e id’s para aplicar en las etiquetas, por lo que siempre es bueno enfocarse en usarlos para todo lo que podamos.
Si, estamos claros con eso, pero ¿por qué no usar siempre clases?. Principalmente porque en muchas ocasiones querremos definir un estilo único para un solo espacio de nuestro sitio Web y que no se replique ni siquiera por error en otro lado, para eso lo mejor es el uso de Id’s, ya que lo utilizaremos en la etiqueta que deseamos y nunca más se usará, al menos en la misma página.
Definición
La definición de usos de id’s es tremendamente sencilla y muy similar al uso de clases que veíamos en el número anterior. Si para definir las clases solo dábamos un nombre al estilo y le anteponíamos un punto, para las id’s hacemos algo similar, pero anteponiendo un símbolo #, de manera que la sintaxis queda definida de la forma siguiente:
#elemento: { propiedad: valor; }
Aplicando esa sintaxis a una etiqueta HTML, resulta lo siguiente:
#cabecera {
font-family:Times New Roman;
font-size:30px;
text-align:center;
color:#0000ff;
background-color:#bbbbbb;
}
Es decir, utilizamos el carácter numeral (#) para indicar que se trata de un estilo de tipo Id.
Luego, sólo una etiqueta HTML dentro de nuestro documento puede definir un estilo de este tipo:
<div id="cabecera">
Hay que tener en cuenta que sólo una marca puede definir la propiedad id con el valor de cabecera.
Los dos archivos completos del ejemplo entonces quedan (pagina1.html):
<!DOCTYPE html> <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="cabecera"> <h1>Título de la cabecera</h1> </div> </body> </html>
Y el archivo de estilos (estilos.css) es:
#cabecera { font-family:Times New Roman; font-size:30px; text-align:center; color:#0000ff; background-color:#bbbbbb; }
Ahora para efectos pedagógicos, y de afianzar conceptos, llevemos a la práctica la diferencia de id respecto a las clases, que previamente hemos formulado en párrafos anteriores:
Definiendo una clase:
.uno
{
font-family:Arial;
color:#ff0000;
}
Definiendo un id:
#uno
{
font-family: Arial;
color: #ff0000;
}
Y finalmente como lo usaríamos en nuestro HTML, comparando con el uso de clases:
Uso de un estilo definido en clase: <h1 style=”uno”>Texto ejemplo</h1> Uso de un estilo definido en id: <h1 id=”uno”>Texto ejemplo</h1>
Como podemos ver, el uso es bastante similar en los 2 casos, recordando que la diferencia es que la segunda etiqueta, la que usa id, se adjudica el uso exclusivo de ese estilo.
No hay comentarios.:
Publicar un comentario
Nota: sólo los miembros de este blog pueden publicar comentarios.