lunes, 18 de abril de 2011

Vagabundia

Vagabundia


El atributo border=0

Posted: 17 Apr 2011 08:00 PM PDT

¿Para qué usamos border="0" en las imágenes?

La teoría es la siguiente: por defecto, los navegadores crean un borde automático en toda etiqueta IMG que sea un enlace; ese borde tiene un pixel de ancho y es del mismo color que el texto de los enlaces y por lo tanto, si no queremos que se muestre ese borde, debenos agregar ese atributo.

Cuando subimos una imagen a Blogger, el código siempre es un enlace que permite abrir la imagen original y si bien nos muestra un código "excesivo", de todos modos, allí está el famoso atributo:
<div class="separator" style="clear: both; text-align: center;">   <a href="http://......./s1600/........" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">     <img border="0" height="xxx" src="http://......./sxxx/........" width="xxx" />   </a> </div>

Entonces, ¿basta que pongamos border="0" para que una imagen no tenga borde?

Si pero no; esta es la misma imagen con el mismo código y sin embargo, tiene un borde:


¿Por que ocurre eso? Porque lentamente, los atributos de las etiquetas van siendo reemplazdos por el CSS y esto no es una moda; las regla de estilo, tienen prioridad sobre los atributos así que si agregamos una regla que diga que los enlaces tengan borde, el border="0" será ignorado.

En Blogger, todo eso suele estar definido al inicio; por ejemplo, en una plantilla minima dice esto:
a:link {   color:$linkcolor;   text-decoration:none; } a:visited {   color:$visitedlinkcolor;   text-decoration:none; } a:hover {   color:$titlecolor;   text-decoration:underline; } a img {   border-width:0; }
Y por supuesto, podemos modificarlo como se nos ocurra:
a:link, a:visited {   color: #FF0;   outline: none;   text-decoration:none; } a:hover {   color: #F0F;   outline: none;   text-decoration:none; } a img {   border: none; }
o establecer reglas específicas para las imágenes de las entradas
.post img {   border:4px outset #940f04 ;   padding:4px; }
o ya que Blogger agrega una clase, podemos usarla:
.separator {   ....... } .separator img {   ....... } .separator img:hover {   ....... }
Algo similar ocurre con otros atributos como width y height.

Usando el mismo código agregado por Blogger podemos crear reglas que lo modifiquen y estas reglas de estilo, tendrán prioridad sobre los atributos:
.separator img {   background-color: #EEE;   border: 5px solid #ABC;   height: 100px;   outline: 1px solid #DDD;   padding: 5px;   width: 100px; }

No hay comentarios:

Publicar un comentario

Correo Vaishnava

Archivo del blog