¿Cómo eliminar el color de enlace predeterminado de la etiqueta 'a' de hipervínculo html?

236

El color predeterminado del enlace es azul. ¿Cómo eliminar el color de enlace predeterminado de la etiqueta de hipervínculo html <a>?

— Rafiu
fuente

El color de texto predeterminado para <a>es azul. ¿Cuál es tu problema ahora?

— VMAtm

Estoy tratando de obtener si no le da color a <a>, no quiero que se muestre en color azul. En el color de texto predeterminado, el color del texto puede ser negro o azul así ...

— Rafiu

3

@Terry_Brown - me encontré con esta pregunta bastante útil, ya que quería encontrar el "color: hereda la" respuesta a continuación, que es lo que creo que la cuestión estaba contando demasiado ...

— Sk93

475

El valor de herencia :

a { color: inherit; }

... hará que el elemento tome el color de su padre (que es lo que creo que estás buscando).

— Quentin
fuente

60

puedes hacer algo como esto:

a {
    color: #0060B6;
    text-decoration: none;
}

a:hover 
{
     color:#00A0C6; 
     text-decoration:none; 
     cursor:pointer;  
}

si la decoración de texto no funciona, incluya la decoración de texto: ¡ninguno! importante;

— Kleinohad
fuente

además, si desea evitar el cambio de color para un enlace específico después de presionarlo, agregue dentro de la etiqueta: <A STYLE = "text-decoration: none; color = [seleccione su favorito ...]" HREF = " link.html "> enlace de prueba </A>

— wiztrail

44

<a style="text-decorations:none; color:inherit;>= ganador

— Dan Bradbury

2

@DanBradbury eliminar 's' en decoraciones de texto. <a style="text-decoration:none; color:inherit;>

— Mukarram Pasha

18

.cancela,.cancela:link,.cancela:visited,.cancela:hover,.cancela:focus,.cancela:active{
    color: inherit;
    text-decoration: none;
}

Sentí que era necesario publicar la definición de clase anterior, muchas de las respuestas en SO omiten algunos de los estados

— Kaan Soral
fuente

17

Si no desea ver el subrayado y el color predeterminado que proporciona el navegador, puede mantener el siguiente código en la parte superior de su archivo main.css. Si necesita diferentes colores y estilos de decoración, puede anular fácilmente los valores predeterminados utilizando el fragmento de código a continuación.

 a, a:hover, a:focus, a:active {
      text-decoration: none;
      color: inherit;
 }

— GURU PRASAD
fuente

8

Esto también es posible:

        a {
            all: unset;
        }

desarmado: esta palabra clave indica cambiar todas las propiedades que se aplican al elemento o al elemento primario del elemento a su valor principal si son heredables o a su valor inicial si no. los valores unicode-bidi y direction no se ven afectados.

Fuente: descripción de Mozilla de todos

— Gerd Hübner
fuente

Usted podría , pero sólo porque puede no significa que usted debe. Diría que dada la naturaleza de esta regla, realmente debería incluir un poco más sobre lo que realmente hace.

— Tom

1

Al parecer color: unsettambién funciona. Eliminé los colores del marco del elemento, luego envolví el elemento y configuré mi color personalizado en ese contenedor para que el color se herede.

— Traxo

8

Tienes que usar CSS. Aquí hay un ejemplo de cómo cambiar el color predeterminado del enlace, cuando el enlace está allí, cuando se está suspendiendo y cuando es un enlace activo.

a:link {
  color: red;
}

a:hover {
  color: blue;
}

a:active {
  color: green;
}

<a href='http://google.com'>Google</a>

Expandir fragmento

— Saad Imran.
fuente

6

Simplemente agregue esto CSS,

a {
    color: inherit;
    text-decoration: none;
}

Eso es todo.

— ArifMustafa
fuente

1

No sé, cuál es el problema con el voto

— negativo

3

Puede usar los valores de Color del sistema (18.2) , introducidos con CSS 2.0, pero obsoletos en CSS 3 .

a:link, a:hover, a:active { color: WindowText; }

De esa manera, sus enlaces de anclaje tendrán el mismo color que el texto normal del documento en este sistema.

— knittl
fuente

0

a:link{color:inherit;}

esta es la línea simple que puede hacer todo por usted <3

— nath sounish
fuente

-2

Esto funcionará

    a:hover, a:focus, a:active {
        outline: none;
    }

Lo que esto hace es eliminar el esquema de las tres pseudo-clases.

— Sumeet Rohra
fuente

Proporcione un poco más de explicación de por qué esto funciona.

— mareoraft

La pregunta no es sobre el esquema

— Quentin, el