CSS Inline -grense

Inline og disposisjonene er de to grunnleggende egenskapene til styling alt innhold som er opprettet i en HTML -kropp - enten et stykke tekst, form eller bilde. Et hypertekst markeringsspråk er kombinasjonen av kode som brukes til å lage et innhold på en webside. Dette innholdet er stylet og justert gjennom flere tagger ved hjelp av det kaskaderende stilarket.

En inline grense er en eiendom som legges til HTML -innholdet for å fremheve den spesifikke delen ved å gi en farge eller en hvilken som helst solid eller prikket eiendom til grensen. Denne opplæringen inneholder noen eksempler på å lage og designe en CSS inline -grense.

Eksempel nr. 1: Strikket grensen i linjen

Først forklarer vi CSS -stildelen inne i hodemerket. Den interne stylingen inneholder ID -er og klasser for å bruke stylingen på det aktuelle innholdet som er utviklet inne i HTML -kroppen. Vi bruker "H1" -stilklassen for overskrift 1 og bruker en lilla farge på den. Den nestede stilen er for div. Dette brukes av bredden og beholderen i piksler. Det er en containerboks som brukes til å lagre det forskjellige innholdet inne i den. Deretter skriver vi en enkel tekst i Div -klassen.

En grense brukes på alle funksjoner i HTML. I dette eksemplet bruker vi en grense på divklassen rundt teksten vi bruker. Så stilerklæringen for grensen blir brukt på DIV -klassen. “One” er opprettet som er nevnt inne i Div -taggen slik at alle grenseeffektene blir brukt på DIV -beholderen.

Det er tre grunnleggende stiler med innhold som brukes på diven. Den ene er grensetypen, som enten er solid eller prikket. Vi velger den solide grensen med en svart farge med en bredde på 5 piksler.

Den neste eiendommen er eiendommen til grenseinnsatsen. Denne stilegenskapen er valgt som stiplet. Dette betyr at de vertikale linjene på grensen er stiplet, mens de horisontale linjene er enkle faste stoffer. Hvis vi ikke nevner noen stilegenskaper på grensene, blir den som standard valgt som en solid grense. Fargen på bakgrunnen i div er satt som rosa. Dette gjøres for å diskriminere Div -delen fra bakgrunnen på hele nettsiden.

HTML -stilkode:

Leder mot HTML -kroppsdelen, designer vi hvert innhold i HTML i midten av websiden. Først brukes stilmerket. BG -fargen som står for bakgrunnsfargen på nettsiden er satt inne i kroppskoden. En overskrift er erklært. Etter å ha brukt en liten pause, for å unnslippe en enkelt linje i HTML, er DIV -taggen erklært med klassen CDD -erklæring.

HTML Body Code:

Denne klasseerklæringen er ansvarlig for å anvende alle stileffektene relatert til grensen. Lukk nå alle taggene og lagre tekstfilen. Kjør denne filen i nettleseren for å se resultatet av denne koden.

Produksjon:

Du vil se at BG -fargen brukes sammen med overskriftene. En div er designet med at grensen har solid natur, med grensen i linjestilen som stiplet. Så ved å bruke en stiplet inline eiendomsverdi, kan vi få en utdata som denne.

Eksempel 2: Solid Border-Inline-stil med horisontal skrivemodus

Inne i kroppsdelen av HTML er HTML -koden nesten den samme som vi brukte i forrige eksempel. En kode er skrevet inne i senterkoden, med en deklarert div. Inne. Et klassenavn "Eksempel tekst" er ansvarlig for alle effektene. Og endringene som ble brukt på avsnittet

er grensesaken. Lukk alle taggene og gå til hodedelen for å designe innholdet inne i Div med en grense.

HTML Body Code:

Gå til stilkoden inne i hodeseksjonen. Vi legger CSS først til Div Container. Bakgrunnsfargen brukes på DIV med høyden og bredden for å lage en boks i bakgrunnen.

HTML -stilkode:

Da vi la til et eksempel tekstklasse til avsnittet i Div, bruker vi nå grensestylingen på teksten. I denne klassen bruker vi en stil i skrivemodus til avsnittet. For eksempel bruker vi en vertikal skrivemodus. Teksten vises fra topp til bunn i stedet for standard horisontal stil som er fra venstre til høyre.

Dessuten er grensen stylet som en solid lilla farge. Inline -stilegenskapen til grensen er satt som solid. Så grensen er en solid rektangelform rundt teksten i vertikal retning. Nå utfører vi koden i nettleseren.

Produksjon:

Du vil se at det opprettes en vertikal visning av teksten. Denne teksten har en kant rundt seg som har en spesialitet med fast 5 piksler tykkelse og fast inline grensestil.

Tatt i betraktning det samme tidligere eksempelet, bruker vi noen forskjellige effekter på koden. Å bruke skrivemodus på motsatt måte ved å bruke grensestilen og endringer i linjen kan føre til en annen effekt på teksten vi bruker for å fremheve HTML.

Stilkode:

Når det gjelder div, økes bredden og høyden for å danne en stor rektangulær boks. Tilsvarende endrer vi også verdiene i ".Eksempletekst ”-klasse for å bruke effekten på grensen.

Vi bruker skrivemodus for teksten, ettersom det er tekstegenskapen, i horisontal retning. Det betyr at teksten er akkurat som standardlinjen som starter fra venstre retning til høyre. Grensen er satt som prikket med 5 piksler i bredden og magenta. Mens grensenes inline -stil blir tatt som den samme solide eiendommen. Alle de andre effektene som bakgrunnsfargen er de samme, og all koden inne i er også de samme.

Produksjon:

Når du kjører filen i nettleseren, vil du se at det opprettes en horisontal tekstlinje sammen med en grense med en stiplet linje. På denne måten kan vi skape grenser som varierer i form og stil.

Konklusjon

Den inline grensestilen spiller en essensiell rolle i å style grensen til teksten og bildet, eller noen form for form. Vi prøvde i denne opplæringen å gi deg de beste eksemplene på Inline CSS -grenser ved å bruke HTML -koden og CSS -styling inne i filen. I starten ga vi en oversikt over HTML- og CSS-frontspråket. I implementeringsdelen implementerte vi først grensen rundt teksten med spesifiserte grenseriets egenskaper. Grensen er avhengig av skrivestilen; den former seg selv i henhold til tekststilen. For eksempel, for den vertikale skrivestilen til teksten, er grensen i den vertikale retningen.