CSS Grenz-links-Eigentum
In diesem Leitfaden verwenden wir diese Eigenschaft und führen verschiedene Beispiele durch, bei denen wir diese „Grenz-links“ -Fotie in CSS verwenden.
Beispiel 1
Erstellen Sie die Datei im Visual Studio -Code und wählen Sie die HTML -Sprache, um die HTML -Datei zu erstellen. Wir müssen diese Datei verwenden, um Absätze zu schreiben und die Eigenschaft Grenz-Links auf die Absätze anzuwenden. Wir müssen auch unsere HTML -Datei mit der CSS -Datei verknüpfen, sodass das gesamte Styling, das wir in der CSS -Datei durchführen.
Wir haben zwei Absätze in diesem HTML -Code erstellt und sie "P1" und "P2" genannt. Wir setzen diese Namen, weil wir diese Absätze in CSS getrennt stylen müssen. Diese Namen helfen, wenn wir den Stil auf sie anwenden.
CSS -Code:
Um den Absatz eins zu stylen, verwenden wir den Namen "P1". Hier verwenden wir die separaten Eigenschaften, um den Rand auf der linken Seite des Absatzes zu setzen. Zuerst setzen wir die „Grenz-links-Breite“ auf „10px“, um die Breite der Grenze zu setzen. Dann setzen wir den „Grenz-links-Farben“ auf „Magenta“. Es setzt die Farbe des linken Randes des Absatzes. Wir haben auch den „Grenz-Links-Stil“ auf „solide“ gestellt. Dies bedeutet, dass der Typ der Grenze „solide“ ist. Danach setzen wir die "Hintergrundfarbe" von "P1" auf "hellgrün" ". Erhöhen Sie die „Schriftgröße“ und stellen Sie es auf "25px" und richten Sie "p1" in der Mitte aus. Jetzt kommt „P2“, anstatt alle Eigenschaften der Grenz-Links-Breite, -stil und Farbe zu verwenden, verwenden wir nur eine Eigenschaft, die die Eigenschaft „Grenz-links“ ist. Wir setzen alle drei Stile in dieser einen Eigenschaft ein. Wir verwenden den gleichen Stil, die gleiche Breite und die gleiche Farbe, die wir für „P1“ verwendet haben. Die Hintergrundfarbe, die Schriftgröße und die Textausrichtung sind ebenso übereinstimmend wie im „P1“.
Ausgang:
In der Ausgabe gibt es keinen Unterschied zwischen Absatz „P1“ und Absatz „P2“. Anstatt separate Eigenschaften zu verwenden, geben wir der einen Eigenschaft Priorität, das das Eigentum „Grenz-links“ ist.
Beispiel #2
Wir erstellen eine Überschrift und eine "Div" -Klasse mit dem Namen "Border" und schreiben eine Zeile in dieses "Div". Jetzt müssen wir das von der CSS bereitgestellte „Links-Links-Eigentum“ auf der „DIV“ anwenden.
CSS -Code:
Für die Überschrift ändern wir nur die Hintergrundfarbe in „Pink“ und bewegen uns dann zur Div -Klasse mit dem Namen "Border". Wir wenden die verschiedenen Eigenschaften darauf an. Die Breite für diese "Grenze" -D -DIV beträgt "100%" und die Höhe "200px". Die Farbe seines Hintergrunds ist „hellhimmelblau“. Danach verwenden wir den „Grenz links“ und setzen die „4px“ für die Breite der linken Rande. Dieser Rand ist auf "gestrichelt" im Typ eingestellt. Und die Farbe dieses linken Randes ist auf „rot“ eingestellt.
Ausgang:
Hier sehen wir, dass unser Übergang im Übergang „rosa“ zu sein scheint und es keinen Rand für diese Überschrift gibt. Dann haben wir eine Zeile, die wir im „Div“ geschrieben haben. Hier ist der linke Rand dieser Linie. Der Rand erscheint in Farbe als „rot“ und ist gepunktet. Wir haben diese Farben und Stile in unserem CSS -Code ausgewählt.
Beispiel #3
Wir verwenden den gleichen HTML -Code, den wir in unserem vorherigen Beispiel geschrieben haben. Hier, in CSS. Die dafür verwendete „Schriftfamilie“ ist "algerisch". Wir verwenden den "Div" -Namen "Rand" und setzen seine Breite auf "110%" und seine Höhe auf "210px". Die Farbe seines Hintergrunds ist „orange“. Hier haben wir das Eigentum „Grenz-links“. In dieser Eigenschaft ist die Breite des Randes, die auf der linken Seite erscheint, auf "8PX" eingestellt. Die Art der Grenze, die wir hier festlegen, ist "solide". Wir müssen die Farbe für diesen Rand einstellen, damit wir sie auf „Orange“ setzen.
Ausgang:
Die Ausgabe zeigt den Rand auf der linken Seite in grüner Farbe und die Breite dieses Randes ist „8px“. Wir haben diese Grenze mit Hilfe von „Grenz-links“.
Beispiel #4
Hier ist der Übergang "Kastanienbranchen", die "Schriftfamilie" ist "Times New Roman" und die Farbe der "Schrift" ist "weiß" ist "weiß". Jetzt kommt "Div". Wir setzen seine „Breite“ und „Höhe“ auf „120%“ bzw. „220px“. Die Farbe des Hintergrunds dafür ist auf „hellgrün“ eingestellt. Auch hier verwenden wir die Eigenschaft "Grenze links", und diesmal setzen wir den Typ auf "Double" fest. Dieses „Doppel“ erscheint auf der linken Seite als "Doppellinien". Die Farbe dieses Doppelrandes ist "schwarz" und "9px" in "Breite" ist "9px".
Ausgang:
Beispiel Nr. 5
Hier haben wir einen Übergang, einen Absatz und einen Div. Wir werden die verschiedenen Grenztypen auf der linken Seite von all diesen verwenden, indem wir die CSS-integrierte Eigenschaft verwenden.
CSS -Code:
Für die Überschrift ist der Grenze-Links-Typ "solide", "5px" in Breite und ist in der Farbe auf "grün" eingestellt. Für die Absätze verwenden wir wieder den „Grenz links“. Diesmal ist der Typ dieses Randes "gepunktet" und die Farbe "blau" ist "blau". Das "Schriftgewicht" des Absatzes ist "fett" und die Größe der Absatzschrift ist "20px". Wir haben auch ein "Div", in dem wir den linken Randtyp als "gepunktet", "4px" und "rot" für die "Breite" bzw. "Farbe" festlegen.
Ausgang:
Der linke Rand der Überschrift, des Absatzes und der DIV erscheinen in verschiedenen Typen. Die Überschrift an der linken Grenze ist solide grün. Der linksrande Absatz ist in gepunkteter Typ und Farbe blau ist. Der DIV -linke Rand befindet sich im doppelten Typ und die Farbe davon scheint „rot“ zu sein.
Beispiel #6
In unserem letzten Beispiel haben wir die "Überschrift", "Div", "Absatz" und "Spannweite" erstellt. Wir verwenden die verschiedenen Grenzen für all diese. Wir tragen die linke Rand auf sie an.
CSS -Code:
Für die Überschrift tragen wir den „Grenz-Links-Stil“ an, der "gepunktet" ist, das "gepunktet" ist. Das „Schriftart“ dafür ist „kursiv“ und die Farbe des Hintergrunds ist „hellblau“. Jetzt kommt "Div". Der volle Rand dafür ist „gepunktet“ und der „Grenz links“ ist „5px“ in seiner Breite, „fest“ in seiner Art und „Maroon“ in seiner Farbe. Der Hintergrund von "Div" ist auf "Pink", "20px" in Größe eingestellt und im „Zentrum“ ausgerichtet. Danach wenden wir den „Grenz-links“ auf „6PX“ -Rew, „fest“ und „Magenta“ an. Die Hintergrundfarbe dieses Absatzes ist „hellgrün“,. Die hier verwenden "Schriftgröße", die wir hier verwenden, ist "25px" und ist im "Mitte" ausgerichtet. Jetzt wenden wir die Eigenschaft „Grenze links“ an, die für "Span" verwendet wird, und setzen die Breite, den Typ und die Farbe dieses "Border-Links" auf "9px", "Doppel" -Typ und "Gelb", "gelb". Seine "Schriftgröße" lautet "27px" und der Text ist im "Mitte" ausgerichtet.
Ausgang:
In dieser Ausgabe gibt es für all diese verschiedene linke Grenzen. Wir haben hier die drei Arten von Border-Links angewendet, die "gepunktet", "solide" und "doppelt" sind.
Abschluss
Dieser Leitfaden untersuchte das Konzept von „Border-Links“ -Sachgut in CSS. Nach dem Lesen dieses Leitfaden. Wir haben nur eine Eigenschaft verwendet, anstatt die drei Eigenschaften zu verwenden-"Grenz-links-Breite", "Grenz-Links-Stil" und "Border-Links-Color"-separat. Hier haben wir die sechs verschiedenen Beispiele untersucht und jedes Beispiel in diesem Leitfaden erläutert, das mit dem Screenshot der Ausgänge dieser Codes bereitgestellt wurde. Nach dem Studium dieses Leitfadens können Sie diese Eigenschaft in Ihren Projekten oder Websites nutzen.