Como remover a cor padrão do link da tag 'a' do hiperlink html?

235

A cor padrão do link é azul. Como remover a cor do link padrão da marca de hiperlink html <a>?

— Rafiu
fonte

A cor do texto padrão para <a>é azul. Qual é o seu problema agora?

— VMAtm 17/07/11

Estou tentando entender se o dint dá alguma cor a <a>, não quero que ele seja exibido em azul. É na cor padrão do texto, a cor do texto pode ser preto ou azul assim ...

— Rafiu

3

@Terry_Brown - Eu encontrei esta pergunta bastante útil, como eu queria encontrar o "color: herdar" resposta abaixo, que é o que eu acredito que a questão foi relacionada também ...

— Sk93

474

O valor herdado :

a { color: inherit; }

… Fará com que o elemento adquira a cor de seu pai (que é o que eu acho que você está procurando).

— Quentin
fonte

59

você pode fazer algo assim:

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

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

se a decoração de texto não funcionar, inclua decoração de texto: nenhuma! importante;

— kleinohad
fonte

além disso, se você quiser impedir a alteração de cor de um link específico após pressioná-lo, adicione dentro da tag a: <A STYLE = "decoração do texto: nenhuma; color = [selecione seu favorito ...]" HREF = " link.html "> link de teste </A>

— wiztrail 29/03

4

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

— Dan Bradbury

2

@DanBradbury remove 's' nas decorações 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;
}

Eu senti que era necessário postar a definição de classe acima, muitas das respostas sobre SO perdem alguns dos estados

— Kaan Soral
fonte

17

Se você não quiser ver a cor sublinhada e padrão fornecida pelo navegador, mantenha o código a seguir na parte superior do arquivo main.css. Se você precisar de um estilo diferente de cor e decoração, poderá substituir facilmente os padrões usando o snippet de código abaixo.

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

— GURU PRASAD
fonte

8

Isso também é possível:

        a {
            all: unset;
        }

não definido: esta palavra-chave indica para alterar todas as propriedades que se aplicam ao elemento ou pai do elemento para o valor pai, se elas forem herdáveis, ou para o valor inicial, se não forem. Os valores unicode-bidi e direction não são afetados.

Fonte: Mozilla descrição de todos

— gerd hübner
fonte

Você poderia , mas só porque você pode, não significa que você deveria. Eu diria que, dada a natureza dessa regra, você deve incluir um pouco mais sobre o que ela realmente faz.

— Tom

1

Aparentemente, color: unsettambém funciona. Eu removi as cores da estrutura do elemento, envolvi o elemento e configurei minha cor personalizada nesse invólucro para que a cor seja herdada.

— Traxo

8

Você tem que usar CSS. Aqui está um exemplo de alteração da cor padrão do link, quando o link está parado, quando está sendo pairado e quando é um link ativo.

a:link {
  color: red;
}

a:hover {
  color: blue;
}

a:active {
  color: green;
}

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

Expandir snippet

— Saad Imran.
fonte

6

Basta adicionar isso CSS,

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

é isso, pronto.

— ArifMustafa
fonte

1

Eu não sei, qual é o problema com o eleitor para baixo, acredite em mim isso funciona ...

— ArifMustafa

3

Você pode usar os valores System Color (18.2) , introduzidos no CSS 2.0, mas obsoletos no CSS 3 .

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

Dessa forma, seus links de ancoragem terão a mesma cor que o texto normal do documento neste sistema.

— knittl
fonte

0

a:link{color:inherit;}

esta é a linha simples que pode fazer todos os animais para você <3

— nath sounish
fonte

-2

Isso vai funcionar

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

O que isso faz é remover o esboço de todas as três pseudo-classes.

— Sumeet Rohra
fonte

Forneça um pouco mais de explicação sobre por que isso funciona.

— Mareoraft 30/09/19

A questão não está perguntando sobre o esboço

— Quentin