Propriétés de la colonne dans CSS | Expliqué

Souvent, la structure de la conception Web oblige les développeurs Web à diviser leur contenu en plusieurs colonnes. De plus, le simple fait de diviser le contenu ne suffit pas, donner à ces colonnes un certain style est également nécessaire. CSS fournit un certain nombre de propriétés pour diviser efficacement le contenu d'un site Web en différentes colonnes. Ces propriétés sont appelées propriétés de colonne qui ont été enrôlées ci-dessous.

1. propriété de comptage de colonne
2. propriété de remplissage de colonne
3. propriété de colonne
4. propriété de colonne
5. propriété colonne-règle-couleur
6. propriété de style colonne
7. propriété de colonne à largeur
8. propriété de colonne
9. propriété de largeur de colonne
10. propriété des colonnes

Apprenons-les en détail.

propriété de comptage de colonne

Afin de diviser le contenu qu'un élément contient en le nombre de colonnes spécifiées, cette propriété est utilisée.

Syntaxe

Count-colonne: Auto | Numéro | Initial | hériter;

Paramètres expliqués

auto: Il s'agit d'une valeur par défaut qui évalue le nombre de colonnes sur la base d'autres propriétés telles que la largeur des colonnes.

nombre: Cette valeur divise le contenu en le nombre donné de colonnes.

Exemple

Supposons que vous souhaitiez diviser votre contenu en deux colonnes, puis suivez l'exemple ci-dessous.

Dans l'exemple ci-dessus, nous avons pris un long paragraphe et l'avons placé dans un conteneur Div et en utilisant la propriété de comptage de colonne, nous avons divisé le paragraphe en deux colonnes.

propriété de remplissage de colonne

La propriété qui détermine comment le contenu d'un élément sera équilibré une fois qu'elle est divisée en colonnes est appelée la propriété de remplissage de colonne.

Syntaxe

Film de colonne: Auto | Équilibre | Initial | hériter;

Paramètres expliqués

auto: Cette valeur remplit les colonnes de telle manière que le contenu ne prend que la quantité d'espace requise dans chaque colonne et cela peut laisser certaines colonnes vides.

équilibre: Cette valeur divise également le contenu en chaque colonne.

Exemple

L'exemple ci-dessous démontre le paramètre Balance de la propriété en discussion.

Ici, nous avons défini le nombre de colonnes comme 3 et avons fourni une certaine hauteur au conteneur div; Désormais, le paramètre de solde de la propriété de colonne-remplissage divisera également le paragraphe dans chaque colonne.

propriété de colonne

Afin de définir l'écart entre chaque colonne, la propriété de colonne est utilisée.

Syntaxe

colonne: normal | longueur | Initial | hériter;

Paramètres expliqués

normal: Il s'agit d'une valeur par défaut qui indique un écart normal entre les colonnes.

longueur: Cette valeur spécifie l'écart entre les colonnes sous forme de longueur.

Exemple

Considérez un exemple pour comprendre comment fonctionne la propriété Column-Gap.

Dans l'exemple ci-dessus, nous utilisons le paramètre Longueur de la propriété Column-Gap et l'avons réglé à 30%.

propriété colonne-règle-couleur

Afin de fournir une certaine couleur à la règle des colonnes, cette propriété est utilisée.

Syntaxe

Colonne-Rule-Color: Couleur | Initial | hériter;

Paramètres expliqués

couleur: Cette valeur indique la couleur de la règle.

Exemple

Supposons que vous vouliez donner à la règle une couleur bleue avec un style solide.

L'exemple ci-dessus indique que le paragraphe doit être divisé en trois colonnes avec une règle ayant une couleur bleue et un style solide. Utilisez la propriété de colonne-règle-couleur avec la propriété de style colonne-règle pour voir son effet.

propriété de style colonne

Comme son nom l'indique, la propriété de style colonne-règle donne un peu de style à la règle présente entre différentes colonnes.

Syntaxe

Colonne-Rule-Style: Aucun | parsemé | Caché | en pointillé | solide | Double | Groove | Encart | Début | crête | Initial | hériter;

Paramètres expliqués

aucun: Il s'agit d'une valeur par défaut qui ne spécifie aucun style.

pointé: Cette valeur spécifie un style en pointillé.

caché: Il indique un style caché.

en pointillé: Il spécifie un style de règle en pointillé.

solide: Il décrit un style solide.

double: Il indique un style de double règle.

rainure: Il spécifie un style de règle rainuré 3D.

Encart: Il indique un style d'encart 3D.

début: Il spécifie un style de règle de départ 3D.

crête: Il indique une règle de style striée en 3D.

Exemple

Donnons à la règle un style pointillé.

L'exemple ci-dessus montre le style en pointillé de la règle. Vous pouvez utiliser d'autres valeurs de la propriété de style colonne en fonction de votre désir.

propriété de colonne à largeur

Cette propriété fournit une certaine largeur à la règle entre plusieurs colonnes.

Syntaxe

Colonne-Rule-Width: Longueur | Medium | mince | épais | Initial | hériter;

Paramètres expliqués

longueur: Cette valeur spécifie la largeur de la règle en nombres.

moyen: Il s'agit d'une valeur par défaut qui définit la largeur de la règle sur le milieu.

mince: Il définit une fine largeur de la règle.

épais: Il définit une largeur épaisse de la règle.

Exemple

L'exemple ci-dessous montre comment fonctionne la propriété de colonne à largeur.

Nous avons réglé la largeur de la règle sur 5px avec un style solide dans le code ci-dessus. Pour voir l'effet de la propriété de colonne à largeur-largeur, utilisez-le avec la propriété de style colonne.

propriété de colonne

Dans le but de fournir une certaine largeur, style et couleur à la règle entre les différentes colonnes, la propriété de la règle de colonne est utilisée. Il s'agit d'une propriété scoris pour les propriétés suivantes.

1. colonne-règle-couleur

2. colonne-cycle-largeur

3. style colonne-règle

Syntaxe

colonne-règle: colonne-règle-couleur | Colonne-Rule-Width | Style de colonne de règles | Initial | hériter;

Paramètres expliqués

Colonne-Rule-Color: Ce paramètre spécifie la couleur de la règle.

Colonne-Rule-Width: Cette valeur spécifie la largeur de la règle.

Style de colonne: Cette valeur spécifie le style de la règle.

Exemple

Consultez l'exemple ci-dessous pour comprendre la propriété en discussion.

Dans l'exemple ci-dessus, nous avons défini que la largeur de la règle doit être 5px avec un style en pointillé et une couleur rose.

propriété de colonne

La propriété qui décrit le nombre de colonnes autour desquelles un élément doit s'étendre est appelée la propriété de colonne.

Syntaxe

colonne: aucun | Tout | Initial | hériter;

Paramètres expliqués

aucun: Il s'agit d'une valeur par défaut qui spécifie que l'élément s'étendra sur une seule colonne.

tous: Cette valeur indiquait que l'élément s'étendra sur chaque colonne.

Exemple

Voyons comment fonctionne la valeur aucune de la propriété colonne.

Pour démontrer le concept de la propriété Colonne-Span, nous avons d'abord fait une tête à l'intérieur du conteneur DIV, puis définissez la propriété colonne de la tête vers aucun, par conséquent, l'en-tête est ajusté à l'intérieur de l'une des colonnes. Cependant, le paramètre All place le cap au-dessus des colonnes comme celle-ci.

L'en-tête a été séparé des colonnes en utilisant le paramètre tout.

propriété de largeur de colonne

Comme son nom l'indique, la propriété colonne de largeur fournit la largeur de la colonne.

Syntaxe

largeur de colonne: auto | longueur | Initial | hériter;

Paramètres expliqués

auto: Il s'agit d'une valeur par défaut qui spécifie que la largeur de la colonne sera évaluée par le navigateur Web.

longueur: Cette valeur définit la largeur de la colonne en nombres.

Exemple

Supposons que vous souhaitiez donner aux colonnes une largeur de votre choix, puis utilisez le paramètre Longueur.

Ici, nous avons réglé la largeur des colonnes à 100px.

propriété des colonnes

Il s'agit d'une propriété raccourci pour le nombre de colonnes et les propriétés de la largeur des colonnes.

Syntaxe

Colonnes: Auto | Count-colonne | largeur des colonnes | Initial | hériter;

Paramètres expliqués

auto: Il s'agit d'une valeur par défaut qui fournit à la fois le nombre et la largeur des colonnes

Count de colonne: Cette valeur indique le nombre maximum des colonnes

largeur de colonne: Cette valeur décrit la largeur minimale des colonnes.

Exemple

Considérez l'exemple pour comprendre la propriété des colonnes.

Nous avons réglé le nombre de colonnes sur 2 ayant une largeur de 100px.

Conclusion

La division du contenu apparaissant sur un site Web en colonnes et donnant à ces colonnes un certain style peut être effectué en utilisant diverses propriétés CSS qui relèvent de la catégorie des propriétés de colonnes. Il existe un certain nombre de propriétés de colonne telles que le nombre de colonnes, la colonne, la colonne, la colonne, la largeur de colonne, la colonne-couleur-couleur, etc. Chacune de ces propriétés a un objectif différent que nous avons démontré avec l'aide d'exemples pertinents.