Come rimuovere la sottolineatura dei collegamenti? Proprietà di decorazione del testo CSS

12/03/2019

I collegamenti sono parte integrante di qualsiasi pagina web. Possono essere sia testo che sotto forma di pulsanti. Questo articolo riguarderà solo i collegamenti testuali.

Non è un segreto che in HTML tutti gli elementi non sembrano molto accurati, e il design, francamente, è cattivo.

La parte più importante del "link", che interferisce con la creazione di collegamenti, è il carattere di sottolineatura. Ora capiremo come rimuovere i collegamenti di sottolineatura nei CSS.

Creazione di collegamenti

Per dimostrare il funzionamento di questo metodo, è necessario creare un collegamento. Ciò aiuterà lo standard HTML 5.

Per creare un collegamento, è necessario utilizzare il tag coppia "a", che non è un blocco. Pertanto, per posizionare i collegamenti su linee separate, è necessario includerli nei tag di paragrafo (p). In alternativa, è possibile utilizzare la proprietà display: block per ogni collegamento.

Iniziare a creare collegamenti. Inseriamo diversi tag nel nostro documento HTML. Tra i tag di apertura e di chiusura scriviamo il nome per il nostro link, che verrà visualizzato sulla nostra pagina.

Inoltre, il tag "a" ha un numero di attributi. L'attributo href è obbligatorio, senza il quale un link non verrà seguito. Indica il percorso della pagina o del file a cui il nostro link porterà.

Nell'esempio presentato, non verranno utilizzati altri collegamenti, pertanto è possibile specificare il valore standard #.

Il collegamento è stato creato, ora deve essere stilizzato. Esistono diversi modi per rimuovere i collegamenti sottolineati in CSS:

  1. L'attributo di stile (che si trova all'interno del tag).
  2. Il tag di stile (situato nel blocco della testa).
  3. Stili di connessione esterni che utilizzano il tag link.

Per annullare una sottolineatura di un collegamento in CSS, è possibile utilizzare uno di questi metodi, ma la connessione di stili esterni è considerata la più adatta.

Codice HTML

Suggerimento: quando si disegna una pagina Web, dare la preferenza a collegamenti esterni.

Link di stile nei CSS

Nell'esempio presentato verrà utilizzato il collegamento esterno. Apri il file CSS in cui modificheremo il design dei collegamenti.

Oltre ai link in questa pagina non c'è nulla. Pertanto, useremo il tag "a" come selettore. Se preferisci, puoi aggiungere classi per ogni link, ma questo è facoltativo.

Scrivi il selettore "a", in cui verrà scritta la proprietà text-decoration: none;

Una semplice proprietà text-decoration è usata per rimuovere la sottolineatura usando i CSS.

La decorazione del testo contiene un numero di altri valori. Con esso, puoi creare il trattino di sottolineatura superiore, ma è usato raramente.

Per rimuovere la sottolineatura del collegamento, nel documento CSS inserire il seguente codice:

Codice CSS

Per semplificare il codice, puoi usare un semplice attributo - stile. Nell'esempio, la pagina intera non è rappresentata nella progettazione a tutti gli effetti, quindi è possibile utilizzare questo metodo.

La cosa principale non è dipingere l'intera pagina HTML in questi modi. In questo codice, puoi facilmente confondermi.

Modifica del link indotto nei CSS

Supponiamo di voler mantenere i collegamenti nello stato normale del trattino basso e sparire quando si passa il mouse. Per rimuovere o impostare una sottolineatura per un collegamento quando si passa il mouse, CSS usa la pseudo-classe ": hover". Ecco un esempio:

Codice CSS per il link indotto

Gli stili possono essere applicati non solo al collegamento indotto, ma anche a quelli attivati ​​o visitati. Per fare ciò, usa le pseudo-classi ": active" e ": visited".