CSS -enheter | Forklart

I vårt daglige liv, en "enhet”Av måling er veldig viktig. Den forteller om elementene til elementene, for eksempel hvor lange eller omfattende de er. Måleenheten må spesifiseres etter nummeret. For eksempel, i CSS, er verdien av overgangs-varighetsegenskapen satt som 3S hvor "3”Er tallet, og“s”Er enheten som heter Second. Dessuten tilbyr CSS flere tilnærminger for å bruke enhetene.

Resultatene av denne bloggen er:

• Hva er CSS -enheter?
• Hva er absolutt lengdeenheter i CSS?
• Hvordan bruke absolutte lengdeenheter i CSS?
• Hva er relative lengdeenheter i CSS?
• Hvordan bruke relative lengdeenheter i CSS?

Hva er CSS -enheter?

Det er forskjellige enheter i CSS som brukes til å indikere en lengde eller for måling av CSS -egenskapen. For eksempel, i en CSS -fil, "skriftstørrelse”Eiendom tildeles en verdi av“25px”, Som representerer tallet med enheten”Pixel”(PX). Dessuten skal det ikke være noe hvitrom mellom antallet og den aktuelle måleenheten. Imidlertid, hvis lengdeverdien er 0, kan enhetene utelukkes.

CSS -lengdeenhetene er av to typer: relative og absolutte.

Hva er absolutt lengdeenheter i CSS?

Absolutt lengdeenheter avhenger av en faktisk fysisk enhet. Normalt har de samme størrelse på forskjellige enheter. Disse enhetene anbefales ikke for bruk på skjermene fordi skjermstørrelsen varierer. Imidlertid brukes absolutte lengdeenheter der størrelsen på skjermen er kjent. Disse typene enheter er også nyttige på oppgaver der respons ikke betyr noe.

Hvordan bruke absolutte lengdeenheter i CSS?

Det er flere absolutte enheter brukt i CSS. Noen av dem vises nedenfor:

Enhet	Beskrivelse
pt	Angir målingen i poeng. 1pt = 1/72 på 1 tomme.
i	Angir målingen i tommer. 1in = 96px = 2.54cm
PX	Angir målingen i piksler. 1px = 1/96. av en tomme.
CM	Angir målingen i centimeter.

La oss gå gjennom eksemplet der absolutte lengdeenheter brukes.

Eksempel: Bruke absolutte lengdeenheter i CSS

I HTML, legg først til en div med inline CSS -stil, ved å bruke "margin”Og“polstring" egenskaper. Og så

Tag er plassert for å legge til en overskrift på siden. Flere

Tagger legges til med det aktuelle "skriftstørrelse”I antall som har forskjellige enheter:

Egenskapen "Font-size"

Fontstørrelse: 20px

Fontstørrelse: 20pt

Fontstørrelse: 20in

Fontstørrelse: 20 cm

Fontstørrelse: 20mm

Det kan observeres at teksten med verdier som har forskjellige CSS -absolutte lengder, er vist på websiden:

Hva er relative lengdeenheter i CSS?

I CSS spesifiserer relative lengdeenheter lengden i forhold til den tilsvarende lengdeegenskapen. Sammenlignet med de absolutte lengdene, er relative lengdeenheter mye bedre ettersom de gir skala mellom flere gjengivelsesmedier.

Hvordan bruke relative lengdeenheter i CSS?

Her har vi vervet noen av de hovedsakelig utnyttede relative lengdeenhetene i CSS:

Enhet	Beskrivelse
vh	Utsiktshøyde: relativt til 1% av visningshøyden
VW	Vis bredde: relativt til 1% av visningsportbredden
%	Prosentandel: Det er størrelsen i prosent i forhold til foreldrenes størrelse.
Vmin	Viewport minimum: 1% av Viewports minste dimensjoner.
Vmax	Viewport Maksimum: 1% av Viewports største dimensjoner.

Eksempel: Bruke relative lengdeenheter i CSS

Ved å bruke den samme HTML -koden, vil vi nå bare endre verdien av "skriftstørrelse”Eiendom med relevante relative lengdeenheter:

Egenskapen "Font-size"

Font-størrelse: 3VH

Fontstørrelse: 3ch

Fontstørrelse: 3%

Font-størrelse: 3REM

Font-størrelse: 3VW

Produksjon

Slik kan du bruke forskjellige CSS -enheter i HTML -filene våre.

Konklusjon

Det er to typer lengdeenheter som brukes i CSS: Absolute Lengde -enheter og relative lengdeenheter. De absolutte lengdene er ikke i forhold til noe annet. De er alltid de samme i hver vindusstørrelse, men de relative lengdeenhetene er alltid i forhold til noe, for eksempel overordnede element, font eller visningsstørrelse. Denne artikkelen gir en omfattende guide om CSS -enheter, typen CSS -lengdeenheter og hvordan de kan brukes.