Comment supprimer la couleur de lien par défaut du lien hypertexte html 'a'?

236

La couleur de lien par défaut est le bleu. Comment supprimer la couleur de lien par défaut de la balise de lien hypertexte html <a>?

— Rafiu
source

La couleur par défaut du texte pour <a>est bleu. Quel est ton problème maintenant?

— VMAtm

J'essaie d'obtenir si dint donne une couleur à <a>, je ne veux pas qu'elle apparaisse en bleu. Il dans la couleur de texte par défaut, la couleur du texte peut être noire ou bleue comme ça ...

— Rafiu

3

@Terry_Brown - J'ai trouvé cette question très utile, car je voulais trouver la réponse "color: inherit" ci-dessous, ce que je pense que la question concernait aussi ...

— Sk93

475

La valeur héritée :

a { color: inherit; }

… Fera que l'élément prendra la couleur de son parent (c'est ce que je pense que vous recherchez).

— Quentin
source

60

vous pouvez faire quelque chose comme ça:

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

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

si la décoration de texte ne fonctionne pas, incluez la décoration de texte: aucune! importante;

— kleinohad
source

de plus, si vous souhaitez empêcher le changement de couleur d'un lien spécifique après l'avoir appuyé, ajoutez à l'intérieur de la balise a: <A STYLE = "text-decoration: none; color = [sélectionnez votre favori ...]" HREF = " link.html "> lien de test </A>

— wiztrail

4

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

— Dan Bradbury

2

@DanBradbury supprime 's' dans les décorations de texte. <a style="text-decoration:none; color:inherit;>

— Mukarram Pacha

18

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

J'ai pensé qu'il était nécessaire de publier la définition de classe ci-dessus, de nombreuses réponses sur SO manquent certains des états

— Kaan Soral
source

17

Si vous ne souhaitez pas voir le soulignement et la couleur par défaut fournis par le navigateur, vous pouvez conserver le code suivant en haut de votre fichier main.css. Si vous avez besoin de couleurs et de styles de décoration différents, vous pouvez facilement remplacer les valeurs par défaut à l'aide de l'extrait de code ci-dessous.

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

— GURU PRASAD
source

8

C'est aussi possible:

        a {
            all: unset;
        }

unset: ce mot clé indique de changer toutes les propriétés s'appliquant à l'élément ou au parent de l'élément à leur valeur parent si elles sont héritables ou à leur valeur initiale sinon. les valeurs unicode-bidi et direction ne sont pas affectées.

Source: Mozilla description de tous

— gerd hübner
source

Vous le pouvez , mais ce n'est pas parce que vous le pouvez que vous le devriez. Je dirais qu'étant donné la nature de cette règle, vous devriez vraiment inclure un peu plus sur ce qu'elle fait réellement.

— Tom

1

Apparemment, ça color: unsetmarche aussi. J'ai supprimé les couleurs du cadre de l'élément, puis j'ai enveloppé l'élément et défini ma couleur personnalisée sur ce wrapper afin que la couleur soit héritée.

— Traxo

8

Vous devez utiliser CSS. Voici un exemple de modification de la couleur de lien par défaut, lorsque le lien est juste assis là, lorsqu'il est survolé et lorsqu'il s'agit d'un lien actif.

a:link {
  color: red;
}

a:hover {
  color: blue;
}

a:active {
  color: green;
}

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

Développer l'extrait

— Saad Imran.
source

6

Ajoutez simplement ceci CSS,

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

c'est tout, c'est fait.

— ArifMustafa
source

1

Je ne sais pas, quel est le problème avec l'électeur en bas, croyez-moi que cela fonctionne ...

— ArifMustafa

3

Vous pouvez utiliser les valeurs System Color (18.2) , introduites avec CSS 2.0, mais obsolètes dans CSS 3 .

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

De cette façon, vos liens d'ancrage auront la même couleur que le texte de document normal sur ce système.

— knittl
source

0

a:link{color:inherit;}

c'est la simple ligne qui peut faire tout pour vous <3

— noun sonore
source

-2

Cela fonctionnera

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

Cela supprime le contour des trois pseudo-classes.

— Sumeet Rohra
source

Veuillez expliquer un peu plus pourquoi cela fonctionne.

— mareoraft du

La question ne se pose pas sur le plan

— Quentin