CSS Border-venstre eiendom
I denne guiden vil vi bruke denne egenskapen og utføre forskjellige eksempler der vi bruker denne egenskapen "Border-Left" i CSS.
Eksempel 1
Opprett filen i Visual Studio -koden og velg HTML -språket for å opprette HTML -filen. Vi må bruke denne filen til å skrive avsnitt og anvende egenskapen til grense-venstre på avsnittet. Vi må også koble HTML -filen vår til CSS -filen, slik at all styling som vi gjør på CSS -filen blir brukt på den.
Vi opprettet to avsnitt i denne HTML -koden og kalte dem “P1” og “P2”. Vi setter disse navnene fordi vi må style disse avsnittene separat i CSS. Disse navnene vil hjelpe når vi bruker stilen på dem.
CSS -kode:
For å style avsnitt en, bruker vi navnet “P1”. Her bruker vi de separate egenskapene for å sette grensen til venstre på avsnittet. Først setter vi "grense-venstre bredde" til "10px" for å sette bredden på grensen. Deretter satte vi "grense-venstrefarge" til "magenta". Den setter fargen på venstre kant av avsnittet. Vi setter også "grense-venstre-stil" til "solid". Dette betyr at grensen er "solid". Etter dette satte vi "bakgrunnsfargen" til "P1" til "lysgrønn". Øk "fontstørrelsen" og sett den til "25px", og juster "P1" i sentrum. Nå, kommer “P2”, i stedet for å bruke alle egenskapene til grense-venstre bredde, stil og farge, bruker vi bare en egenskap som er egenskapen "grense-venstre". Vi setter alle de tre stilene i denne ene eiendommen. Vi bruker samme stil, bredde og farge som vi brukte til “P1”. Bakgrunnsfargen, fontstørrelsen og tekst-align er også den samme som i "P1".
Produksjon:
I utgangen er det ingen forskjell mellom avsnitt “P1” og avsnitt “P2”. Så i stedet for å bruke separate egenskaper, prioriterer vi den ene eiendommen som er "grensen-venstre" -egenskap.
Eksempel nr. 2
Vi lager en overskrift og en "div" -klasse med navnet "Border" og skriver en linje innenfor denne "Div". Nå må vi bruke grensen til venstre på "div" levert av CSS.
CSS -kode:
For overskriften endrer vi bare bakgrunnsfargen til "rosa" og flytter deretter til Div -klassen som heter "Border". Vi bruker de forskjellige egenskapene på det. Bredden for denne "grensen" Div er "100%" og høyden er "200px". Fargen på bakgrunnen er “Light Sky Blue”. Etter dette bruker vi "grensen til venstre" og setter "4px" for bredden på venstre grense. Denne grensen er satt til å "strø" i type. Og fargen på denne venstre grensen er satt til “rød”.
Produksjon:
Her ser vi at overskriftsbakgrunnen vår ser ut til å være "rosa" og det er ingen grense for denne overskriften. Deretter har vi en linje som vi har skrevet i “Div”. Her er venstre kant av denne linjen. Grensen fremstår som "rød" i fargen og er prikket. Vi valgte disse fargene og stilene i vår CSS -kode.
Eksempel nr. 3
Vi bruker den samme HTML -koden som vi har skrevet i vårt forrige eksempel. Her, i CSS, setter vi "Light Coral" -fargen for bakgrunnen for overskriften. "Font-Family" som brukes til dette er "Algerie". Vi bruker "Div" -navnet "Border" og setter bredden til "110%" og høyden til "210px". Fargen på bakgrunnen er "oransje". Her har vi eiendommen "grense-venstre". I denne egenskapen er bredden på grensen som vises på venstre side satt til “8px”. Den typen grensen vi har satt her er "solid". Vi må sette fargen for denne grensen, så vi setter den til "oransje".
Produksjon:
Utgangen viser grensen på venstre side i grønn farge og bredden på denne grensen er "8px". Vi setter denne grensen ved hjelp av "grense-venstre" eiendom.
Eksempel 4
Her er overskriftsbakgrunnen "Maroon", "Font-Family" er "Times New Roman" og fargen på "Font" er "White". Nå kommer “Div”. Vi setter sin "bredde" og "høyde" til henholdsvis "120%" og "220px". Fargen på bakgrunnen for dette er satt til “lysgrønn”. Igjen bruker vi egenskapen "Border-Left", og denne gangen setter vi typen til "Double". Denne "doble" vil vises som "dobbeltlinjer" på venstre side. Fargen på denne doble grensen er "svart" og er "9px" i "bredde".
Produksjon:
Eksempel 5
Her har vi en overskrift, ett avsnitt og en div. Vi vil bruke de forskjellige grensetyper på venstre side av alle disse ved å bruke CSS-innebygde eiendom.
CSS -kode:
For overskriften er grense-venstre-typen “solid”, “5px” i bredden, og er satt til “grønn” i fargen. For avsnittene bruker vi "grense-venstre" igjen. Denne gangen er typen av denne grensen "prikket" og fargen er "blå". "Font-vekt" av avsnittet er "fet" og størrelsen på avsnittet er "20px". Vi har også en "div" der vi setter den venstre grensetypen som "prikket", "4px" og "rød" for henholdsvis "bredde" og "farge".
Produksjon:
Venstre kant av overskriften, avsnittet og Div vises i forskjellige typer. Overskriften på venstre kant er solid grønn. Avsnittet venstre grensen er i stiplet type og fargeblått. Div venstre grense er i dobbelttypen, og fargen på dette ser ut til å være "rød".
Eksempel 6
I vårt siste eksempel opprettet vi "overskriften", "div", "avsnitt" og "span". Vi bruker de forskjellige grensene på alle disse. Vi bruker venstre kant på dem.
CSS -kode:
For overskriften bruker vi "grense-venstre-stil" som er "prikket". "Font-stilen" for dette er "kursiv" og fargen på bakgrunnen er "lyseblå". Nå kommer “Div”. Hele grensen for dette er "prikket" type og "grensen-venstre" er "5px" i bredden, "solid" i sin type og "maroon" i sin farge. Bakgrunnen til “Div” er satt til “Pink”, “20px” i størrelse, og justert i “Center”. Etter dette bruker vi "grense-venstre" på "6px" bredde, "solid" type og "magenta" -farge. Bakgrunnsfargen på dette avsnittet er "lysegrønn". "Font-size" vi bruker her er "25px" og er på linje i "senteret". Nå bruker vi egenskapen "grense-venstre" som brukes til "spenn" og setter bredden, typen og fargen på denne "grense-venstre" til "9px", "dobbelt" -type og "gul". Dens "fontstørrelse" er "27px" og teksten er på linje i "senteret".
Produksjon:
I denne utgangen er det forskjellige venstre grenser for alle disse. Vi brukte de tre stilene til grense-venstre her som er "prikket", "solid" og "dobbelt".
Konklusjon
Denne guiden utforsket konseptet “grense-venstre” eiendom i CSS. Etter å ha lest denne guiden, fikk vi vite at denne egenskapen er den korte eiendommen til tre eiendommer. Vi brukte bare en egenskap i stedet for å bruke de tre egenskapene-“grense-venstre bredde”, “Border-venstre-stil” og “Border-venstre-farge” -sattatt. Her undersøkte vi de seks forskjellige eksemplene og forklarte hvert eksempel i denne guiden, forsynt med skjermbildet for utgangene til disse kodene. Nå, etter å ha studert denne guiden, vil du kunne bruke denne egenskapen i prosjektene eller nettstedene dine.