Aquí dejo un ejemplo para poder estilizar los links de un sitio web haciendo que se vean pintorescos mediante el uso de pequeñas imágenes o iconos. La técnica empleada es muy simple, ya que se basa en el uso de CSS para agregar a la izquierda (o a la derecha, según como lo definas) de cada link que se encuentre en la página, un icono que identifique que tipo de contenido existe detras de ese enlace. De esta forma se podrán evitar sorpresas al saber con anticipación de que tipo de enlace se trata, si abrirá una nueva ventana o nos ofrecerá descargar un archivo.
Al usar definiciones de clases con CSS es posible determinar que links queremos reemplazar con iconos, e incluso que iconos usaremos en cada link, ya que solo se trata de usar la imágen correcta. De esta forma, cada aparición de un link de los definidos en el estilo, será reemplazado automáticamente por un link estilizado con su correspondiente iconito.
Esta es la forma en que se indica un Link interno del tipo Ancla para redireccionar a otra parte del sitio. Por ejemplo en los casos que se indica Volver Arriba.
Cuando estamos haciendo refrencia a un Link Externo que se abrirá en una nueva ventana lo indicamos de esta forma.
En el caso de tener uno de los famosos Mailto: para indicar que se abrirá Un nuevo mail con el cliente de correo predeterminado, usamos este iconito
Este es más fácil, descargue el Archivo PDF con la información solicitada. (Es un link de prueba, no existe el archivo)
Este es más fácil, descargue el Archivo de Word con la información solicitada. (Es un link de prueba, no existe el archivo)
Este es más fácil, descargue el Archivo de Excel con la información solicitada. (Es un link de prueba, no existe el archivo)
En el caso de contar con información que se muestra en una Ventana emergente, tambien podemos indicarlo mediante un icono.
Toda la magia se encuentra en la forma de definir el Selector Href usando una suerte de expresiones regulares propias de Css3. Entonces, se puede determinar, por ejemplo, que se aplique el estilo a un item que termine, empiece o contenga un valor específico.
Para especificar en que lugar del link vamos a buscar la coincidencia, se usan los siguientes valores:
Este uso del CSS no solo funcionara en Ie7 si se usa un tipo de DOCTYPE Strict.
Ademas, no funciona en Ie6 bajo ningun concepto (cuando terminara de morir el Ie6...)