CSS vertikal linje
Eksempel 1
Vi bruker Visual Studio Code i å generere en ny fil. Den blanke filen åpnes, og vi må velge et språk. Vi gjør HTML -kode først, så vi velger HTML -språket. Etter dette er den produserte filen en HTML -fil. Vi trenger ikke å gi en filforlengelse når vi lagrer den. Nå, legg de grunnleggende HTML -kodene (eller du kan legge "!”Merk for automatisk å generere disse taggene). Hvis du setter “!”Og trykk deretter“ Enter ”, vil du få alle HTMLs grunnleggende tagger umiddelbart. I kroppen kan du se at det er en overskrift og en DIV -beholder. “V1” er navnet på Div Container. Vi kobler også denne HTML -filen med CSS ved å bruke "link" -merket i "hodet" på denne HTML -koden.
Vi pynter overskriften og bruker egenskapen "tekstdekorasjon" og setter den til å "understreke". Så ved å bruke denne eiendommen vil overskriften bli understreket. Vi bruker også "farge" -egenskapen som setter fargen på teksten på overskriften og setter den til "Blue-Violet". I neste linje har vi "Font-Family" -egenskapen som vi setter som "Times New Roman". Deretter plasserer vi navnet på Div Container som er "V1" og tegner den vertikale linjen i denne DIV -beholderen. Vi kan tegne den vertikale linjen ved hjelp av "grensen" -egenskapen.
Så vi bruker denne eiendommen “grense-venstre” eiendom som hjelper oss med å tegne en vertikal linje. Siden det er egenskapen "grense-venstre", må vi sette "bredden", "typen" og "farge" for denne egenskapen til: "10px" i "bredden", "solid" i "type" og “Rød” i “Farge”. Det vil gjengi en vertikal linje på skjermen med 10px bredde og i rødt. Vi setter også "høyden" på denne vertikale linjen som "400px". Nå skal vi produsere utdataene fra denne koden ved å klikke på riktig museknapp og deretter velge "Åpne i standard nettleser". Eller du kan bruke snarveien som er "Alt+B" for å få utgangen.
Utgangen vises nedenfor. Du kan se den vertikale linjen. Denne linjen er gjengitt på venstre side, da vi har brukt egenskapen "grense-venstre" for å tegne denne vertikale linjen.
Eksempel 2
I eksempel 2 legger vi til et avsnitt i HTML -koden ovenfor. Nå har vi en overskrift, et avsnitt og en DIV -beholder i denne HTML -koden. Etter dette fortsetter vi med CSS -filen for å generere CSS -koden.
Dekorer overskriften litt ved å bruke egenskapen "tekst-dekorasjon" og sette den til "stiplet" og bruke "rød" som verdien av egenskapen "farge". "Algerier" brukes som "font-familiens". Nå, bruk litt styling på avsnittet og setter sin "fontstørrelse" til "20px". Vi bruker "grønt" som verdien av "farge" -egenskapen. Bruk også “calibri” som en “font-family”. Det "dristige" nøkkelordet brukes her som "fontvekt".
Bruk Div som heter “V1” og legg “Border-Left” -egenskapen. Denne egenskapen hjelper til med å tegne en vertikal linje inne i DIV -beholderen. "Bredden" på den vertikale linjen er "10px". Denne linjen vises i "solid" type fordi vi setter "solid" som typen av grenseegenskapen. Fargen på den vertikale linjen er “oransje”. "Høyden" bestemmer høyden på linjen som vi setter som "400px". "Posisjonen" til den vertikale linjen er "absolutt". Vi setter "venstre" til "50%" slik at denne vertikale linjen vises på 50% venstre side i midten. "Margin-venstre" er "-3px". Denne egenskapen brukes til å definere rommet utenfor objektet på venstre side. Vi setter også "toppen" av den vertikale linjen som "50px".
Den vertikale linjen vises på 50% venstre side av utgangsskjermen fordi vi setter denne verdien i CSS, og vi har brukt egenskapen "Border-Left" for å tegne denne linjen.
Eksempel 3
Nå skal vi tegne to vertikale linjer. Så vi legger to forskjellige DIV -containere i denne HTML -koden. Vi vil bruke hver div til å tegne vertikale linjer hver for seg. Overskriften og avsnittsmerkene er de samme som ovenfor, og vi endrer bare teksten som er skrevet i avsnittsmerker.
I dette tilfellet er "font-family" "algerisk" for overskriften. Sett "fontstørrelse" i avsnittet til "20px" og bruk mer styling på det. For "fargen" bruker vi "lilla". Bruk også "Times New Roman" som en "font-familie". Det "dristige" nøkkelordet brukes som "fontvekt". Vi "understreker" avsnittets tekst ved å bruke "tekstdekorasjon". Vi bruker egenskapen “Border-Left” på Div som heter “V1.”Denne attributtet gjør det mulig å tegne en vertikal linje i DIV -beholderen. Den vertikale linjens "bredde" er "12px" og linjen er "solid" i utseende siden typen av grenseegenskapen er "solid". I dette tilfellet er den vertikale linjen farget "blå". Linjens høyde spesifiserer i "høyden", som vi legger til "400px". Den vertikale linjens "posisjon" er "absolutt". Vi setter "venstre" til "50 prosent", og dermed vil denne vertikale linjen vises på 50 prosent venstre side, som er i midten. "-3px" er "margin-venstre.”“ Toppen ”her er“ 130px ”.
Nå bruker vi igjen de samme egenskapene for Second Div i å lage en annen vertikal linje i Second Div. Vi setter egenskapen "grense-venstre" til "12px solid grønn" og "høyden" for denne linjen er den samme som den første vertikale linjen som er "400px". Vi setter sin "venstre" -egenskap til "20%", og denne linjen vil vises på 20% på venstre side. "Margin-venstre" og "toppen" er den samme som den første vertikale linjen.
Vi kan se at to vertikale linjer gjengis på utgangsskjermen. Begge er gjengitt i en annen posisjon i utgangen når vi setter denne posisjonen i CSS -koden.
Eksempel 4
Vi legger en overskrift og en div i kroppen, og vi skriver også litt tekst i Div Container. Vi vil også tegne en vertikal linje i CSS og koble begge filene.
Juster egenskapen "tekstdekorasjon" for å "understreke" og "grønn" som "fargen" for å legge til ekstra teft til overskriften. Overskriften "font-family" er "algerisk" i dette eksemplet, og det er på linje i "senteret". På Div bruker vi “grense-høyre” attributtet. Innenfor DIV -beholderen gjør dette attributtet en vertikal linje å bli trukket. "Bredden" på den vertikale linjen er "10px" og linjen virker "solid" siden grensegenskapens type er "solid". Den vertikale linjen er farget “goldenrod” i denne koden. "Høyden" indikerer linjens høyde, som vi justerte til "500px". Vi bruker fargen "brun" for "fargen". Endre "fontstørrelsen" av teksten til "23px" og legg til ytterligere dekorasjon til den. Det "dristige" nøkkelordet brukes som "fontvekt" her. I tillegg, som en "font-family", bruk "sans-serif".
På dette skjermbildet er den vertikale linjen gjengitt på høyre side av utgangsskjermen fordi vi har brukt egenskapen "grense-høyre" i dette eksemplet.
Konklusjon
Målet med å presentere denne guiden er å hjelpe deg med å forstå den "vertikale linjen" i CSS. Vi har gått over denne forestillingen i detalj og har gitt deg flere eksempler på hvordan vi har trukket denne vertikale linjen i CSS. Vi har forklart at vi har brukt "grensen til venstre" eller "grense-høyre" for å gjengi denne vertikale linjen i utgangsskjermen. Vi har skrevet her om hvordan du kan gjengi vertikale linjer. Vi har brukt fire forskjellige eksempler her, og vi har gitt utgangen i denne guiden.