Proprietà della colonna in CSS | Spiegato

Spesso la struttura del web design richiede agli sviluppatori Web di dividere i loro contenuti in più colonne. Inoltre, è necessario solo dividere il contenuto, dare a queste colonne un certo stile è necessario. CSS fornisce una serie di proprietà per dividere in modo efficiente il contenuto di un sito Web in varie colonne. Queste proprietà sono indicate come proprietà della colonna che sono state arruolate di seguito.

1. Proprietà del conteggio delle colonne
2. Proprietà riempimento della colonna
3. Proprietà a colonna
4. Proprietà-colonna
5. Proprietà colonna-rullo-color
6. Proprietà in stile-colonna-rotta
7. Proprietà-colonna-ro-rotta
8. Proprietà a colonna
9. Proprietà a larghezza della colonna
10. Proprietà delle colonne

Impariamoli in dettaglio.

Proprietà del conteggio delle colonne

Ai fini di dividere il contenuto che un elemento contiene nel numero di colonne specificate, questa proprietà viene utilizzata.

Sintassi

Conteggio della colonna: Auto | numero | iniziale | ereditare;

Parametri spiegati

auto: Questo è un valore predefinito che valuta il numero di colonne sulla base di altre proprietà come la larghezza delle colonne.

numero: Questo valore divide il contenuto in un dato numero di colonne.

Esempio

Supponiamo di voler dividere i tuoi contenuti in due colonne, quindi segui l'esempio di seguito.

Nell'esempio sopra, abbiamo preso un lungo paragrafo e lo abbiamo messo all'interno di un contenitore di div e usando la proprietà del conteggio delle colonne, abbiamo diviso il paragrafo in due colonne.

Proprietà riempimento della colonna

La proprietà che determina come il contenuto di un elemento sarà bilanciato una volta diviso in colonne viene definita proprietà di riempimento della colonna.

Sintassi

Colonna-FILL: Auto | Equilibrio | iniziale | ereditare;

Parametri spiegati

auto: Questo valore riempie le colonne in modo tale che il contenuto occupa solo la quantità richiesta di spazio in ciascuna colonna e questo può lasciare vuote alcune colonne.

bilancia: Questo valore divide il contenuto in ogni colonna equamente.

Esempio

L'esempio seguente dimostra il parametro di saldo della proprietà in discussione.

Qui, abbiamo definito il conteggio della colonna come 3 e fornito un po 'di altezza al contenitore Div; Ora il parametro di saldo della proprietà di riempimento della colonna dividerà ugualmente il paragrafo in ciascuna colonna.

Proprietà a colonna

Al fine di definire il divario tra ciascuna colonna, viene utilizzata la proprietà della colonna.

Sintassi

colonna-gap: normale | lunghezza | iniziale | ereditare;

Parametri spiegati

normale: Questo è un valore predefinito che indica un divario normale tra le colonne.

lunghezza: Questo valore specifica lo spazio tra le colonne sotto forma di lunghezza.

Esempio

Considera un esempio per capire come funziona la proprietà di colonna.

Nell'esempio sopra, stiamo usando il parametro di lunghezza della proprietà colonna-gap e lo abbiamo impostato al 30%.

Proprietà colonna-rullo-color

Al fine di fornire un po 'di colore alla regola delle colonne, questa proprietà viene utilizzata.

Sintassi

colonna-rule-color: colore | iniziale | ereditare;

Parametri spiegati

colore: Questo valore afferma il colore della regola.

Esempio

Supponiamo di voler dare regola un colore blu con uno stile solido.

L'esempio sopra afferma che il paragrafo deve essere diviso in tre colonne con una regola con un colore blu e uno stile solido. Utilizzare la proprietà colonna-rullo-color insieme alla proprietà in stile colonna per vedere il suo effetto.

Proprietà in stile-colonna-rotta

Come suggerisce il nome, la proprietà in stile-colonna dà un certo stile alla regola presente tra diverse colonne.

Sintassi

Column-Rule-Style: Nessuno | punteggiato | nascosto | Dasched | solido | doppio | Groove | inserto | Inizia | Ridge | iniziale | ereditare;

Parametri spiegati

nessuno: Questo è un valore predefinito che non specifica stile.

punteggiato: Questo valore specifica uno stile tratteggiato.

nascosto: Dichiara uno stile nascosto.

Dasched: Specifica uno stile di regola traggato.

solido: Descrive uno stile solido.

Doppio: Dichiara uno stile a doppia regola.

scanalatura: Specifica uno stile di regola scanalato 3D.

Inserto: Dichiara uno stile di inserto 3D.

Inizia: Specifica uno stile di regola dell'inizio 3D.

cresta: Dichiara una regola in stile crestato in 3D.

Esempio

Diamo alla regola uno stile tratteggiato.

L'esempio sopra dimostra lo stile tratteggiato della regola. Puoi usare altri valori della proprietà in stile colonna in base al tuo desiderio.

Proprietà-colonna-ro-rotta

Questa proprietà fornisce una certa larghezza alla regola tra più colonne.

Sintassi

Colonna-RULA LAVULTH: lunghezza | Medio | sottile | denso | iniziale | ereditare;

Parametri spiegati

lunghezza: Questo valore specifica la larghezza della regola nei numeri.

medio: Questo è un valore predefinito che imposta la larghezza della regola su Medium.

magro: Definisce una sottile larghezza della regola.

spesso: Definisce una larghezza spessa della regola.

Esempio

L'esempio seguente mostra come funziona la proprietà della colonna-rotta.

Abbiamo impostato la larghezza della regola su 5px con uno stile solido nel codice sopra. Per vedere l'effetto della proprietà della colonna-rotta, usalo con la proprietà in stile colonna-rotta.

Proprietà-colonna

Ai fini di fornire una certa larghezza, stile e colore alla regola tra varie colonne, viene utilizzata la proprietà della colonna. Questa è una proprietà stenorta per le seguenti proprietà.

1. colonna-rolle-color

2. colonna-ro-rotta

3. in stile colonna

Sintassi

Colonna-colonna: colonna-rule-color | Colonna-RULA-WIDTH | Colonna-RULA-RULE | iniziale | ereditare;

Parametri spiegati

colonna-rullo-color: Questo parametro specifica il colore della regola.

colonna-rotta-larghezza: Questo valore specifica la larghezza della regola.

in stile colonna: Questo valore specifica lo stile della regola.

Esempio

Consultare l'esempio di seguito per comprendere la proprietà in discussione.

Nell'esempio sopra, abbiamo definito che la larghezza della regola dovrebbe essere 5px con uno stile tratteggiato e un colore rosa.

Proprietà a colonna

La proprietà che descrive il numero di colonne attorno alle quali un elemento dovrebbe span è chiamata proprietà della colonna.

Sintassi

colonna-span: nessuna | tutto | iniziale | ereditare;

Parametri spiegati

nessuno: Questo è un valore predefinito che specifica che l'elemento si estenderà su una singola colonna.

Tutto: Questo valore affermava che l'elemento si estende su ogni colonna.

Esempio

Vediamo come funziona il valore nessuno della proprietà della colonna.

Per dimostrare il concetto di proprietà della colonna, abbiamo prima effettuato un'intestazione all'interno del contenitore Div, quindi impostare la proprietà della colonna della rotta su nessuna, pertanto, l'intestazione viene regolata all'interno di una delle colonne. Tuttavia, il parametro tutto posiziona l'intestazione sopra le colonne come questa.

L'intestazione è stata separata dalle colonne usando il parametro.

Proprietà a larghezza della colonna

Come suggerisce il nome, la proprietà della larghezza della colonna fornisce la larghezza della colonna.

Sintassi

Licromra colonna: Auto | lunghezza | iniziale | ereditare;

Parametri spiegati

auto: Questo è un valore predefinito che specifica che la larghezza della colonna verrà valutata dal browser Web.

lunghezza: Questo valore definisce la larghezza della colonna nei numeri.

Esempio

Supponiamo di voler dare alle colonne un po 'di larghezza di tua scelta, quindi usa il parametro di lunghezza.

Qui abbiamo impostato la larghezza della colonna su 100px.

Proprietà delle colonne

Questa è una proprietà stentata per le proprietà del conteggio delle colonne e della larghezza delle colonne.

Sintassi

Colonne: Auto | Column-Count | Width di colonna | iniziale | ereditare;

Parametri spiegati

auto: Questo è un valore predefinito che fornisce sia il conteggio che la larghezza delle colonne

conteggio della colonna: Questo valore afferma il numero massimo delle colonne

larghezza della colonna: Questo valore descrive la larghezza minima delle colonne.

Esempio

Considera l'esempio per comprendere la proprietà delle colonne.

Abbiamo impostato il conteggio delle colonne su 2 con una larghezza di 100px.

Conclusione

Dividere il contenuto che appare su un sito Web in colonne e dando a tali colonne un determinato stile può essere eseguito utilizzando varie proprietà CSS che rientrano nella categoria delle proprietà della colonna. Esistono un numero di proprietà della colonna come conteggio della colonna, colonna-colonna, colonna, larghezza della colonna, colonna-rule-color, ecc. Ognuna di queste proprietà ha uno scopo diverso che abbiamo dimostrato insieme all'aiuto di esempi pertinenti.