CSS no sottolinea

CSS no sottolinea

CSS e HTML sono combinati per progettare un sito Web creando il contenuto HTML e aggiungendo stile ad essi. CSS consente a diversi stili di contenuto di HTML. Uno di questi è applicare l'effetto decorativo. Questo effetto è principalmente per l'elemento di testo. Un semplice testo HTML viene utilizzato anche in intestazioni, paragrafi, elenchi e collegamenti. Gli effetti applicati dalla proprietà del testo decorati CSS sono le proprietà audaci, corsivi e sottolineate. In questo articolo, parleremo di come possiamo rimuovere la proprietà sottolinea. Il contenuto del collegamento contiene l'effetto sottolinea per impostazione predefinita.

Link html:

Un collegamento è il contenuto HTML che viene utilizzato quando è necessario collegare due o più pagine Web. Se vogliamo fornire l'indirizzo di un'altra pagina Web o di un sito Web nella nostra pagina predefinita, utilizziamo il "link" per creare un collegamento tra le pagine. A tale scopo viene utilizzato il tag di ancoraggio HTML.

La proprietà sottolineata è rendere il testo del collegamento evidenziato o prominente. Questa funzione sottolineata è integrata quando arriviamo ai collegamenti.

Esempio 1: usando la proprietà della decorazione del testo:

Principalmente ci imbattiamo nei siti Web in cui i collegamenti che sono incorporati nelle pagine Web sono sottolineati. Quindi, abbiamo usato un semplice esempio in cui useremo un collegamento originale con un effetto sottolineato e lo stesso collegamento senza la proprietà sottolineata di CSS. Questo viene fatto attraverso la proprietà di decorazione del testo.

Proprietà decorazione del testo:

Una proprietà CSS viene applicata al contenuto HTML per decorarli. Questi effetti di decorazione includono il colore del testo, l'effetto sottolineato, audace, corsivo, allineamento e molte altre proprietà.

La sintassi di base di questa proprietà è:

1
DECORAZIONE DEL TESTO: VALORE; // Valore del tipo di decorazione

Ma nel caso in cui vogliamo rimuovere tutti gli effetti, "nessuno" viene utilizzato nel luogo di valore.

Venendo verso il codice, abbiamo usato uno stile in linea per allineare l'intero contenuto HTML che menzioneremo nel corpo, al centro della pagina web. Il primo contenuto HTML è l'intestazione

Questo viene anche dato uno stile in linea per cambiare il colore nero predefinito in blu. È un codice aggiuntivo, potrebbe non essere necessario utilizzarlo.

1

Un'altra intestazione viene utilizzata che mostrerà che il collegamento menzionato dopo questa intestazione è quello originale con un effetto sottolineato.

Un collegamento viene sempre creato tramite un tag di ancoraggio di HTML. La funzione "href" è per riferimento. È l'origine o l'indirizzo della pagina web che verrà aperto quando premi il collegamento. Dato che non stiamo aggiungendo l'indirizzo, quindi per ora la funzione sia vuota.

1
Clicca me, link1

Dopo questo link, useremo il
Break tag per creare una riga vuota. Quindi, viene dichiarata un'intestazione che mostrerà che il prossimo link non sarà sottolineato. Viene nuovamente utilizzato un tag di ancoraggio. Ma questa volta abbiamo usato l'ID CSS per avere gli effetti di questo ID applicati al collegamento. Considerando che le funzionalità di collegamento rimanenti saranno le stesse.

1
clicca a me, link2

Ora useremo la descrizione dello stile interno nella sezione testa. Dopo aver aggiunto il tag del titolo, useremo l'istruzione di stile con la descrizione dell'ID che abbiamo creato.

Gli ID e le classi di CSS interni ed esterni contengono gli effetti che specificano solo quegli elementi HTML in cui abbiamo usato i nomi degli ID e delle classi. Ad esempio, l'unica classe che ha la proprietà di non sottolineare il testo verrà applicata solo al tag di ancoraggio che contiene il nome dell'ID, dichiarato nella testa.

1
2
3
4
5
#uno
DECORAZIONE DEL TESTO: Nessuno;

L'ID conterrà l'effetto di decorazione del testo che ha il valore "nessuno". Questo valore eliminerà tutti gli effetti del contenuto di HTML: sottolineate, audace, corsivo o qualsiasi colore applicato ad esso.

Ora chiudi tutti i tag e salva il file con l'estensione HTML per eseguire il file nel browser.

Durante l'esecuzione del file, vedrai che sulla pagina Web vengono visualizzate due titoli con due collegamenti. Viene sottolineato un collegamento creato su fattori predefiniti senza applicare l'effetto ID CSS. Ma il secondo è un collegamento senza sottolineare perché abbiamo rimosso tutti gli effetti attraverso la proprietà di delerazione del testo.

Esempio 2: Proprietà Hover:

In questo esempio, una proprietà hover viene utilizzata per rimuovere l'effetto del testo sottolineato. Hover è l'approccio alla navigazione del mouse verso un collegamento. Ancora una volta la proprietà di decorazione del testo viene aggiunta al codice, ma questa volta con l'uso dell'effetto hover.

Nella sezione del corpo del codice, il corpo è nuovamente allineato al centro applicando il CSS in linea. Viene utilizzata l'intestazione e quindi viene applicato un tag di ancoraggio.

1
< a href = "#"> Ciao sono un link

Ora useremo la descrizione CSS interna del collegamento. Questa volta abbiamo applicato effetti direttamente al collegamento invece di utilizzare l'ID CSS. Usando l'ancora "A", un effetto di collegamento e l'effetto hover vengono applicati. Per "A" come collegamento, la decorazione di testo viene applicata con il valore sottolinea.

1
2
3
4
5
un collegamento
DECORAZIONE DEL TESTO: sottolineatura;

Considerando che, per la proprietà del bordo, useremo il valore della decorazione di testo come "nessuno". In questo modo, ogni volta che il mouse viene navigato verso il collegamento, la proprietà sottolineata verrà rimossa.

1
2
3
4
5
A: hover
DECORAZIONE DEL TESTO: Nessuno;

Applicando entrambi gli effetti, la pagina sul carico avrà il collegamento sottolinea. Ma su un mouse l'effetto sottolinea verrà rimosso.

Video playerhttps: // linuxhint.com/wp-content/uploads/2022/07/CSS-NO-UNDERLINE-OPEN-ME.MP400: 0000: 0000: 08 Up/giù tasti freccia per aumentare o ridurre il volume.

L'output del concetto di rimozione dell'effetto sottolinea viene visualizzato nel video. Abbiamo aggiunto una piccola sezione, in cui il collegamento viene creato con effetti sottolinea. Quando il mouse viene navigato verso il collegamento o quando ci libramo sul collegamento, l'effetto sottolinea del collegamento viene rimosso. Ancora una volta, il collegamento appare quando il mouse è stato navigato.

Inoltre, invece di collegamenti che hanno un testo sottolineato predefinito, possiamo anche sottolineare qualsiasi testo tramite il tag HTML sottolinea .

Conclusione:

L'articolo "CSS no sottoline" è una guida completa per spiegare l'approccio utilizzato per rimuovere l'effetto sottolinea. Abbiamo iniziato con una breve introduzione ai collegamenti HTML. Vengono utilizzati due approcci CSS per spiegare il concetto di rimozione dell'effetto sottolineato. Il primo è l'uso diretto della proprietà della decorazione del testo. Mentre la seconda metodologia include l'uso di una proprietà hover che è indirettamente collegata alla proprietà della decorazione per visualizzare o mostrare l'effetto sottolineabile sul collegamento. Entrambi questi concetti sono spiegati attraverso gli esempi per mostrare il CSS utilizzato per le proprietà sottolineate.