Propiedades de columna en CSS | Explicado
- propiedad de conteo de columnas
- propiedad de llenado de columna
- propiedad de la brecha de columna
- propiedad de regla de columna
- propiedad de color regla de columna
- propiedad de estilo de regla de columna
- propiedad de ancho de regla de columna
- propiedad de columna
- propiedad de ancho de columna
- propiedad de columnas
Aprendamos en detalle.
propiedad de conteo de columnas
Para dividir el contenido, un elemento contiene en el número de columnas especificadas, esta propiedad se utiliza.
Sintaxis
Conteo de columna: Auto | Número | inicial | heredar;Parámetros explicados
auto: Este es un valor predeterminado que evalúa el número de columnas sobre la base de otras propiedades, como el ancho de la columna.
número: Este valor divide el contenido en el número dado de columnas.
Ejemplo
Supongamos que desea dividir su contenido en dos columnas y luego siga el ejemplo a continuación.
En el ejemplo anterior, tomamos un largo párrafo y lo colocamos dentro de un recipiente Div y al usar la propiedad de conteo de columnas, dividimos el párrafo en dos columnas.
propiedad de llenado de columna
La propiedad que determina cómo el contenido de un elemento se equilibrará una vez que se divide en columnas se denomina propiedad de relleno de columnas.
Sintaxis
Llena de columna: Auto | equilibrio | inicial | heredar;Parámetros explicados
auto: Este valor llena las columnas de tal manera que el contenido ocupa solo la cantidad requerida de espacio en cada columna y esto puede dejar ciertas columnas vacías.
balance: Este valor divide el contenido en cada columna por igual.
Ejemplo
El siguiente ejemplo demuestra el parámetro de equilibrio de la propiedad en discusión.
Aquí, hemos definido el conteo de la columna como 3 y proporcionamos cierta altura al contenedor DIV; Ahora el parámetro de equilibrio de la propiedad de relleno de columna dividirá igualmente el párrafo en cada columna.
propiedad de la brecha de columna
Para definir la brecha entre cada columna, se utiliza la propiedad de gap de columna.
Sintaxis
columna-gap: normal | Longitud | inicial | heredar;Parámetros explicados
normal: Este es un valor predeterminado que establece una brecha normal entre las columnas.
longitud: Este valor especifica la brecha entre las columnas en forma de longitud.
Ejemplo
Considere un ejemplo para comprender cómo funciona la propiedad de la brecha de columna.
En el ejemplo anterior, estamos utilizando el parámetro de longitud de la propiedad de GAP de columna y lo hemos establecido en 30%.
propiedad de color regla de columna
Para proporcionar algo de color a la regla de las columnas, esta propiedad se utiliza.
Sintaxis
Columna de regla de color: color | inicial | heredar;Parámetros explicados
color: Este valor establece el color de la regla.
Ejemplo
Supongamos que quieres darle a la regla un color azul con un estilo sólido.
El ejemplo anterior establece que el párrafo debe dividirse en tres columnas con una regla que tenga un color azul y un estilo sólido. Use la propiedad de color de regla de columna junto con la propiedad de estilo de regla de columna para ver su efecto.
propiedad de estilo de regla de columna
Como su nombre indica, la propiedad de estilo de regla de columna da cierto estilo a la regla presente entre diferentes columnas.
Sintaxis
Estilo de regla de columna: ninguno | punteado | oculto | Dunta | sólido | Doble | Groove | insertado | comienzo | cresta | inicial | heredar;Parámetros explicados
ninguno: Este es un valor predeterminado que no especifica estilo.
punteado: Este valor especifica un estilo punteado.
oculto: Establece un estilo oculto.
Panel: Especifica un estilo de regla discontinua.
sólido: Describe un estilo sólido.
doble: Establece un estilo de doble regla.
ranura: Especifica un estilo de regla ranurada en 3D.
recuadro: Establece un estilo de inserción 3D.
comienzo: Especifica un estilo de regla de salida 3D.
cresta: Establece una regla de estilo criticado en 3D.
Ejemplo
Le damos a la regla un estilo discontinuo.
El ejemplo anterior demuestra el estilo discontinuo de la regla. Puede usar otros valores de la propiedad de estilo de regla de columna de acuerdo con su deseo.
propiedad de ancho de regla de columna
Esta propiedad proporciona algún ancho a la regla entre múltiples columnas.
Sintaxis
Width de regla de columna: longitud | Medio | delgado | grueso | inicial | heredar;Parámetros explicados
longitud: Este valor especifica el ancho de la regla en los números.
medio: Este es un valor predeterminado que establece el ancho de la regla en medio.
delgado: Define un ancho delgado de la regla.
grueso: Define un ancho grueso de la regla.
Ejemplo
El siguiente ejemplo muestra cómo funciona la propiedad de ancho de regla de columna.
Hemos establecido el ancho de la regla en 5px con un estilo sólido en el código anterior. Para ver el efecto de la propiedad de ancho de regla de columna, úselo con la propiedad de estilo de regla de columna.
propiedad de regla de columna
Con el fin de proporcionar algún ancho, estilo y color a la regla entre varias columnas, se utiliza la propiedad de regla de columna. Esta es una propiedad en taquigrafía para las siguientes propiedades.
1. color de regla de columna
2. ancho de regla de columna
3. estilo de regla de columna
Sintaxis
Regla de columna: columna-color-color | Width de regla de columna | Estilo de regla de columna | inicial | heredar;Parámetros explicados
color de regla de columna: Este parámetro especifica el color de la regla.
ancho de regla de columna: Este valor especifica el ancho de la regla.
estilo de regla de columna: Este valor especifica el estilo de la regla.
Ejemplo
Consulte el ejemplo a continuación para comprender la propiedad en discusión.
En el ejemplo anterior, hemos definido que el ancho de la regla debe ser 5px con un estilo punteado y un color rosa.
propiedad de columna
La propiedad que describe el número de columnas alrededor de las cuales un elemento debe extenderse se llama propiedad de la columna-span.
Sintaxis
Span de columna: ninguno | Todos | inicial | heredar;Parámetros explicados
ninguno: Este es un valor predeterminado que especifica que el elemento se extenderá a través de una sola columna.
todo: Este valor declaró que el elemento se extenderá a través de cada columna.
Ejemplo
Veamos cómo funciona el valor de ninguno de la propiedad de la columna-span.
Para demostrar el concepto de la propiedad de explosión de columna, primero hemos hecho un encabezado dentro del contenedor DIV y luego establece la propiedad de la columna-span del encabezado a ninguno, por lo tanto, el encabezado se ajusta dentro de una de las columnas. Sin embargo, todos los parámetros colocan el encabezado sobre las columnas como esta.
El encabezado se separó de las columnas utilizando todo el parámetro.
propiedad de ancho de columna
Como su nombre indica, la propiedad de ancho de columna proporciona ancho de columna.
Sintaxis
ancho de columna: auto | Longitud | inicial | heredar;Parámetros explicados
auto: Este es un valor predeterminado que especifica que el ancho de la columna será evaluado por el navegador web.
longitud: Este valor define el ancho de la columna en los números.
Ejemplo
Supongamos que desea darle a las columnas algún ancho de su propia elección y luego usar el parámetro de longitud.
Aquí hemos establecido el ancho de la columna en 100px.
propiedad de columnas
Esta es una propiedad abreviada para el conteo de columnas y las propiedades de ancho de columna.
Sintaxis
Columnas: Auto | conteo de columna | ancho de columna | inicial | heredar;Parámetros explicados
auto: Este es un valor predeterminado que proporciona el recuento y el ancho de las columnas
conteo de columna: Este valor establece el número máximo de las columnas
ancho de columna: Este valor describe el ancho mínimo de las columnas.
Ejemplo
Considere el ejemplo para comprender la propiedad de las columnas.
Hemos establecido el recuento de columnas en 2 que tienen un ancho de 100px.
Conclusión
Dividir el contenido que aparece en un sitio web en columnas y dar a esas columnas un determinado estilo se puede realizar utilizando varias propiedades de CSS que entran en la categoría de propiedades de columnas. Hay una serie de propiedades de columna, como el conteo de columnas, la regla de columna, la columna, el ancho de la columna, el color de la regla de columna, etc. Cada una de estas propiedades tiene un propósito diferente que hemos demostrado junto con la ayuda de ejemplos relevantes.