CSS -disposisjon forklart

CSS -disposisjon inneholder sett med egenskaper for å tilpasse farger, stiler, forskyvning og bredde på konturen. Outline-fargen, konturbredden, konturstil og disposisjons-forskyvningsegenskaper til CSS Outline Assist i å tilpasse disposisjon. Bortsett fra disse gir CSS -skisseren Shorthand -egenskapen den samme funksjonaliteten i en enkelt linjesyntaks. Denne artikkelen gir den detaljerte guiden om CSS -disposisjonsegenskaper, og den vil tjene følgende læringsutbytte:

• Arbeid av CSS -skissegenskaper
• Bruk av CSS -disposisjon (med eksempler)

Hvordan CSS -disposisjon fungerer

CSS -disposisjonsegenskapene har en tendens til å utføre forskjellige tilpasninger av disposisjon. Denne delen gir anbefalt syntaks og arbeid av alle CSS -disposisjonsegenskapene.

CSS -disposisjon (stil): Syntaksen gitt nedenfor hjelper til med å endre disposisjonsstilen.

velger disposisjonsstil: verdi;

• velger: velgeren er et element eller CSS-klassen som eiendommen vil bli brukt
• verdi: Verdien av stil kan prikkes, stiplet, dobbel, solid, rille, skjult, ingen og flere.

CSS -disposisjon (bredde): Bredden på konturen kan settes ved hjelp av konturbreddeegenskapen til CSS og kan brukes på følgende måte.

velger disposisjonsbredde: verdi;

verdi: Den aksepterer få forhåndsdefinerte verdier som tynne, middels og tykk. Linjevekten for tykk er 1px, for medium er 3px og for tykk er 5px (alle disse er omtrentlige verdier). Dessuten kan brukeren også spesifisere verdien i PX, EM, CM, MM.

CSS -disposisjon (farge): Fargen på omrisset er definert ved å bruke syntaks.

velger disposisjonsfarge: verdi;

verdi: Denne fargeverdien kan gis på mange måter. Det nøyaktige navnet (for eksempel rød, blå) av fargen kan brukes, heksadesimal verdi av fargen, RGB/RGBA -mønsteret, inverter (for å synliggjøre omrisset uavhengig av bakgrunnsfargen) og HSL.

CSS -disposisjon (forskyvning): Vanligvis starter omrisset like etter grensen, men forskyvningseiendommen kan brukes til å legge til plass mellom omrisset og grensen til et element. Syntaksen til Offset -egenskapen er:

velger disposisjons-offset: verdi;

verdi: Den aksepterer verdiene PX, EM, REM, CM, MM. PX er et statisk tiltak, mens REM- og EM -tiltakene er responsive, da de er avhengige av foreldrenes verdier.

CSS skisserer Shorthand -eiendom: CSS -disposisjonen Shorthand -egenskapen gjør det mulig å legge til bredde, farge og stil til en oversikt over elementet ved hjelp av en enkeltlinjekode. Følgende artikler refererer til Shorthand -egenskapen:

velger disposisjon: verdi1 Value2 Value3;

Verdien1, verdi2 og verdi 3 relaterer seg til bredde, stil og fargeverdier for omrisset av et element.

Hvordan bruke CSS -disposisjon

Denne delen illustrerer flere eksempler som presenterer bruken av CSS konturbredde, konturstil, disposisjonsfarge, disposisjons-offset og disposisjon for korthåndsegenskap.

Eksempel 1: Bruke konturbredde, konturstil, disposisjonsfarge og disposisjons-offset

Dette eksemplet demonstrerer CSS -disposisjonsegenskapene individuelt ved å bruke koden vist nedenfor.

Fargestrød, bredde og forskyvning i PX, stil-dashed

Farge-RGB, bredde og forskyvning i %, stil-solid

fargeleks, bredde og forskjøvet i EM, stil-dobbel

Beskrivelsen av koden er gitt nedenfor:

• Tre CSS -klasser er opprettet kalt “Sty”, ”Stya” og “Styb”. Hver klasse er definert for å bruke konturegenskaper med forskjellige måleenheter eller verdier støttet av dem.
• "Sty" -klassen bruker den røde som farge, bredde og forskyvning er definert i PX hvor konturstil er stiplet
• "Stya" bruker RGB -farge, bredde og forskyvning i mm, og stilen er solid
• "Styb" bruker sekskantverdien av farge, bredde og forskyvning i EM, og stilen er prikket
• Avsnittene i dette dokumentet er stylet i "Groove" med "svart" farge og marginbunn på "25px".

Bildet av koden vises nedenfor:

Produksjon:

Utgangen inneholder tre avsnitt, den første bruker "Sty" -klassen, der den andre og tredje benytter seg av "Stya" og "Styb" -klasser.

Eksempel 2: Bruke CSS -disposisjonen Shorthand -eiendom

CSS -disposisjonen Shorthand -egenskapen lar deg implementere bredden, fargen og stilen til omrisset i en enkelt linje. Koden som er gitt nedenfor praktiserer konturen Shorthand -eiendom:

bredde-medium, stil-dobbel, fargegrønn

Bredde-4px, stil-solid, fargeblå

Bredde-tynne, stil-groove

Stil-prikket

Bredde-medium, fargeoransje

Beskrivelsen av koden er

• For det første er få avsnittsstiler definert
• Initialiserte fem CSS -klasser kalt “Outa”, “Outb”, “Outc”, “Outd” og “Outte” for Outline Shorthand -eiendom
• "Outa" og "outb" -klassene bruker Shorthand -egenskapen til å sette "bredde", "stil" og "farge" på disposisjonen
• "Outc" og "Outte" -klassene endrer to egenskaper, mens "Outd" tilpasser stilen

Produksjon:

Ovennevnte utdata viser at hvis stilen til omrisset Shorthand -egenskapen ikke blir vurdert, vil du ikke kunne få disposisjonen.

Konklusjon

CSS -disposisjonen gjør det mulig å endre fargen, bredden, stilen og forskyvningen på konturen. Denne artikkelen gir mulige måter å utøve CSS -disposisjonsegenskaper for å endre disposisjonen. Outline-fargen, konturbredden, konturstil og disposisjons-offset-egenskapene til CSS-disposisjonshjelp til å tilpasse disposisjonen. I tillegg bistår CSS -skissere Shorthand -eiendommer med å endre farge, bredde og stil ved å bruke en enkelt linjekode. For bedre undervurdering gir dette innlegget arbeidsmekanismen ved hjelp av syntaks. Du vil også få settet med eksempler som viser implementering av alle disse egenskapene individuelt og konturskortshånd.