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

1 comentaron:

Hola!!! usted hace mucha falta, querido!:)Gracias por el tutorial!
besos

MamaNunes

Publicar un comentario en la entrada

"No dudes en preguntar, intentaré ayudarte. Tus comentarios son importantes y si te gustó esta entrada, no olvides suscribirte a mi feed."

Algunos consejos.

- No escribas en mayúsculas, en un blog significa "gritar".

- Esto es un blog, no un móvil, por lo tanto no escribas tipo sms.

- No hago intercambio de links.

- Evita comentarios tipo "Hola, gran blog mi blog es..."

- Ten habilitado tu perfil y podré visitarte.

- Antes de preguntar asegúrate de que no se haya contestado o explicado antes, usa el buscador.

Siento deciros que si no se siguen, los comentarios serán eliminados.

Entradas populares

Archivo del blog

Seguidores