oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso CSS - Lección 7: Atributos "class" e "id"
¿Cómo podemos hacer para que un conjunto de enlaces sean diferentes al resto de los enlaces de la página?¿Cómo puedo poner a un encabezado h1 un color diferente al resto de los encabezados h1 de mi sitio web? Pues todo esto lo podrás resolver con tu hoja de estilos a través de los atributos class e id.
Agrupación de elementos con el atributo class
Imaginate que estamos creando una página de venta de ropa y tenemos dos grupos de enlaces, el primer grupo de enlaces tratará de ropa de invierno y el segundo grupo de enlaces de ropa de primavera. El código HTML quedaría de la siguiente manera:
<h1>Ropa de invierno</h1>
<ul>
<li><a href="pantinv.html">Pantalones</a></li>
<li><a href="jerinv.html">Jerseys</a></li>
<li><a href="falinv.html">Faldas</a></li>
</ul>
<h1>Ropa de primavera</h1>
<ul>
<li><a href="pantpri.html">Pantalones</a></li>
<li><a href="jerpri.html">Jerseys</a></li>
<li><a href="falpri.html">Faldas</a></li>
</ul>
Pero queremos darle un toque de elegancia a nuestra web y como la ropa de invierno es más "fria y triste" queremos que esos enlaces se muestren en color gris, y los enlaces de la ropa de primavera se muestren en color verde claro.
Para conseguir eso primero tenemos que dividir los enlaces en dos categorías, y lo haremos asignando una clase para cada grupo de enlaces usando el atributo class:
<h1>Ropa de invierno</h1>
<ul>
<li><a href="pantinv.html" class="ropainvierno">Pantalones</a></li>
<li><a href="jerinv.html" class="ropainvierno">Jerseys</a></li>
<li><a href="falinv.html" class="ropainvierno">Faldas</a></li>
</ul>
<h1>Ropa de primavera</h1>
<ul>
<li><a href="pantpri.html" class="ropaprimavera">Pantalones</a></li>
<li><a href="jerpri.html" class="ropaprimavera">Jerseys</a></li>
<li><a href="falpri.html" class="ropaprimavera">Faldas</a></li>
</ul>
Una vez que hemos introducido el atributo "class" en nuestro código HTML ya podemos meterle mano a nuestra hoja de estilos CSS, quedando el código CSS de la siguiente manera:
a {color: #ff0000;}
a.ropainvierno {color: #848484;}
a.ropaprimavera {color: #81F781;}
Como vemos en el ejemplo todos los enlaces de la página serían de color rojo (#ff0000) menos el conjunto de enlaces "ropa de invierno" que se visualizarían de color gris (#848484) y el conjunto de enlaces de "ropa de primavera" que se visualizarían en color verde (#81F781).
Ahora bien, puede que de todos esos articulos nos hayamos quedado sin stock de uno de ellos y queremos poner el enlace en color azul. Esto lo haremos con el atributo id.
Identificación de un elemento con el atributo id
La diferencia entre el atributo "id" y "class" es que no pueden existir dos elementos dentro del mismo documento con el mismo id. De haber más de uno ya deberíamos usar el atributo class.
El siguiente ejemplo muestra el código HTML:
<h1>Ropa de invierno</h1>
<ul>
<li><a href="pantinv.html" class="ropainvierno">Pantalones</a></li>
<li><a href="jerinv.html" id="sinstock">Jerseys</a></li>
<li><a href="falinv.html" class="ropainvierno">Faldas</a></li>
</ul>
<h1>Ropa de primavera</h1>
<ul>
<li><a href="pantpri.html" class="ropaprimavera">Pantalones</a></li>
<li><a href="jerpri.html" class="ropaprimavera">Jerseys</a></li>
<li><a href="falpri.html" class="ropaprimavera">Faldas</a></li>
</ul>
Como ves al enlace de "Jerseys" de invierno le hemos insertado el atributo id puesto que sólo queremos hacer referencia a ese enlace para mostrarle de color azul. Veamos que tendriamos que poner ahora en nuesta hoja de estilos CSS:
a {color: #ff0000;}
a.ropainvierno{color: #848484;}
a.ropaprimavera {color: #81F781;}
#sinstock {color: #0000FF;}
Ahora los enlaces de la página se mostrarían en color rojo menos los del grupo "primavera" (verdes), los del grupo "invierno" (grises) y dentro del grupo "invierno" el enlace "Jerseys" (en azul).
Todo esto que has aprendido en esta lección lo podrías aplicar por ejemplo a encabezados h1, h2, párrafos, etc... .
Ya se que esta lección es un poquito más complicado de entender, pero si vuelves a leerla con detenimiento verás que todo tiene su lógica.
Pasemos a la siguiente lección!!!
Quiero aprender más!!!
- Avanzar a Lección 8: Elementos "span" y "div"
- Retroceder a Lección 6: Enlaces
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®