Ändern Sie die Farbe von HR Tag CSS
”Tag mit CSS. Der "
”Tag in HTML wird verwendet, um eine thematische Pause zwischen zwei Absätzen in HTML darzustellen. Es sieht aus wie eine horizontale Linie zwischen den Absätzen. Wir werden die Farbe dieses HR -Tags mit Hilfe von CSS in diesem Leitfaden ändern. Wir verwenden unterschiedliche Eigenschaften, um die Farbe dieses Tags zu ändern. Sie müssen diese Beispiele durchgehen, die in diesem Leitfaden ausgearbeitet werden, um dies besser zu verstehen.
Eigenschaften zum Ändern der Farbe:
Wir werden hier zwei Eigenschaften verwenden, um die Farbe des HR -Tags zu ändern:
- Die Hintergrund-Farben-Eigenschaft.
- Das Rand-Top-Eigentum.
Beispiel Nr. 1: Durch die Verwendung der Eigenschaft von Hintergrundfarben
Öffnen Sie eine neue HTML -Datei, in der wir das verwenden “
Tag und dann die Farbe davon ändern
Tag in der CSS -Datei. Wir führen die angegebenen Codes im Visual Code Studio aus. Wir müssen eine HTML -Datei erstellen, um den HTML -Code zu schreiben. Diese Datei muss mit dem "gespeichert werden" gespeichert werden.HTML ”Erweiterung. Der HTML -Code wird zum Entwerfen der verwendet
Tag zwischen zwei Absätzen. Wenn Sie am Visual Studio -Code zum Erstellen von HTML -Dateien arbeiten, öffnen Sie eine neue Datei und schreiben Sie die “!" markieren. Drücken Sie dann in diesem Visual Code Studio, das auf dem Bildschirm angezeigt wird. Sie müssen den Körper schreiben und das Link -Tag in die angegebene Vorlage platzieren.
Definieren Sie den Typ dieses Dokuments, der hier „HTML“ ist. Öffnen Sie den und Tag. Danach wird hier das "Meta" -Tag als "charset = utf-8" definiert. Dies bedeutet, dass wir viele Zeichen in unserem Dokument verwenden können. Und es unterstützt viele Sprachen. Wir setzen den Titel mit dem Eröffnungs- und Schließetag „“. Da wir diese HTML -Datei mit der CSS -Datei verknüpfen möchten, um die Farbe der "zu ändern"
Tag, wir verwenden das Tag "" und schließen unser "" "Tag". Wir müssen zwei Absätze schreiben und die platzieren
Tag zwischen diesen beiden Absätzen, damit wir die Farbe dieses Tags ändern können. Wir schreiben den Absatz zwischen den "" Tags. Wir haben ein "
Tag nach dem ersten Absatz. Schreiben Sie dann den zweiten Absatz und schließen Sie die Tags von „“ und „“.
CSS -Datei zum Styling und Ändern der Farbe:
Erstellen Sie nach dem Speichern der obigen HTML -Datei eine Datei mit dem im Link der HTML -Datei genannten Namen. Hier ändern wir die Farbe des HR -Tags, das wir in der HTML -Datei erstellen,.
Erstens schreiben wir HR und in den lockigen Klammern von HR werden wir unserem HR -Tag Stil verleihen. Wir geben die Höhe deshalb “
"Tag" 4px ", also liegt die Höhe unseres HR -Tags ca. 4px. Wir verwenden hier Hintergrundfarbe. Diese Eigenschaft wird verwendet, um die Farbe des HR -Elements in CSS zu ändern. Wir haben die Farbe der HR -Linie als blau eingestellt. Also stellen wir dafür das „Hintergrundfarbe“ blau ein. Die Grenze dafür ist keiner, weil wir keine Grenze um sie herum legen wollen.
Wir erhalten die Ausgabe, indem wir einfach Alt+B in der HTML -Datei oder auch auf die rechte Taste der Maus drücken und im Standardbrowser geöffnet werden. Wir erhalten die Ausgabe auf dem Browser.
Hier wird die Grenze zwischen den Absätzen "blau" gemacht, weil wir die Farbe dieses HR -Tags "Blue" festlegen. Dies ist die einzige Möglichkeit, die Farbe des "HR" -Tags mit "CSS" zu ändern.
Beispiel Nr. 2: Durch die Verwendung der Rand-Top-Eigenschaft
In diesem Beispiel verwenden wir die Eigenschaft „Border-Top“ in CSS. Diese Eigenschaft hilft auch bei der Änderung der Farbe.
Hier ändern wir einfach den Link zur CSS -Datei in der vorherigen HTML -Datei, da wir eine neue CSS -Datei für die Verwendung einer anderen Eigenschaft erstellt haben, um die Farbe zu ändern. Wir müssen diesen Code also nicht wieder erklären.
CSS -Datei zum Ändern der Farbe:
Wir starten diesen CSS -Code auf die gleiche Weise, indem wir die Personalabteilung in der ersten Zeile verwenden und eine lockige Klammer öffnen.
Wir setzen das Display als "Block". Dieser Block füllt die gesamte Linie. Dann lautet die Höhe dieser Linie "2PX". Die Grenze dafür ist Null "0". Jetzt verwenden wir hier das Grundstück „Border-Top“. Diese Eigenschaft hilft bei der Änderung der Farbe des HR -Tags in CSS. Hier definiert „5px“ die Breite, „solide“, definiert den „Linienstil“, und „rot“ wird für die Farbe des HR -Tags verwendet. Auf diese Weise setzen wir die Breite, den Linienstil und die Farbe des HR -Tags in CSS. Der Rand schafft den Raum von „2EM“. Und die Polsterung hier ist "0".
Da die Polsterung zum Erstellen des zusätzlichen Platzes zwischen den Elementen verwendet wird, enthält die Linie keine Elemente, sodass wir ihn als Null festlegen. Zuletzt schließen wir die lockige Klammer und speichern sie. Wir haben diese Datei mit unserer HTML -Datei verknüpft, sodass alle diese Stylings auf die HTML -Datei angewendet werden. Sie können die Ausgabe davon im Bild überprüfen, da das Bild auch hier angegeben ist.
Beispiel # 3:
In diesem Beispiel verwenden wir zwei HR -Tags in unserer HTML -Datei und beide Methoden zum Ändern der Farbe des HR -Tags. Hier geben wir dem HR -Tag oder gleichzeitig zwei Farben für das HR -Tag oder die Linie. Schauen wir uns dieses Beispiel an.
Hier erstellen wir drei Absätze getrennt, indem wir drei Paare von “verwenden
”Absatz Öffnung und Schließen von Tags. Nach jedem Absatz platzieren wir ein HR -Tag. Wir haben also zwei HR -Tags hier in diesem Code. Verknüpfen Sie diese HTML -Datei auch mit der neuen CSS -Datei, die wir für das Styling dieser HR -Tags erstellen werden.
CSS -Datei zum Ändern der Farbe:
In diesem Beispiel verwenden wir zwei verschiedene Eigenschaften, um die Farbe in derselben Zeile zu ändern. In der ersten Personalabteilung öffnen wir die lockigen Klammern und werden das Grundstück der Grenztope verwenden. Darin beträgt die Höhe „2PX“ und die Rand-Top-Eigenschaft wird verwendet. Wir setzen die Breite auf „5PX“ und den Stil der Linie, der „solide“ ist und auch die Farbe auf „grün“ verändert. Schließen Sie dies dann und erstellen Sie eine neue „HR“, in der wir die Eigenschaft „Hintergrundfarbe“ verwenden werden. Hier ist die Höhe "4px" und die Hintergrundfarbe ist "orange". Die Linie besteht also aus zwei Farben, die „grün“ und „orange“ sind.
Hier können Sie feststellen, dass wir unserem HR -Tag mehr als eine Farbe geben können, indem wir diese Eigenschaften verwenden.
Abschluss:
In diesem Leitfaden haben wir gelernt, wie man die Farbe des HR -Tags mit Hilfe von CSS -Eigenschaften verändert. Wir haben in diesem Handbuch drei verschiedene Codes ausgearbeitet. Wir haben die Farbe der HR-Linie verändert, indem wir das Attribut „Hintergrundfarbe“ angewendet haben. Im nächsten Beispiel haben wir eine andere Eigenschaft verwendet, die die Eigenschaft „Border-Top“ zum Ändern der Farbe ist. Wir bieten auch Screenshots der Ausgabe, nachdem wir alle Codes ausgeführt haben, und zeigen die Ausgabe auf dem Browser an. Ich hoffe, Sie lernen, wie Sie die Farbe der HR -Linie in CSS ändern, nachdem Sie diesen Leitfaden gelesen haben.