Come rimuovere la sottolineatura da un collegamento in HTML?


130

Nella mia pagina ho inserito alcuni link in cui non desidero alcuna riga, quindi, come posso rimuoverlo usando HTML?


4
Paic, non mi preoccuperò di ripristinare nuovamente i tag, ma solo per questo sai, l'unico modo per rimuovere la sottolineatura è con CSS . Sì, anche se lo stai aggiungendo in linea con l'HTML ( stylenell'attributo), è comunque CSS . Anche gli altri due tag sono completamente validi ( presentatione hyperlink). In futuro, ti preghiamo di non rimuovere (o aggiungere) tag a una domanda a meno che non ci sia un motivo valido per farlo. Grazie!
0b10011

@bfrohs Rispetto le tue parole ma sto costruendo il mio sito usando solo HTML e quindi non ho aggiunto altri tag perché se lo avessi fatto, avrei potuto avere risposte per un'altra lingua. In realtà sono un po 'alle prime armi, questo è il motivo.
Paic Ten,

3
Non è possibile creare un sito Web conforme agli standard senza CSS (a meno che non si utilizzi le impostazioni predefinite del browser per tutte le presentazioni). HTML = struttura; CSS = presentazione. Gli altri tag non avevano nulla a che fare con una lingua diversa: venivano forniti solo per aiutare le persone a trovare la domanda e la risposta.
0b10011


2
Perché questa domanda ha così tanti voti positivi? Puoi letteralmente rispondere in una singola ricerca su Google e sono sicuro che ci sono molti duplicati su StackOverflow.
Alternatex,

Risposte:


192

Versione in linea :

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

Tuttavia, ricorda che dovresti generalmente separare il contenuto del tuo sito Web (che è HTML ), dalla presentazione (che è CSS ). Pertanto, dovresti generalmente evitare gli stili incorporati .

Vedi la risposta di John per vedere una risposta equivalente usando CSS .


1
uccisore! Non ho mai visto queste righe di sottolineatura in tutti gli anni in cui facevo html .... ^^
Alex Cio,

1
La risposta di John usa ancora stili essenzialmente in linea. Separare il tuo CSS significa molto più che aliasing CSS nel tuo HTML. Ad esempio, l' class="big-and-red"aliasing non è una separazione. class="meaningful-domain-item"allora css .meaningful-domain-item { //big and red }è. Questa risposta è sufficiente per ricordarmi quale tag utilizzare nel mio css +1.
Nathan Cooper,

Questo codice sopra menzionato non ha funzionato per me. Quando approfondisco il problema, mi rendo conto che non funzionava perché avevo inserito lo stile dopo l'href. Quando ho posizionato lo stile prima dell'href, funzionava come previsto. <a href=" yoursite.com "style="text-decoration:none"> yoursite </a>
Ganesh MS

55

Ciò rimuoverà tutte le sottolineature da tutti i collegamenti:

a {text-decoration: none; }

Se si dispone di collegamenti specifici a cui si desidera applicare questo, assegnare loro un nome di classe, come nounderlinee fare questo:

a.nounderline {text-decoration: none; }

Ciò si applica solo a quei collegamenti e lascia tutti gli altri invariati.

Questo codice appartiene al <head>tuo documento o in un foglio di stile:

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

E nel corpo:

<a href="#" class="nounderline">Link</a>

15

Suggerisco di usare: passa il mouse per evitare la sottolineatura se il puntatore del mouse si trova sopra un'ancora

a:hover {
   text-decoration:none;
}

6
  1. Aggiungi questo al tuo foglio di stile esterno ( preferito ):

    a {text-decoration:none;}
  2. Oppure aggiungi questo al <head>tuo documento HTML:

    <style type="text/css">
     a {text-decoration:none;}
    </style>
  3. Oppure aggiungilo aall'elemento stesso ( non consigliato ):

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

4

Le altre risposte menzionano tutte la decorazione del testo. A volte usi un tema Wordpress o il CSS di qualcun altro in cui i collegamenti sono sottolineati da altri metodi, in modo che la decorazione del testo: nessuno non disattivi la sottolineatura.

Border e box-shadow sono altri due metodi di cui sono a conoscenza per sottolineare i collegamenti. Per disattivarli:

border: none;

e

box-shadow: none;

2

Quanto segue non è una buona pratica, ma a volte può rivelarsi utile

È meglio utilizzare la soluzione fornita da John Conde, ma a volte è impossibile utilizzare CSS esterni. Quindi puoi aggiungere quanto segue al tuo tag HTML:

<a style="text-decoration:none;">My Link</a>

1
<style="text-decoration: none">

Il codice sopra sarà sufficiente. Basta incollarlo nel collegamento da cui si desidera rimuovere la sottolineatura.


1

Tutto il codice sopra menzionato non ha funzionato per me. Quando approfondisco il problema, mi rendo conto che non funzionava perché avevo inserito lo stile dopo l'href. Quando ho posizionato lo stile prima dell'href, funzionava come previsto.

<a style="text-decoration:none" href="http://yoursite.com/">yoursite</a>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.