Come rimuovere il colore di collegamento predefinito del tag 'a' hyperlink html?

236

Il colore di collegamento predefinito è blu. Come rimuovere il colore di collegamento predefinito del tag hyperlink HTML <a>?

— Rafiu
fonte

Il colore predefinito del testo <a>è blu. Qual è il tuo problema adesso?

— VMAtm,

Sto cercando di ottenere se dint dà un colore a <a>, non voglio che sia mostrato in blu. Nel colore predefinito del testo, il colore del testo potrebbe essere nero o blu in quel modo ...

— Rafiu,

3

@Terry_Brown - Ho trovato questa domanda molto utile, poiché volevo trovare la risposta "color: eredit" di seguito, che è ciò che ritengo che anche la domanda riguardasse ...

— Sk93

475

Il valore ereditario :

a { color: inherit; }

... farà sì che l'elemento assuma il colore del suo genitore (che è quello che penso tu stia cercando).

— Quentin
fonte

60

puoi fare qualcosa del genere:

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

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

se la decorazione del testo non funziona, includi la decorazione del testo: nessuna! importante;

— kleinohad
fonte

inoltre, se vuoi impedire il cambio di colore per un link specifico dopo averlo premuto, aggiungi all'interno del tag a: <A STYLE = "text-decoration: none; color = [seleziona il tuo preferito ...]" HREF = " link.html "> test link </A>

— wiztrail

4

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

— Dan Bradbury il

2

@DanBradbury rimuove 's' nelle decorazioni di testo. <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;
}

Ho ritenuto necessario pubblicare la definizione di classe di cui sopra, molte delle risposte su SO mancano alcuni degli stati

— Kaan Soral
fonte

17

Se non si desidera visualizzare la sottolineatura e il colore predefinito forniti dal browser, è possibile mantenere il seguente codice nella parte superiore del file main.css. Se hai bisogno di stili di colore e decorazione diversi, puoi facilmente sostituire le impostazioni predefinite utilizzando lo snippet di codice seguente.

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

— GURU PRASAD
fonte

8

Questo è anche possibile:

        a {
            all: unset;
        }

unset: questa parola chiave indica di modificare tutte le proprietà che si applicano all'elemento o al genitore dell'elemento sul loro valore genitore se sono ereditabili o al loro valore iniziale in caso contrario. i valori unicode-bidi e direction non sono interessati.

Fonte: descrizione Mozilla di tutti

— gerd hübner
fonte

Si potrebbe , ma solo perché si può non significa che si dovrebbe. Direi che, data la natura di questa regola, dovresti davvero includere qualcosa in più su ciò che effettivamente fa.

— Tom,

1

Apparentemente color: unsetfunziona anche. Ho rimosso i colori della struttura dall'elemento, quindi ho avvolto l'elemento e impostato il mio colore personalizzato su quell'involucro in modo che il colore venga ereditato.

— Traxo,

8

Devi usare CSS. Ecco un esempio di modifica del colore predefinito del collegamento, quando il collegamento è semplicemente seduto lì, quando viene sospeso e quando è un collegamento attivo.

a:link {
  color: red;
}

a:hover {
  color: blue;
}

a:active {
  color: green;
}

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

Espandi frammento

— Saad Imran.
fonte

6

Aggiungilo semplicemente in CSS,

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

ecco fatto.

— ArifMustafa
fonte

1

Non lo so, qual è il problema con il down voter, credimi, funziona ...

— ArifMustafa,

3

È possibile utilizzare i valori di System Color (18.2) , introdotti con CSS 2.0, ma deprecati in CSS 3 .

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

In questo modo i collegamenti di ancoraggio avranno lo stesso colore del normale testo del documento su questo sistema.

— Knittl
fonte

0

a:link{color:inherit;}

questa è la semplice linea che può fare tutto per te <3

— nath sounish
fonte

-2

Questo funzionerà

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

Ciò che fa è rimuovere il contorno di tutte e tre le pseudo-classi.

— Sumeet Rohra
fonte

Fornisci una spiegazione in più sul perché funziona.

— mareoraft

La domanda non si pone sullo schema

— Quentin,