Ir al contenido principal

Atributos avanzados en CSS para diferentes tipo de Enlaces

Con CSS se puede hacer que cada link (vínculo o enlace) tenga un color distinto o cualquier regla de estilo que se desee, por ejemplo los enlaces a otras páginas de nuestro sitio de color rojo, los vínculos a enlaces externos de color verde y los links a imágenes o documentos de color azul, veamos como se hace esto:

 a[href*="guiaplaza.com"] {color:#CD3300;}


En primer lugar veamos que significa:

a    en css ya sabemos que dará estilo a los selectores <a .....>texto</a> del html, normalmente lo encontraríamos como    a{color:#cc3300}

[href*="guiaplaza.com" ]  esto si es nuevo, se trata de reglas avanzadas en donde los selectores de atributos se hacen muy útiles.

Hay 3 variaciones:

*   ejecuta la regla si la cadema guiaplaza.com está presente dentro del href.
$   ejecuta la regla si la cadema guiaplaza.com termina dentro del href.
^   ejecuta la regla si la cadema guiaplaza.com se inicia dentro del href.

Con está configuración podemos hacer infinitas variaciones como:

- Configurar una regla de estilos (css) para los enlaces a imagenes .jpg .gif . png

a[href$="jpg"] {color: blue;}
a[href$="gif"] {color: red;}
a[href$="png"] {color: green;}

- Aplicar reglas a diferentes tipos de documentos:

a[href$="pdt"] {color: red;}
a[href$="doc"] {color: green;}
a[href$="xls"] {color: blue;}
a[href$="ppt"] {color: yellow;}

Comentarios

Entradas populares de este blog

Superponer una imagen sobre otra con CSS

El otro día me encontré con la necesidad de superponer una imagen sobre otra, mi aplicación debía mostrar una imagen y luego encima colocarle un marco quedando superpuesto.

Claro está que la imagen superpuesta como un marco debe ser trasparente en su interior para poder mostrar la imagen que va debajo.

Hay dos maneras de hacerlo, una poniendo el estilo en un archivo externo o incrustado en el <head> de la página web o sino agregándolo en el mismo DIV.

<div style="position:relative"><img src="imagen_debajo.jpg" width="268" hspace="16" height="268" vspace="16" /><div style="position:absolute; top:0; left:0;"><a href="http://www.guiaplaza.com"><img border="0"  src="marco_chistes.png" width="300" height="300" /></a></div></div>
Si desean la opción más Larga es la siguiente:


<html>
<head>
<title>Ejemp…

Script para buscar palabras o textos en una página (html) con Jquery

Aquí les muestro la solución que recientemente encontré para colocar un buscador dentro de una página web para que encuentre textos o palabras.

El script funciona con Jquery y un pequeño Javascript que busca en el html y resalta (en amarillo) los textos que va encontrando según tu vayas ingresando las letras.

El color de fondo puede variarse de acuerdo al tema y colores de tu página web. Es además un script moderno  (2012) que trabaja con todos los navegadores como el Chrome, IE9, Safari, etc.

¿Ganas dinero en Facebook con Página, Grupo, Comunidad, etc?

Muchas páginas, comunidades, notas, grupos y foros creados dentro de Facebook podrían ser una fuente grandiosa de ingresos económicos para sus creadores.... debido a que estas le generan mucho dinero en publicidad a esta red social.

Algunos webmasters ya saben lo que es ganar dinero trabajando en internet con una página web como un blog, foro o sitio temático, para los que ya reciben más de €100 euros al mes, volver a cero es definitivamente impensable.