Comment supprimer le soulignement d'un lien en HTML?

130

Dans ma page, j'ai mis des liens sous lesquels je ne veux pas de ligne, alors, comment puis-je supprimer cela en utilisant HTML?

html Paic Ten
la source
4
Paic, je ne vais pas prendre la peine de restaurer les balises, mais pour que vous le sachiez, le seul moyen de supprimer le soulignement est d'utiliser CSS . Oui, même si vous l'ajoutez en ligne avec le HTML (dans l' styleattribut), c'est toujours du CSS . Les deux autres balises sont également entièrement valides ( presentationet hyperlink). À l'avenir, veuillez ne pas supprimer (ou ajouter) de balises à une question à moins qu'il n'y ait une raison valable de le faire. Merci!
0b10011
@bfrohs Je respecte vos mots mais je construis mon site en utilisant uniquement du HTML et je n'ai donc pas ajouté plus de balises car si je l'aurais fait, j'aurais peut-être obtenu des réponses pour une langue différente. En fait, je suis un peu novice, c'est la raison.
Paic Ten
3
Vous ne pouvez pas créer un site Web conforme aux normes sans CSS (à moins que vous n'utilisiez les paramètres par défaut du navigateur pour toutes les présentations). HTML = structure; CSS = présentation. Les autres balises n'avaient rien à voir avec une langue différente - elles n'étaient fournies que pour aider les gens à trouver la question et la réponse.
0b10011
1
duplicata possible de Comment supprimer le soulignement des ancres (liens)?
RAS
2
Pourquoi cette question a-t-elle autant de votes? Vous pouvez littéralement y répondre en une seule recherche Google et je suis sûr qu'il en existe de nombreux doublons sur StackOverflow.
Alternatex

Réponses:

192

Version en ligne :

<a href="http://yoursite.com/" style="text-decoration:none">yoursite</a>

Rappelez -vous cependant que vous devez généralement séparer le contenu de votre site web (qui est HTML ), de la présentation (qui est CSS ). Par conséquent, vous devez généralement éviter les styles en ligne .

Voir la réponse de John pour voir la réponse équivalente en utilisant CSS .

patryk.beza
la source
1
tueur! Je n'ai jamais vu ces traits de soulignement dans toutes les années où j'ai fait du html .... ^^
Alex Cio
1
La réponse de John utilise toujours essentiellement des styles en ligne. Séparer votre CSS signifie plus que l'aliasing css dans votre html. Par exemple, class="big-and-red"c'est l'aliasing et non la séparation. class="meaningful-domain-item"alors css .meaningful-domain-item { //big and red }est. Cette réponse suffit pour me rappeler quelle balise utiliser dans mon css +1.
Nathan Cooper
Ce code mentionné ci-dessus n'a pas fonctionné pour moi. Quand je creuse le problème, je me rends compte que cela ne fonctionnait pas parce que j'avais placé le style après le href. Quand j'ai placé le style avant le href, il fonctionnait comme prévu. <a href=" yoursite.com "style="text-decoration:none"> yoursite </a>
Ganesh MS
55

Cela supprimera tous les soulignements de tous les liens:

a {text-decoration: none; }

Si vous avez des liens spécifiques auxquels vous souhaitez appliquer cela, donnez-leur un nom de classe, comme nounderlineet faites ceci:

a.nounderline {text-decoration: none; }

Cela ne s'appliquera qu'à ces liens et laissera tous les autres inchangés.

Ce code appartient dans le <head>de votre document ou dans une feuille de style:

<head>
    <style type="text/css">
        a.nounderline {text-decoration: none; }
    </style>
</head>

Et dans le corps:

<a href="#" class="nounderline">Link</a>
John Conde
la source
15

Je suggère d'utiliser: survoler pour éviter de souligner si le pointeur de la souris est sur une ancre

a:hover {
   text-decoration:none;
}
romain
la source
6

  1. Ajoutez ceci à votre feuille de style externe (de préférence ):

    a {text-decoration:none;}

  2. Ou ajoutez ceci au <head>de votre document HTML:

    <style type="text/css">
 a {text-decoration:none;}
</style>

  3. Ou ajoutez-le à l' aélément lui-même ( non recommandé ):

    <!-- Add [ style="text-decoration:none;"] -->
<a href="http://example.com" style="text-decoration:none;">Text</a>
0b10011
la source
4

Les autres réponses mentionnent toutes la décoration de texte. Parfois, vous utilisez un thème Wordpress ou le CSS de quelqu'un d'autre où les liens sont soulignés par d'autres méthodes, de sorte que text-decoration: none ne désactive pas le soulignement.

Border et box-shadow sont deux autres méthodes que je connais pour souligner les liens. Pour les désactiver:

border: none;

et

box-shadow: none;
Joe Golton
la source
2

Ce qui suit n'est pas une bonne pratique, mais peut parfois s'avérer utile

Il est préférable d'utiliser la solution fournie par John Conde, mais parfois, l'utilisation de CSS externes est impossible. Vous pouvez donc ajouter ce qui suit à votre balise HTML:

<a style="text-decoration:none;">My Link</a>
nébuleuseFille
la source
1 
<style="text-decoration: none">

Le code ci-dessus suffira, collez-le simplement dans le lien dont vous souhaitez supprimer le soulignement.

sd1990
la source
1

Tout le code mentionné ci-dessus n'a pas fonctionné pour moi. Quand je creuse le problème, je me rends compte que cela ne fonctionnait pas parce que j'avais placé le style après le href. Quand j'ai placé le style avant le href, il fonctionnait comme prévu.

<a style="text-decoration:none" href="http://yoursite.com/">yoursite</a>
Ganesh MS
la source