Właściwości kolumny w CSS | Wyjaśnione

Często struktura projektowania stron internetowych wymaga od twórców stron internetowych podzielenia treści na wiele kolumn. Co więcej, samo podział treści nie wystarczy, podanie tym kolumnom określony styl jest również konieczny. CSS zapewnia szereg właściwości do efektywnego podziału treści witryny na różne kolumny. Właściwości te są określane jako właściwości kolumny, które zostały zaciągnięte poniżej.

1. właściwość kolumny
2. Właściwość wypełniania kolumny
3. Właściwość GAP w kolumnie
4. właściwość kolumnowego
5. właściwość koloru kolumnowego
6. właściwość w stylu kolumny
7. właściwość kolumnowej szerokości
8. właściwość kolumnowego
9. właściwość kolumny
10. właściwość kolumn

Nauczmy się ich szczegółowo.

właściwość kolumny

W celu podzielenia zawartości elementu zawiera na liczbę określonych kolumn, ta właściwość jest używana.

Składnia

Count-Count: Auto | liczba | początkowe | dziedziczyć;

Wyjaśnione parametry

automatyczny: Jest to wartość domyślna, która ocenia liczbę kolumn na podstawie innych właściwości, takich jak szerokość kolumny.

numer: Ta wartość dzieli zawartość na podaną liczbę kolumn.

Przykład

Załóżmy, że chcesz podzielić swoją treść na dwie kolumny, a następnie postępuj zgodnie z przykładem.

W powyższym przykładzie wzięliśmy długi akapit i umieściliśmy go w pojemniku Div, a za pomocą właściwości kolumnowej podzieliliśmy akapit na dwie kolumny.

Właściwość wypełniania kolumny

Właściwość, która określa, w jaki sposób treść elementu zostanie zrównoważona po podzieleniu na kolumny, jest określana jako właściwość wypełniania kolumny.

Składnia

wypełnienie kolumn: Auto | Równowaga | początkowe | dziedziczyć;

Wyjaśnione parametry

automatyczny: Ta wartość wypełnia kolumny w taki sposób, że treść przyjmuje tylko wymaganą ilość miejsca w każdej kolumnie, co może pozostawić puste kolumny.

balansować: Ta wartość dzieli zawartość na każdą kolumnę równo.

Przykład

Poniższy przykład pokazuje parametr bilansu omawianej nieruchomości.

Tutaj zdefiniowaliśmy kolumnę kolumnową jako 3 i zapewniliśmy trochę wysokości kontenerowi Div; Teraz parametr bilansu właściwości wypełnienia kolumny będzie równo podzielić akapit w każdej kolumnie.

Właściwość GAP w kolumnie

Aby zdefiniować lukę między każdą kolumną, używana jest właściwość kolumny.

Składnia

Gapa w kolumnie: normalny | długość | początkowe | dziedziczyć;

Wyjaśnione parametry

normalna: Jest to wartość domyślna, która stwierdza normalną lukę między kolumnami.

długość: Ta wartość określa lukę między kolumnami w postaci długości.

Przykład

Rozważ przykład, aby zrozumieć, jak działa właściwość GAP w kolumnie.

W powyższym przykładzie używamy parametru długości właściwości grupy kolumnowej i ustawiliśmy go na 30%.

właściwość koloru kolumnowego

Aby zapewnić trochę koloru regułom kolumn, ta właściwość jest używana.

Składnia

kolor kolumnowy: kolor | początkowe | dziedziczyć;

Wyjaśnione parametry

kolor: Ta wartość stwierdza kolor reguły.

Przykład

Załóżmy, że chcesz nadać regułom niebieski kolor o solidnym stylu.

Powyższy przykład stwierdza, że ​​akapit musi być podzielony na trzy kolumny z regułą o niebieskim kolorze i solidnym stylu. Użyj właściwości koloru kolumnowego wraz z właściwością w stylu kolumny, aby zobaczyć jej efekt.

właściwość w stylu kolumny

Jak sama nazwa wskazuje, właściwość w stylu kolumny nadaje pewny styl regułom obecną między różnymi kolumnami.

Składnia

Style kolumny: Brak | kropkowane | Ukryte | przerywany | Solidny | podwójne | Groove | wstawka | Zaraz |. Ridge | początkowe | dziedziczyć;

Wyjaśnione parametry

nic: Jest to wartość domyślna, która nie określa stylu.

kropkowany: Ta wartość określa styl kropkowania.

ukryty: Oznacza ukryty styl.

Poszukiwany: Określa przerywany styl reguł.

solidny: Opisuje solidny styl.

podwójnie: Oferuje styl podwójnej reguły.

rowek: Określa styl reguły rowku 3D.

wstawka: Oferuje styl 3D.

początek: Określa styl reguł 3D.

grzbiet: W 3D stwierdza zasadę stylów.

Przykład

Podajmy regułę przerywany styl.

Powyższy przykład pokazuje przerywany styl reguły. Możesz użyć innych wartości właściwości w stylu kolumnowym zgodnie z pragnieniem.

właściwość kolumnowej szerokości

Ta właściwość zapewnia pewną szerokość reguły między wieloma kolumnami.

Składnia

Kolumna-Rule Width: Długość | Medium | cienki | gruby | początkowe | dziedziczyć;

Wyjaśnione parametry

długość: Ta wartość określa szerokość reguły w liczbach.

średni: Jest to wartość domyślna, która ustawia szerokość reguły na średni.

cienki: Definiuje cienką szerokość reguły.

gruby: Definiuje grubą szerokość reguły.

Przykład

Poniższy przykład pokazuje, jak działa właściwość kolumnowej szerokości.

Ustawiliśmy szerokość reguły na 5px z solidnym stylem w powyższym kodzie. Aby zobaczyć efekt właściwości kolumnowej szerokości, użyj go z właściwością w stylu kolumny.

właściwość kolumnowego

W celu zapewnienia pewnej szerokości, stylu i koloru do reguły między różnymi kolumnami używana jest właściwość kolumnowej. Jest to właściwość krótkoterminowa dla następujących nieruchomości.

1. kolor kolumnowy

2. szerokość kolumny

3. Style w stylu kolumny

Składnia

Kolumna Rule: kolor kolumnowy | Kolumna-Rule-szerokość | Style w stylu kolumny | początkowe | dziedziczyć;

Wyjaśnione parametry

kolor kolumnowy: Ten parametr określa kolor reguł.

Kolumna-Rule Width: Ta wartość określa szerokość reguł.

Styl w stylu kolumny: Ta wartość określa styl reguły.

Przykład

Zapoznaj się z poniższym przykładem, aby zrozumieć omawianą nieruchomość.

W powyższym przykładzie zdefiniowaliśmy, że szerokość reguły powinna wynosić 5px z kropkowanym stylem i różowym kolorem.

właściwość kolumnowego

Właściwość opisująca liczbę kolumn, wokół których powinien rozciągać się element, nazywana jest właściwością kolumny.

Składnia

Kolumna: Brak | Wszystkie | początkowe | dziedziczyć;

Wyjaśnione parametry

nic: Jest to wartość domyślna, która określa, że ​​element będzie obejmował jedną kolumnę.

Wszystko: Ta wartość stwierdziła, że ​​element będzie obejmował każdą kolumnę.

Przykład

Zobaczmy, jak działa żadna wartość właściwości kolumnowej.

Aby zademonstrować koncepcję właściwości kolumnowej, najpierw zrobiliśmy nagłówek wewnątrz kontenera Div, a następnie ustaw kolumnową właściwość nagłówka na brak, dlatego nagłówek jest dostosowywany w jednej z kolumn. Jednak cały parametr umieszcza nagłówek nad takimi kolumnami.

Nagłówek został oddzielony od kolumn za pomocą parametru wszystkich.

właściwość kolumny

Jak sama nazwa wskazuje, właściwość szerokości kolumny zapewnia szerokość kolumny.

Składnia

Kolumna: Auto | długość | początkowe | dziedziczyć;

Wyjaśnione parametry

automatyczny: Jest to wartość domyślna, która określa, że ​​szerokość kolumny będzie oceniana przez przeglądarkę internetową.

długość: Ta wartość określa szerokość kolumny w liczbach.

Przykład

Załóżmy, że chcesz podać kolumnom pewną szerokość własnego wyboru, a następnie użyj parametru długości.

Tutaj ustawiliśmy szerokość kolumny na 100px.

właściwość kolumn

Jest to właściwości skrótów dla właściwości kolumnowych i szerokości kolumny.

Składnia

Kolumny: Auto | kolumna kolumna | szerokość kolumny | początkowe | dziedziczyć;

Wyjaśnione parametry

automatyczny: Jest to wartość domyślna, która zapewnia zarówno liczbę, jak i szerokość kolumn

kolumna kolumnowa: Ta wartość stwierdza maksymalną liczbę kolumn

szerokość kolumny: Ta wartość opisuje minimalną szerokość kolumn.

Przykład

Rozważ przykład, aby zrozumieć właściwość kolumn.

Ustawiliśmy liczbę kolumn na 2 o szerokości 100px.

Wniosek

Podział treści pojawiającą się na stronie na kolumny i podanie tym kolumnom określony styl można wykonać przy użyciu różnych właściwości CSS, które należą do kategorii właściwości kolumnowych. Istnieje wiele właściwości kolumnowych, takich jak kolumna kolumnowa, kolumna-rure, kolumna-rozpiętej, szerokość kolumny, kolor kolumny itp. Każda z tych właściwości służy inny cel, który wykazaliśmy wraz z pomocą odpowiednich przykładów.