Selectores Atributos CSS

Hace un par de días veíamos los pseudo-elementos y posibles usos que podíamos darle. Veamos hoy otros selectores muy poco usados, que pueden ayudarnos a mejorar imágenes y links simplemente usando y rellenando la etiqueta "title" en un enlace o una imagen.

Cuando insertamos una imagen o un enlace a nuestro blog desde Blogger el código que normalmente nos encontramos es

Enlace

<a href="URL ENLACE" title="" alt="">Nombre del enlace</a>

Imagen

<img src="URL ALOJAMIENTO IMAGEN" title="" alt=""/>

Enlace con imagen

<a href="URL ENLACE" title="" alt=""><img src="URL ALOJAMIENTO IMAGEN" title="" alt=""/></a>

Habitualmente si queremos darle estilo creamos una clase en nuestro CSS y se la aplicamos al enlace o a la imagen.

.imagen { border: 2px dashed #000000 } Le pondríamos un borde a la imagen.

.enlace { color: #cccccc;} El enlace seria de color gris.

Lo aplicaríamos

Enlace

<a class="enlace" href="URL ENLACE" title="" alt="">Nombre del enlace</a>

Imagen

<img class="imagen" src="URL ALOJAMIENTO IMAGEN" title="" alt=""/>

Esa seria la forma clásica pero podemos hacerlo de otra forma usando la etiqueta "title" y según el nombre que le asignemos podemos darle una apariencia u otra.

Para ello añadimos a nuestro CSS

Para actuar sobre cualquier enlace que tenga la etiqueta "title"

[title]{color:#cccccc;}

Para actuar según el nombre que le demos a la etiqueta

[title=azul] {color:#cccccc;}

Podemos crear varios

[title=azul] {color:#330099;}
[title=rojo] {color:#ff0000;}
[title=naranja] {color:#ff9900;}

Y lo asignaríamos

<a href="URL ENLACE" title="azul" alt="">Nombre del enlace</a>

Enlace 1
Enlace 2
Enlace 3

Para las imágenes seria lo mismo

[title=tipo1] {border: 2px solid #cccccc;}
[title=tipo2] {border: 1px dashed #000000;}
[title=tipo3] {border: 5px solid #cc0000; background: #ffffff; padding: 10px 10px 30px 10px;}

<img src="URL ALOJAMIENTO IMAGEN" title="tipo3" alt=""/>

Existen algunos más pero creo que esto es realmente útil si queremos darle diferentes aspectos de forma fácil a nuestras imágenes y enlaces.

11 noviembre 2009

CSS, Principiantes