Hay muchas muestras de css para diseñar el color de los enlaces.estilos de color de css link mejor práctica
html5boilerplate.com ofrece dicho código CSS para el enlace:
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
¿Es lo suficientemente bueno para la mayoría de los casos?
¿O tal vez exista un código css mejor para diseñar el color de los enlaces?
Eso es definitivamente será suficiente en la mayoría de los casos.
sólo tener en cuenta que el orden correcto de los estilos de los enlaces es:
a:link { color: #c00 } /* unvisited links */
a:visited { color: #0c0 } /* visited links */
a:hover { color: #00c } /* user hovers */
a:active { color: #ccc } /* active links */
El outline puede tener un aspecto "feo" para usted, pero eso es una característica de accesibilidad muy importante. Si elimina eso, asegúrese de proporcionar una forma alternativa de distinguir correctamente el elemento actual (fuente más grande/más audaz, fondo de alto contraste, etc.)
vea la diferencia entre los selectores 'a' y' a: link' http://stackoverflow.com/questions/2638229/css-alink-vs-just-a-without-the-link-part –
Si quiere estar seguro de que está diseñando enlaces (y no los anclajes que no son enlaces), debe usar a:link en lugar de a.
Y podría agregar a:active al final. Aquí tienes un tutorial.
lo encuentro siempre es bueno agregar
un esquema {: ninguno; }
ya que algunos navegadores añadir contornos molestos a los enlaces al hacer clic en ellos
Por favor no * solo * haz eso. El ouline está aquí por razones de accesibilidad. Si lo quita, reemplácelo con algo más. Ver http://www.outlinenone.com/ – SandRock
Gracias por abrir mis ojos a esto. Siempre lo hice por motivos de diseño. –
Siempre reinicio configuraciones que pueden ser diferentes entre los navegadores.
También me gusta etiquetar los enlaces a sitios web externos de manera diferente, agregando una imagen (similar a la de la wikipedia).
a,
a:link,
a:active,
a:visited,
a:hover {
color: #d30;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Links to external websites */
a.external:before {
content: url(./pics/external.png);
}
Si elimina el subrayado predeterminado puede ser imposible distinguir los enlaces del resto del texto por aquellos que son daltónicos o cuando se utiliza una pantalla monocromática (como un dispositivo E Ink). – tomasz86
@ tomasz86: buen punto. Pero: no conozco un sitio web que destaque enlaces. Probablemente porque hace que los textos (con muchos enlaces) sean difíciles de leer. Cuando estaba más interesado en la accesibilidad, leí que las personas que tienen problemas con los colores aplican sus propias hojas de estilo a los sitios web. Es por eso que decidí hacer sitios web accesibles para la mayoría de las personas. Aquellos que necesitan los enlaces subrayados (probablemente) aplicarán sus propios estilos de todos modos. ¿Cuál es tu experiencia? –
El sitio web del gobierno del Reino Unido (https://gov.uk) tiene enlaces subrayados. En cuanto al uso de hojas de estilo personalizadas, creo que puede ser útil, pero solo si está utilizando su computadora de escritorio/portátil privada. Si necesita confiar en dispositivos móviles o computadoras públicas, etc., lo más probable es que se vea forzado a ver esos sitios web con sus estilos predeterminados. Por cierto, agregar 'a: focus' a' a: hover {text-decoration: underline;} 'en el código anterior sería útil para los usuarios del teclado. – tomasz86
No quite nunca ese perfil, o al menos elimínelo solo para a: active. Si lo hace para todos los anclajes, también se eliminará para a: focus que se utiliza para la navegación con el teclado. También depender demasiado del vuelo estacionario es muy malo, ya que el vuelo estacionario no está presente en las pantallas táctiles.
Me gustaría tener todos los enlaces fácilmente distinguibles del resto del contenido.Esta es mi preferencia personal:
2016 versión
/* The order is important! Do not use fixed values like px! Always check contrast between text and background for accessibility! */
a { border-bottom: thin solid;
color: rgb(0,0,192);
font-weight: bolder;
text-decoration: none;
}
a:visited { color: rgb(160,0,160); }
a:active { color: rgb(192,0,0); }
a:active, a:focus, a:hover { border-bottom-width: medium; }
2015 Versión
a { border-bottom: thin solid;
color: rgb(0,0,192);
font-weight: 700;
text-decoration: none;
}
a:visited { color: rgb(128,0,128); }
a:active { color: rgb(192,0,0); } /* :active MUST come after :visited */
a:active, a:focus, a:hover { border-bottom-width: medium; }
a { border-bottom: 1px solid;
color: rgb(0,0,166);
font-weight: 700;
text-decoration: none;
}
a:visited { color: rgb(122,0,122); }
a:active { color: rgb(166,0,0); } /* :active MUST come after :visited */
a:active, a:focus, a:hover { border-bottom: 3px solid; }
2013 versión
a { color: rgb(0,0,166);
font-weight: 700;
border-bottom: 1px dotted;
text-decoration: none;
}
a:visited { color: rgb(122,0,122); }
a:hover, a:focus, a:active { border-bottom: 2px solid; }
a:focus, a:active { color: rgb(166,0,0); }
de amor y odio (http://meyerweb.com/eric/css/link-specificity.html) solía ser la recomendación. – j08691