I CSS sottolineano il colore
Esempio 1
Crea il file HTML per iniziare questo codice. Inizieremo creando un nuovo file e quindi selezionando HTML come lingua nel codice Visual Studio. Infine, stiamo aggiungendo il "!"Al file che abbiamo appena generato. Questo file contiene tutti i tag fondamentali dell'HTML. Tutto quello che dobbiamo fare ora è digitare il corpo HTML e il collegamento del file CSS nella "testa."Nel corpo, stiamo posizionando un'intestazione e un paragrafo in questo codice. Creiamo anche del testo in grassetto in questo codice. Ora ci stiamo muovendo per creare il file CSS in cui sottolineiamo l'intestazione e il paragrafo e quindi cambiamo il colore di questo sottolinea. Tutti questi saranno fatti utilizzando le proprietà CSS.
Stiamo allineando tutti gli elementi del corpo dell'HTML qui nel "centro" con l'aiuto della proprietà "allineate al testo". Quindi, utilizziamo la proprietà "decorazione del testo" e posizioniamo la parola chiave "sottolineatura" per il valore di questa proprietà. Usiamo questa proprietà qui per generare la sottolineatura per l'intestazione. Abbiamo anche impostato il colore di questa sottolinea.
Qui, impostiamo il colore di questo sottolinearsi su "Black."Generiamo anche un'altra sottolineatura utilizzando la stessa proprietà di" decorazione del testo "e questa volta generiamo questa sottolineatura per il paragrafo. Cambiamo il colore di questo sottolinearsi in "verde" utilizzando la proprietà "-decorazione del testo". Abbiamo anche del testo audace, quindi genereremo una sottolineatura per questo text audace con l'aiuto della proprietà "decorazione del testo" e cambieremo anche il suo colore in "rosso" utilizzando la proprietà "-decorazione del testo".
L'output è qui e si può osservare che il colore della sottolineatura dell'intestazione appare "nero", il testo del paragrafo appare in "verde" e la sottolineatura del testo in grassetto è in "rosso."
Esempio n. 2
Stiamo utilizzando lo stesso codice HTML dell'esempio 1 qui. Usiamo prima la proprietà "allineate al testo" per tutti gli elementi del corpo e la "dimensione del carattere" dell'elemento corporeo è "24px". "Sottolineiamo" tutti gli elementi separatamente usando "decorazione del testo" e cambiamo il colore della sottolinea."Qui, stiamo usando il colore" RGB "come valore di questa proprietà" text-decoration-color ". Per "H1", abbiamo impostato "RGB (13, 128, 13)", che viene utilizzato per l'ombra "verde". Quindi, abbiamo "p", in cui usiamo "RGB (40. 40, 184), "che rappresenta il colore" blu ". Per l'ultimo testo in grassetto, "B", stiamo usando "RGB (216, 69, 15)", che rappresenta "Orange."
Il risultato è mostrato di seguito e puoi vedere che il colore della sottolinea."
Esempio n. 3
Ancora una volta, stiamo usando il codice HTML dell'esempio 1 e collegando questo file CSS dato al file HTML dell'esempio 1. Tutto il testo del corpo HTML si allinea al "Centro" e al "Font-Size" 24px ""."Sottolinehiamo tutti gli elementi che sono stati integrati, paragrafo e testo audace allo stesso modo in cui abbiamo descritto nell'esempio sopra. Qui, stiamo cambiando il colore di queste sottolinea. "HSL (0, 100%, 50%)" che utilizziamo qui per la sottolineatura di Intestazione mostra il colore "rosso". Quindi stiamo usando "HSL (133, 86%, 47%)" per la sottolineatura del paragrafo, che appare "verde chiaro" e per il grassetto, stiamo usando "HSL (327, 85%, 33%)" che che è per il colore "magenta".
Il risultato è riportato di seguito, con il colore "rosso" per la sottolineatura, "verde chiaro" per il testo del paragrafo e "magenta" per il testo audace sottolineabile.
Esempio # 4
In questo esempio, cambieremo un po 'il codice HTML sopra aggiungendo un link qui in questo file. Ora ne abbiamo una voce, un paragrafo, un testo audace all'interno di questo paragrafo e anche un link. Ora sottolineeremo tutti questi e quindi applicheremo diversi colori sottolineate per tutti loro in CSS.
Creiamo la sottolineatura dell'intestazione utilizzando la proprietà "decorazione del testo" e cambiando il suo colore in "arancione" con l'aiuto di "decorazione del testo."Dopo questo, utilizziamo la proprietà" decorazione del testo "per generare il testo in grassetto sottolineando e" color decorazione del testo "per cambiare il colore in" blu."Abbiamo impostato la" dimensione del carattere "del paragrafo su" 22px ". Per menzionare il link, usiamo "A" qui con "Hover" e quindi cambiamo il colore della sottolineatura in "rosso", in modo che cambierà il colore della sottolinea Cambia anche la sua "dimensione dei caratteri" su mouse su "20px".
Nel primo output, sottolineiamo semplicemente l'intestazione e il testo in grassetto. La sottolineatura dell'intestazione appare nel colore "arancione" e la sottolineatura del testo audace appare qui in "Blue."
Nella seconda immagine, puoi vedere il colore sottolinea. Quando si librano il cursore su questo link, il colore della sottolinea.
Esempio # 5
Qui, abbiamo una voce e due diversi paragrafi con i nomi "P1" e "P2". Abbiamo anche del testo audace e un "div" e anche un elemento "span". Generare la sottolineatura per tutti questi e cambieremo anche il colore di queste sottolineature.
Usiamo "allineamento del testo" e per il valore di questa proprietà, impostiamo "Centro" qui per tutti gli elementi presenti all'interno del corpo. Abbiamo anche aumentato la "dimensione del carattere" e abbiamo messo su "25px". Stiamo utilizzando la proprietà "decorazione del testo" per tutti gli elementi che abbiamo creato nel file HTML utilizzando i loro nomi. Quindi, utilizziamo anche la proprietà "text-decoration-color" all'interno dei nomi di tutti questi elementi qui. Usiamo i nomi dei colori, il colore RGB e anche i colori HSL qui. Per l'intestazione e il primo paragrafo "P1", stiamo usando il colore sottolineabile in "RGB", per il secondo paragrafo "P2" e "B" B ", stiamo utilizzando il colore" HSL "per la sottolinea Elemento Div "e" Span ", stiamo usando i nomi dei colori nella proprietà" text-decoration-color ". In questo modo, generiamo la sottolineatura e cambiamo il colore della sottolineatura di tutti gli elementi.
Nello screenshot seguente, la sottolinea.
Conclusione
Abbiamo scritto questo tutorial spiegando come cambiare il colore della sottolineatura in CSS. Abbiamo discusso della proprietà di CSS, che viene utilizzato per alterare il colore della sottolinea. Abbiamo spiegato in dettaglio che la proprietà "-decorazione del testo" viene utilizzata per cambiare il colore della sottolineatura. Abbiamo elaborato diversi esempi qui in cui abbiamo utilizzato questa proprietà e spiegato il codice e l'output per la tua migliore comprensione. Dopo aver appreso attentamente questo tutorial, utilizzerai questa proprietà nei tuoi codici.