Et kaskaderende stilark er et språk som brukes til å legge til effekter på HTML -språket. Uten CSS er HTML på en eller annen måte ikke i stand til å vise innholdet på den måten websiden skal være. Begge språkene er med andre ord ansvarlige for å utvikle og designe websider. I denne artikkelen skal vi forklare en eiendom av CSS som er ansvarlig for å gi alle dimensjoner i et enkelt eiendomssett, innsatt. Disse dimensjonene inkluderer egenskaper til høyre, topp, topp og venstre for alt innhold som tekst eller bilde osv.

For å forklare arbeidet med innsatt eiendom, har vi brukt noen grunnleggende eksempler i tekstredigereren ved å bruke inline og intern CSS. Den grunnleggende syntaksen som brukes til innsatt eiendom er:

Det er ikke nødvendig å ta alle verdier i piksler, % kan brukes alternativt. Tilsvarende er ikke ordren for dimensjonen spesifisert. Det kan endres.

Eksempel 1:

For å forklare arbeidet med CSS Inset -egenskapen, vil vi lage noe grunnleggende HTML -innhold for å danne en prøve på websiden. Uten å style hva de enkle HTML -kodene er ansvarlige for, vil dette sees fra utgangen. Dette gjøres ved å bruke overskrift

En enkel dristig tekst og et avsnitt som er nevnt inne i Div. Alle disse taggene er skrevet inne i taggen til Center, denne taggen vil justere alt innholdet i HTML til sentrum. Denne typen styling er inline CSS.

Lagre koden med HTML -utvidelsen og åpne den i nettleseren. Du vil se at en statisk webside bare dannes med teksten som overskrift og et avsnitt.

Nå vil vi legge til interne CSS til de ovennevnte HTML -kodene. Alle taggene er de samme, men har en ekstra klasse erklæring.

Først vil vi lage en overskrift. Deretter den dristige teksten. Gi litt pause
. Denne taggen er ansvarlig for å hoppe til neste linje og danne et tomt mellomrom mellom den vanlige teksten og Div. En DIV -tag brukes til å lage en DIV -beholder for å lagre annet innhold av HTML (som tekst, bilder og etc.,) der et avsnitt er erklært. Klassenavnet 'One' i avsnittet er nevnt slik at alle effektene erklæres i stilarket er tilgjengelig og brukt på dette avsnittet.

1

Lukk Div ​​-taggen og midtkoden. Inne i hodet vil vi bruke en tittelkode for å oppgi et navn til nettstedet. Denne tittelen vises på fanen i nettleseren.

Bruk stilkoden. Inne i den taggen, bruk en stil for overskriften. Vi har brukt en skriftfarge på overskriftsteksten. Dette er en intern CSS. Tilsvarende brukes div til å bruke effekter på det. For det første settes bakgrunnsfargen på diven. Deretter legges dimensjonene som er nødvendige for størrelsen på Div for å danne en effekt. Disse dimensjonene inkluderer bredde og høydeverdier i piksler.

Etter å ha brukt disse effektene, har vi laget en klasse, '.en ', hvis navn ble nevnt i avsnitts -taggen. Klassen er erklært med en prikk i starten som spesifiserer den som en klasse.

Klassen og ID -ene i HTML CSS er dannet for å bruke styling på HTML -innholdet. Ved å bruke denne mekanismen, kan vi avstå fra den inline CSS -stylingen som gjør hele koden rotete. Mens den interne CSS gjør stilkoden lett forståelig og gjør koden kort. Vi trenger bare å legge til disse klasse- og IDS -navnet på CSS. I de spesifikke HTML -kodene, der vi ønsker å bruke effektene som er nevnt i klassen eller ID -ene, nevnt i intern CSS.

Kommer tilbake til '.Én 'klasse, i den innsatte egenskapen for avsnittet, har vi brukt 4 verdier i piksler. Verdiene kan også nevnes i prosenter. Innsettingsverdien inneholder alle 4 topp-, høyre-, bunn- og venstre verdier for at avsnittet skal dannes inne i DIV -beholderen.

1 2 3 4 5

.en Innsatt: 10px 40px 30px 0px;

Disse 4 verdiene er marginverdiene i avsnittsteksten fordi disse verdiene justerer teksten i Div. Bakgrunnsfargen er også gitt til avsnittet. Alle innlagte verdier for justering er bare for teksten i diven.

Lukk alle CSS og hodemerker og lagre filen. Når vi kjører denne filen i nettleseren, vil du se at alle de effektene som brukes på HTML -kroppsinnholdet blir brukt, spesielt i avsnittsdelen. e har lagt bakgrunnsfargen til avsnittet for å vise effekten av innsatsverdier. Alle de 4 innsatsverdiene brukes på avsnittsteksten.

Eksempel 2:

Span er også en slags div container som for det meste bærer tekst i den. Disse to HTML -innholdet Div og Span er stylet gjennom interne CSS. Så først vil vi utdype stildelen. DIV -beholderen brukes med bakgrunnsfarge, høyden og bredde dimensjoner, og med skriftfargen. Denne CSS -stilen vil skape en div med noen effekter.

Nå, klassen “.Eksemplertekst ”. Denne klassen får tilgang til spennteksten bare inne i Div. CSS i denne klassen inneholder en skrivemodus for teksten som er vertikal slik at teksten kan okkupere mindre plass. Deretter settes den innsatte egenskapen også deretter. Alle innsatsverdiene i piksler er gitt for å opprettholde den marginale avstanden mellom teksten og grensene for div.

1 2 3 4 5 6 7

.Eksempler skrivemodus: vertikal-RL; Posisjon: Absolutt; Innsett: 40px 50px 30px 60px; Bakgrunnsfarge: #F8FC08;

Etter hodeseksjonen inneholder kroppen bare DIV -taggen og en spennmerke inne i Div -taggen.

Lagre koden og kjør filen. Du vil se at DIV og spennet vises i henhold til innsatsverdiene som brukes på teksten. Innsettingsverdiene vises nøye for å fikse teksten i den.

Nå, hvis vi gjør noen endringer ved å endre innsatsverdiene på en slik måte at vi bare bruker to verdier av innsats i stedet for 4, mens alle andre verdier forblir de samme, så hva vil det være det resulterende bildet?

1 2 3 4

.Eksempler innsatt: 4px 8px;

Vi har satt 4 og 8px. Den resulterende websiden vil inneholde div og teksten som har plassen nær Div. Dette er fordi vi har fjernet to verdier av den innsatte egenskapen, og også de første øverste høyre verdiene tilsvarer også 0px.

Konklusjon:

CSS Inset -egenskap brukes til å legge til verdier til dimensjonen til HTML -innholdet kollektivt. For å utdype dette konseptet, startet vi med å gi en oversikt over HTML og CSS og typene som brukes i denne artikkelen. Den innsatte egenskapen hjelper brukeren til å legge til margin til det indre innholdet respektive til det ytre, enten ved å ha alle fire dimensjoner kollektivt eller ved å eliminere enhver verdi fra eiendommen. Videre diskuteres to eksempler for å utdype funksjonen og arbeidet med innsatt eiendom på en webside.