Referencia con "id" y "class"
Almacenar todos nuestros estilos en un archivo externo e insertar este archivo dentro de
cada documento que lo necesite es muy conveniente, sin embargo no podremos hacerlo
sin buenos mecanismos que nos ayuden a establecer una específica relación entre estos
estilos y los elementos del documento que van a ser afectados.
Cuando hablábamos sobre cómo incluir estilos en el documento, mostramos una de las
técnicas utilizadas a menudo en CSS para referenciar elementos HTML.
Existen varios métodos para seleccionar cuáles elementos HTML serán afectados por las reglas CSS:
Existen varios métodos para seleccionar cuáles elementos HTML serán afectados por las reglas CSS:
- Referencia por la palabra clave del elemento
- Referencia por el atributo id
- Referencia por el atributo class
Referencia por Palabra Clave del Elemento
Al declarar las reglas CSS utilizando la palabra clave del elemento afectamos cada
elemento de la misma clase en el documento. Por ejemplo, la siguiente regla cambiará los
estilos de todos los elementos <p>.
p { font-size: 20px }
Todos los textos envueltos en etiquetas <p> tendrán el tamaño de 20 pixeles.
Por supuesto, lo mismo funcionará para cualquier otro elemento HTML. Si
especificamos la palabra clave span en lugar de p, por ejemplo, cada texto entre etiquetas
tendrá un tamaño de 20 pixeles.
¿Pero qué ocurre si solo necesitamos referenciar una etiqueta específica?, ¿Debemos usar nuevamente el atributo style dentro de esta etiqueta? La respuesta es No.
Como aprendimos anteriormente, el método de "Estilos en Línea" (usando el atributo style dentro de etiquetas HTML) es una técnica en desuso y debería ser evitada. Para seleccionar un elemento HTML específico desde las reglas de nuestro archivo CSS, podemos usar dos atributos diferentes: id y class.
Referenciando con el atributo id
El atributo id es como un nombre que identifica al elemento. Esto significa que el valor de
este atributo no puede ser duplicado. Este nombre debe ser único en todo el documento.
Para referenciar un elemento en particular usando el atributo id desde nuestro
archivo CSS la regla debe ser declarada con el símbolo # al frente del valor que usamos
para identificar el elemento:
#texto1 { font-size: 20px }El siguiente estilo está en un archivo css externo, o en la cabecera del documento dentro de las etiquetas <head>.
La especificación del "id" en el documento html sería:
<!DOCTYPE html><html lang="es"><head><title>Este texto es el título del documento</title><link rel="stylesheet" href="misestilos.css"></head><body><p id="texto1">Mi texto</p></body></html>
El resultado de este procedimiento es que cada vez que hacemos una referencia
usando el identificador texto1 en nuestro archivo CSS, el elemento con ese valor de id será modificado, pero el resto de los elementos, o cualquier otro elemento en el
mismo documento, no serán afectados.
Esta es una forma extremadamente específica de referenciar un elemento y es
normalmente utilizada para elementos más generales, como etiquetas estructurales. El
atributo id y su especificidad es de hecho más apropiado para referencias en Javascript
Referenciando con el atributo class
La mayoría del tiempo, en lugar de utilizar el atributo id para propósitos de estilos es
mejor utilizar class. Este atributo es más flexible y puede ser asignado a cada elemento
HTML en el documento que comparte un diseño similar:
.texto1 { font-size: 20px }Para trabajar con el atributo class, debemos declarar la regla CSS con un punto antes del nombre. La ventaja de este método es que insertar el atributo class con el valor texto1 será suficiente para asignar estos estilos a cualquier elemento que queramos
<!DOCTYPE html><html lang="es"><head><title>Este texto es el título del documento</title><link rel="stylesheet" href="misestilos.css"></head><body><p class="texto1">Mi texto</p><p class="texto1">Mi texto</p><p>Mi texto</p></body></html>
Los elementos en las primeras dos líneas dentro del cuerpo del código en el código anterior, tienen el atributo class con el valor texto1. Como dijimos previamente, la
misma regla puede ser aplicada a diferentes elementos en el mismo documento. Por lo
tanto, estos dos primeros elementos comparten la misma regla el último elemento conserva los estilos por defecto
otorgados por el navegador.
Existen otras formas mas complejas para referenciar estilos de CSS a elementos de HTML, las cuales veremos mas adelante.
Por el momento, por mi parte es todo.
Recuerden Compartir y Darle
Hasta la Próxima
No hay comentarios:
Publicar un comentario