Cambia il colore del tag HR CSS
"Tag utilizzando CSS. IL "
"Il tag in HTML viene utilizzato per rappresentare una pausa tematica tra due paragrafi in HTML. Sembra una linea orizzontale tra i paragrafi. Modificheremo il colore di questo tag HR con l'aiuto di CSS in questa guida. Usiamo proprietà diverse per modificare il colore di questo tag. Devi passare attraverso questi esempi che sono elaborati in questa guida per una migliore comprensione di questo.
Proprietà per cambiare colore:
Useremo due proprietà qui per cambiare il colore del tag HR:
- La proprietà in background.
- La proprietà di confine.
Esempio n. 1: utilizzando la proprietà in background
Apri un nuovo file HTML in cui utilizziamo "
"Tagga e poi cambia il colore di questo
Tag nel file CSS. Eseguiamo i codici forniti nello studio del codice visivo. Dobbiamo creare un file HTML per scrivere il codice HTML. Questo file deve essere salvato con ".Estensione HTML ". Il codice HTML viene utilizzato per la progettazione del
tag tra due paragrafi. Se stai lavorando al codice Visual Studio per la creazione di file HTML, apri un nuovo file e scrivi il "!" segno. Quindi, premere INVIO I tag HTML sono integrati in questo studio di codice visivo che viene visualizzato sullo schermo. Devi scrivere il corpo e posizionare il tag di collegamento sul modello dato.
Definisci il tipo di questo documento che è "HTML" qui. Apri il e tag. Successivamente, il tag "Meta" è definito qui come "chatset = UTF-8". Ciò significa che ci consente di utilizzare molti personaggi nel nostro documento. E supporta molte lingue. Impostiamo il titolo usando il tag "" di apertura e chiusura. Dato che vogliamo collegare questo file HTML al file CSS per modificare il colore di “
Tag, utilizziamo il tag "" e chiudiamo il nostro tag "". Dobbiamo scrivere due paragrafi e posizionare il
tagga tra questi due paragrafi in modo da poter cambiare il colore di questo tag. Scriviamo il paragrafo tra i tag "". Noi abbiamo un "
"Tag dopo il primo paragrafo. Quindi, scrivi il secondo paragrafo e chiudi i tag di "" e "".
File CSS per lo styling e la modifica del colore:
Dopo aver salvato il file HTML sopra, crea un file con il nome menzionato nel collegamento del file HTML. Qui cambieremo il colore del tag HR che creiamo nel file HTML.
Innanzitutto, scriviamo HR e all'interno delle parentesi graffe delle risorse umane, daremo stile al nostro tag HR. Diamo l'altezza di questo "
"Tag uguale a" 4px "Quindi l'altezza del nostro tag HR è di circa 4px. Usiamo la proprietà in background qui. Questa proprietà viene utilizzata per cambiare il colore dell'elemento HR in CSS. Abbiamo impostato il colore della linea delle risorse umane come blu. Quindi, abbiamo impostato il blu "colore di sfondo" per questo. Il confine per questo non è nessuno perché non vogliamo mettere il bordo attorno ad esso.
Ottiamo l'output semplicemente premendo Alt+B sul file HTML o anche premendo il pulsante destro del mouse e selezionando Apri nel browser predefinito. Otterremo l'output sul browser.
Qui, la linea tra i paragrafi è resa "blu" perché abbiamo impostato il colore di questo tag HR "blu". Questo è l'unico modo per cambiare il colore del tag "HR" usando "CSS".
Esempio n. 2: usando la proprietà bordo-top
In questo esempio, utilizziamo la proprietà "bordo" in CSS. Questa proprietà aiuta anche a cambiare il colore.
Qui, modifichiamo il collegamento al file CSS nel precedente file HTML perché abbiamo creato un nuovo file CSS per l'utilizzo di un'altra proprietà per modificare il colore. Quindi, non abbiamo bisogno di spiegare di nuovo questo codice.
File CSS per modificare il colore:
Iniziamo questo codice CSS allo stesso modo utilizzando l'HR nella prima riga e aprendo una fascia riccia.
Impostiamo il display come "blocco". Questo blocco riempirà l'intera linea. Quindi, l'altezza di questa linea è "2px". Il confine per questo è zero "0". Ora stiamo usando la proprietà "bordo" qui. Questa proprietà aiuta a cambiare il colore del tag HR in CSS. Qui, "5px" definisce la larghezza, "solido" definisce lo "stile di linea" e "rosso" viene utilizzato per il colore del tag HR. In questo modo, impostiamo la larghezza, lo stile di linea e il colore del tag HR in CSS. Il margine creerà lo spazio di "2em". E l'imbottitura qui è "0".
Poiché l'imbottitura viene utilizzata per creare lo spazio extra tra gli elementi, la linea non contiene elementi, quindi lo impostiamo come zero. Infine, chiudiamo la fascia riccia e la salviamo. Abbiamo collegato questo file al nostro file HTML, quindi tutti questi stili verranno applicati al file HTML. Puoi controllare l'output di questo nell'immagine poiché anche l'immagine è indicata.
Esempio # 3:
In questo esempio, utilizziamo due tag HR nel nostro file HTML e utilizziamo entrambi i metodi per modificare il colore del tag HR. Qui, daremo due colori al tag o alla linea delle risorse umane. Diamo un'occhiata a questo esempio.
Qui, creiamo tre paragrafi separatamente usando tre coppie di "
"Tag di apertura e chiusura del paragrafo. Dopo ogni paragrafo, posizioniamo un tag HR. Quindi, abbiamo due tag HR qui in questo codice. Inoltre, collega questo file HTML al nuovo file CSS che creeremo per lo styling di questi tag HR.
File CSS per modificare il colore:
In questo esempio, utilizziamo due proprietà diverse per modificare il colore alla stessa linea. Nella prima risorsa, apriamo le parentesi graffe e useremo la proprietà bordo-top. In questo, l'altezza è "2px" e viene utilizzata la proprietà bordo-top. Abbiamo impostato la larghezza su "5px" e lo stile della linea che è "solido" e cambia anche il colore in "verde". Quindi chiudi questo e crea una nuova "HR" in cui utilizzeremo la proprietà "color background". Quindi qui l'altezza è "4px" e il colore di sfondo è "arancione". Quindi, la linea sarà di due colori che sono "verdi" e "arancione".
Qui puoi notare che possiamo dare più di un colore al nostro tag HR usando queste proprietà.
Conclusione:
In questa guida, abbiamo imparato a cambiare il colore del tag HR con l'aiuto delle proprietà CSS. Abbiamo elaborato tre diversi codici in questa guida. Abbiamo modificato il colore della linea HR applicando l'attributo "color sfondo". Nel prossimo esempio, abbiamo usato un'altra proprietà che è la proprietà "bordo" per modificare il colore. Forniamo anche screenshot dell'output dopo aver eseguito tutti i codici e mostriamo l'output sul browser. Spero che imparerai a cambiare il colore della linea delle risorse umane in CSS dopo aver letto questa guida.