Nieruchomość graniczna CSS

LEWA Granicy oznacza, że ​​ustawiamy granicę po lewej stronie dowolnego akapitu lub dowolnego nagłówka w CSS. CSS zapewnia nam wbudowaną własność lewicy granicznej. Korzystając z tej właściwości, ustawiamy granicę na lewą stronę. Kiedy używamy tej właściwości w CSS, granica pojawi się tylko po lewej stronie akapitu lub nagłówka. Możemy ustawić rodzaj, szerokość i kolor granicy w tej właściwości „lewicy granicznej”. Mamy różne nieruchomości dostępne w CSS, takie jak „w stylu granicznym”, „graniczna szerokość” i „granica kolorów”. Zamiast używać wszystkich tych właściwości, po prostu używamy właściwości granicznej i ustawiamy całą szerokość, styl i kolor w tej właściwości. Innymi słowy, możemy powiedzieć, że jest to właściwość skrótów wszystkich tych właściwości.

W tym przewodniku użyjemy tej właściwości i wykonamy różne przykłady, w których korzystamy z tej właściwości „lewej” w CSS.

Przykład 1
Utwórz plik w kodzie Visual Studio i wybierz język HTML, aby utworzyć plik HTML. Musimy użyć tego pliku do zapisywania akapitów i zastosowania nieruchomości granicznej w akapitach. Musimy również połączyć nasz plik HTML z plik CSS, aby wszystkie styl, które robimy w pliku CSS, zostaną do niego zastosowane.

W tym kodzie HTML stworzyliśmy dwa akapity i nazwaliśmy je „P1” i „P2”. Ustawiamy te nazwy, ponieważ musimy stylizować te akapity osobno w CSS. Te nazwy pomogą, gdy zastosujemy do nich styl.

Kod CSS:
Aby stylizować pierwszy akapit, używamy nazwy „P1”. Tutaj używamy oddzielnych właściwości, aby ustawić granicę na lewą stronę akapitu. Najpierw ustawiliśmy „szerokość graniczną” na „10px”, aby ustawić szerokość granicy. Następnie ustawiliśmy „granicę graniczną” na „magenta”. Ustawia kolor lewej granicy akapitu. Ustawiliśmy również „w stylu granicznym” na „solidny”. Oznacza to, że rodzaj granicy jest „solidny”. Następnie ustawiamy „kolor tła” „P1” na „Light-Green”. Zwiększ „rozmiar czcionki” i ustaw go na „25px” i wyrównaj „P1” w środku. Teraz pojawia się „P2”, zamiast używać wszystkich właściwości szerokości, stylu i koloru granicznego, używamy tylko jednej właściwości, która jest właściwością „lewą”. Ustawiliśmy wszystkie trzy style w tej jednej właściwości. Używamy tego samego stylu, szerokości i koloru, którego użyliśmy do „P1”. Kolor tła, rozmiar czcionki i align tekstowy są również takie same jak w „P1”.

Wyjście:

W wyniku nie ma różnicy między akapitem „P1” a akapitem „P2”. Zamiast stosować oddzielne właściwości, dajemy pierwszeństwo jednej właściwości, która jest właściwością „lewicową”.

Przykład nr 2
Tworzymy klasę nagłówka i „div” o nazwie „Border” i piszemy linię w tym „Div”. Teraz musimy zastosować nieruchomość graniczną na „div” dostarczonym przez CSS.

Kod CSS:
W przypadku nagłówka po prostu zmieniamy kolor tła na „różowy”, a następnie przechodzimy do klasy DIV o nazwie „Border”. Stosujemy do niego różne właściwości. Szerokość tego „granicznego” Div wynosi „100%”, a wysokość to „200px”. Kolor jego tła to „Light Sky Blue”. Następnie używamy „LEWETU” i ustawiamy „4px” dla szerokości lewej granicy. Ta granica jest ustawiona na typ „przerywany”. A kolor tej lewej granicy jest ustawiony na „czerwony”.

Wyjście:
Widzimy tutaj, że nasze tło nagłówka wydaje się „różowe” i nie ma granicy na ten nagłówek. Następnie mamy wiersz, który napisaliśmy w „Div”. Oto lewa granica tej linii. Granica pojawia się jako „czerwony” i jest kropkowana. W naszym kodzie CSS wybraliśmy te kolory i style.

Przykład nr 3
Używamy tego samego kodu HTML, który napisaliśmy w naszym poprzednim przykładzie. Tutaj, w CSS, ustawiamy kolor „lekki koral” dla tła nagłówka. „Rodzina czcionki” używana do tego jest „Algierska”. Używamy nazwy „Div” „Border” i ustawiamy jej szerokość na „110%” i ​​jej wysokość na „210px”. Kolor jego tła to „pomarańczowy”. Tutaj mamy nieruchomość „lewica graniczna”. W tej właściwości szerokość granicy, która pojawia się po lewej stronie, jest ustawiona na „8px”. Rodzaj granicy, którą tutaj ustawiliśmy, jest „solidny”. Musimy ustawić kolor dla tej granicy, więc ustawiamy go na „pomarańczowy”.

Wyjście:
Wyjście pokazuje granicę po lewej stronie w kolorze zielonym, a szerokość tej granicy to „8px”. Ustawiliśmy tę granicę za pomocą nieruchomości „lewicowej”.

Przykład nr 4
Tutaj tło nagłówka to „Bord”, „Font-Family” to „Times New Roman”, a kolor „czcionki” jest „biały”. Teraz przychodzi „Div”. Ustawiamy jego „szerokość” i „wysokość” odpowiednio na „120%” i ​​„220px”. Kolor tła dla tego jest ustawiony na „lekko zielony”. Ponownie używamy właściwości „LEST” i tym razem ustawiamy typ „podwójny”. Ten „podwójny” pojawi się jako „podwójne linie” po lewej stronie. Kolor tej podwójnej granicy jest „czarny” i „9px” w „szerokości”.

Wyjście:

Przykład nr 5
Tutaj mamy jeden nagłówek, jeden akapit i jeden div. Użyjemy różnych rodzajów obramowania po lewej stronie wszystkich, używając wbudowanej właściwości CSS.

Kod CSS:
W przypadku nagłówka typu granicznego jest „solidna”, „5px” szerokości i jest ustawiony na „zielony” w kolorze. Do akapitów ponownie używamy „granicy”. Tym razem rodzaj tej granicy jest „kropkowana”, a kolor jest „niebieski”. „Was-czcionka” akapitu jest „odważna”, a rozmiar czcionki akapitu wynosi „20px”. Mamy również „div”, w którym ustawiamy lewy typ graniczny jako „kropkowany”, „4px” i „czerwony” odpowiednio dla „szerokości” i „koloru”.

Wyjście:
Lewa granica nagłówka, akapitu i div pojawia się w różnych typach. Nagłówek na lewej granicy jest solidny zielony. Lewa granica akapitu jest w typu kropkowanym i kolorowym. Lewa granica div jest w typu podwójnym, a kolor tego wydaje się „czerwony”.

Przykład nr 6
W naszym ostatnim przykładzie stworzyliśmy „nagłówek”, „div”, „akapit” i „rozprzestrzenianie się”. Używamy różnych granic na tych wszystkich. Stosujemy na nich lewą granicę.

Kod CSS:
Do nagłówka stosujemy „w stylu granicznym”, który jest „kropkowany”. „W stylu czcionki” jest „kursywa”, a kolor tła jest „jasnoniebieski”. Teraz przychodzi „Div”. Pełna granica tego jest typ „kropkowana”, a „granica graniczna” jest „5px” w szerokości „solidnej” i „bordowej” w kolorze. Tło „Div” jest ustawione na „różowy”, „20px” i wyrównany w „środku”. Następnie stosujemy „linię graniczną” do szerokości „6px”, typu „solidnego” i koloru „magenta”. Kolor tła tego akapitu jest „jasnozielony”. „Rozmiar czcionki”, którego tu używamy, to „25px” i jest wyrównany w „środku”. Teraz stosujemy właściwość „lewicowa”, która jest używana do „rozpiętości” i ustawiamy szerokość, typ i kolor tego „granicy” na typ „9px”, „podwójny” i „żółty”. Jego „rozmiar czcionki” to „27px”, a tekst jest wyrównany w „środku”.

Wyjście:
W tym wyjściu istnieją różne lewe granice dla tych wszystkich. Zastosowaliśmy tutaj trzy style graniczne, które są „kropkowane”, „solidne” i „podwójne”.

Wniosek

W tym przewodniku zbadano koncepcję nieruchomości „na granicy” w CSS. Po przeczytaniu tego przewodnika dowiedzieliśmy się, że ta nieruchomość jest skrótem własnością trzech nieruchomości. Używaliśmy tylko jednej właściwości zamiast używać trzech właściwości-„granica-lewą szerokość”, „w stylu granicznym” i „granicowo-lewym kolorze”. Tutaj zbadaliśmy sześć różnych przykładów i wyjaśniliśmy każdy przykład w tym przewodniku, dostarczonym z ekranem wyników tych kodów. Teraz, po przestudiowaniu tego przewodnika, będziesz mógł korzystać z tej nieruchomości w swoich projektach lub stronach internetowych.