Kolonneegenskaper i CSS | Forklart

Ofte krever strukturen til webdesign. Dessuten er det ikke nødvendig å dele inn innholdet, og gi disse kolonnene en viss stil er også nødvendig. CSS gir en rekke egenskaper for å dele inn innholdet i et nettsted i forskjellige kolonner effektivt. Disse egenskapene blir referert til som kolonneegenskaper som er vervet nedenfor.

1. Kolonne-tellingseiendom
2. Kolonnefyllingseiendom
3. Kolonne-gap-eiendom
4. Kolonne-regelegenskap
5. Kolonne-rule-farget eiendom
6. Eiendom på kolonne-regel
7. Kolonne-reglerbreddeegenskap
8. Kolonne-span-eiendom
9. Kolonnebreddeegenskap
10. Kolonneregenskaper

La oss lære dem i detalj.

Kolonne-tellingseiendom

For å dele innholdet et element inneholder i antall spesifiserte kolonner, brukes denne egenskapen.

Syntaks

Kolonne-telling: Auto | nummer | Opprinnelig | arve;

Parametere forklart

Auto: Dette er en standardverdi som evaluerer antall kolonner på grunnlag av andre egenskaper som kolonnebredde.

Antall: Denne verdien deler innholdet i det gitte antall kolonner.

Eksempel

Anta at du vil dele innholdet ditt i to kolonner, og følg eksemplet nedenfor.

I eksemplet over tok vi et langvarig avsnitt og plasserte det inne i en DIV-beholder, og ved å bruke den kolonnelle egenskapen, delte vi opp avsnittet i to kolonner.

Kolonnefyllingseiendom

Eiendommen som bestemmer hvordan innholdet i et element vil bli balansert når det er delt inn i kolonner blir referert til som kolonnefyllingsegenskapen.

Syntaks

Kolonne-Fill: Auto | balanse | Opprinnelig | arve;

Parametere forklart

Auto: Denne verdien fyller kolonnene på en slik måte at innholdet bare tar opp den nødvendige plassen i hver kolonne, og dette kan etterlate visse kolonner tom.

balansere: Denne verdien deler innholdet i hver kolonne likt.

Eksempel

Eksemplet nedenfor viser balanseparameteren til eiendommen som diskuteres.

Her har vi definert kolonnetellingen som 3 og gitt en viss høyde til DIV-beholderen; Nå vil balanseparameteren til den kolonnefyllingsegenskapen like dele avsnittet i hver kolonne.

Kolonne-gap-eiendom

For å definere gapet mellom hver kolonne, brukes kolonne-gap-egenskapen.

Syntaks

Kolonne-gap: Normal | lengde | Opprinnelig | arve;

Parametere forklart

normal: Dette er en standardverdi som sier et normalt gap mellom kolonnene.

lengde: Denne verdien spesifiserer gapet mellom kolonnene i form av lengde.

Eksempel

Tenk på et eksempel for å forstå hvordan Column-Gap-egenskapen fungerer.

I eksemplet over bruker vi lengdeparameteren til kolonne-gap-egenskapen og har satt den til 30%.

Kolonne-rule-farget eiendom

For å gi litt farge til kolonnestyret, brukes denne egenskapen.

Syntaks

Kolonne-rulefarge: Farge | Opprinnelig | arve;

Parametere forklart

farge: Denne verdien oppgir fargen på regelen.

Eksempel

Anta at du vil gi regel en blå farge med en solid stil.

Eksemplet over sier at avsnittet må deles inn i tre kolonner med en regel med en blå farge og en solid stil. Bruk egenskapen til kolonne-rule-fargen sammen med egenskapen.

Eiendom på kolonne-regel

Som navnet antyder, gir egenskapen til kolonnestyrestil en viss stil til regelen som er til stede mellom forskjellige kolonner.

Syntaks

Kolonne-regelstil: Ingen | stiplet | skjult | stiplet | solid | dobbelt | Groove | innsatt | utgang | ås | Opprinnelig | arve;

Parametere forklart

ingen: Dette er en standardverdi som spesifiserer ingen stil.

stiplet: Denne verdien spesifiserer en stiplet stil.

skjult: Det sier en skjult stil.

Strikket: Den spesifiserer en stiplet regelstil.

fast: Den beskriver en solid stil.

dobbelt: Det sier en dobbel regelstil.

spor: Den spesifiserer en 3D -rillet regelstil.

innsatt: Det sier en 3D -innsats stil.

utgangspunktet: Den spesifiserer en 3D -startende regelstil.

ridge: Det sier en ridet stilregel i 3D.

Eksempel

La oss gi regelen en stiplet stil.

Eksemplet over demonstrerer den stiplede stilen til regelen. Du kan bruke andre verdier av egenskapen til kolonnestyrestil i henhold til ditt ønske.

Kolonne-reglerbreddeegenskap

Denne egenskapen gir en viss bredde til regelen mellom flere kolonner.

Syntaks

Kolonne-regler-bredde: Lengde | medium | tynn | tykk | Opprinnelig | arve;

Parametere forklart

lengde: Denne verdien spesifiserer bredden på regelen i tall.

medium: Dette er en standardverdi som angir bredden på regelen til medium.

tynn: Den definerer en tynn bredde på regelen.

tykk: Den definerer en tykk bredde på regelen.

Eksempel

Eksemplet nedenfor viser hvordan egenskapen.

Vi har satt bredden på regelen til 5px med en solid stil i koden ovenfor. For å se effekten av egenskapen til kolonne-regelbredde, bruk den med egenskapen til kolonnestyrestil.

Kolonne-regelegenskap

For å gi en viss bredde, stil og farge til regelen mellom forskjellige kolonner, brukes kolonnestyregenskapen. Dette er en kortfattet eiendom for følgende egenskaper.

1. Kolonne-rulefarge

2. Kolonne-regelbredde

3. kolonnestyrestil

Syntaks

Kolonnestyring: kolonnelengfarge | Kolonne-regelbredde | Kolonne-regel-stil | Opprinnelig | arve;

Parametere forklart

kolonnelengde: Denne parameteren spesifiserer regelfargen.

Kolonne-regelbredde: Denne verdien spesifiserer regelbredden.

kolonnestyrestil: Denne verdien spesifiserer stilen på regelen.

Eksempel

Kontakt eksemplet nedenfor for å forstå eiendommen som diskuteres.

I eksemplet ovenfor har vi definert at bredden på regelen skal være 5px med en stiplet stil og en rosa farge.

Kolonne-span-eiendom

Eiendommen som beskriver antall kolonner som et element skal spenne kalles egenskapen til kolonnespanen.

Syntaks

Søylespenn: Ingen | alle | Opprinnelig | arve;

Parametere forklart

ingen: Dette er en standardverdi som spesifiserer at elementet vil spenne over en enkelt kolonne.

alle: Denne verdien uttalte at elementet vil spenne over hver kolonne.

Eksempel

La oss se hvordan ingen verdi av kolonnen-span-eiendommen fungerer.

For å demonstrere konseptet med kolonne-span-egenskapen har vi først foretatt en overskrift inne i DIV-beholderen, og deretter sett den kolonne-span-egenskapen til overskriften til ingen. Derfor blir overskriften justert inne i en av kolonnene. Imidlertid plasserer all -parameteren overskriften over kolonnene som dette.

Overskriften ble skilt fra kolonnene ved bruk av alle parameter.

Kolonnebreddeegenskap

Som navnet antyder, gir egenskapen til kolonne bredde kolonnebredde.

Syntaks

Kolonnebredde: Auto | lengde | Opprinnelig | arve;

Parametere forklart

Auto: Dette er en standardverdi som spesifiserer at bredden på kolonnen vil bli evaluert av nettleseren.

lengde: Denne verdien definerer kolonnebredden i tall.

Eksempel

Anta at du vil gi kolonnene en viss bredde etter ditt eget valg, og bruk lengdeparameteren.

Her har vi satt kolonnebredden til 100px.

Kolonneregenskaper

Dette er en shorthand-eiendom for egenskaper og kolonnebreddeegenskaper.

Syntaks

Kolonner: Auto | kolonnetelling | Kolonnebredde | Opprinnelig | arve;

Parametere forklart

Auto: Dette er en standardverdi som gir både tellingen og bredden på kolonnene

kolonnetelling: Denne verdien sier det maksimale antallet av kolonnene

kolonnebredde: Denne verdien beskriver minimumsbredden på kolonnene.

Eksempel

Tenk på eksemplet for å forstå kolonnens egenskap.

Vi har satt kolonnetellingen til 2 med en bredde på 100px.

Konklusjon

Å dele innholdet som vises på et nettsted i kolonner og gi disse kolonnene en viss stil kan utføres ved hjelp av forskjellige CSS -egenskaper som faller inn under kategorien kolonneegenskaper. Det er en rekke kolonneegenskaper som kolonnetelling, kolonne-regel, kolonne-span, kolonnebredde, kolonnelengde, etc. Hver av disse egenskapene tjener et annet formål som vi har demonstrert sammen med hjelp av relevante eksempler.