Codificación aprenderaprogramar.com: CU01057D
COLUMNAS EN CSS
Aunque con las herramientas que ya conocemos somos capaces de crear columnas, CSS ha introducido una serie de propiedades que pretenden facilitar el diseño de elementos web en columnas. Vamos a estudiar las propiedades column-count, column-width, columns, colum-gap y column-rule.
Ten en cuenta que estas propiedades no son soportadas por muchas de las versiones de navegadores que no son recientes, e incluso en algunos de los recientes todavía se consideran experimentales, lo que obliga al uso de prefijos específicos de navegador, aunque algunos navegadores ya las han introducido como estándar y no requieren de prefijo.
PROPIEDAD COLUMN-COUNT
| PROPIEDAD CSS colum-count | |
| Función de la propiedad | Permite definir el número de columnas con que se debe mostrar el contenido dentro de un elemento. |
| Valor por defecto | auto |
| Aplicable a | Contenedores como elementos block, table, table-cell, etc. |
| Valores posibles para esta propiedad | Un número entero igual o superior a 1 |
| inherit (se heredan las características del elemento padre). | |
| Ejemplos aprenderaprogramar.com |
.myContainer {column-count: 3;} .myContainerSP { column-count: 5;} |
PROPIEDAD COLUMNS
Esta propiedad es un shorthand que permite especificar el número de columnas bien en forma de número de columnas (lo que sería equivalente a usar column-count), bien indicando una unidad de medida (lo que sería equivalente a usar column-width).
Ejemplo: myBox {columns: 3; }
PROPIEDAD COLUMN-WIDTH
| PROPIEDAD CSS colum-width | |
| Función de la propiedad | Permite sugerir un ancho de columna deseado, aunque su aplicación no será estricta si existe column-count, que induce un ancho basado en el número de columnas especificado. |
| Valor por defecto | auto |
| Aplicable a | Contenedores como elementos block, table, table-cell, etc. |
| Valores posibles para esta propiedad | auto (el número de columnas derivará del establecido con column-count) |
| Una unidad de medida válida en CSS | |
| inherit (se heredan las características del elemento padre). | |
| Ejemplos aprenderaprogramar.com | .myContainer {column-width: 150px;} .myContainerSP { column-width: 5em;} |
En presencia de column-count, puede omitirse esta propiedad ya que column-count induce un ancho de columna basado en el número de columnas indicado. Puede entrar en conflicto con column-count si los valores indicados son incompatibles entre sí. En ausencia de column-count, puede inducir un número de columnas en base al ancho especificado. Si nos fijamos, column-count y column-width vienen siendo dos formas de expresar lo mismo.
PROPIEDAD COLUMN-GAP
Esta propiedad sirve para definir un espacio de separación entre columnas. Ejemplo: column-gap: 20px;
En algunos navegadores es necesario el uso de prefijo específico de navegador.
PROPIEDAD COLUMN-RULE-WIDTH, COLUM-RULE-STYLE Y COLUM-RULE-COLOR
Estas propiedades tienen por finalidad establecer el ancho, style y color de la línea de separación entre columnas.
column-rule-width funciona de forma análoga a border-width (valor por defecto medium, y valore posibles thin, medium, thick ó una unidad de medida válida CSS).
column-rule-style funciona de forma análoga a border-style.
column-rule-color funciona de forma análoga a border-color.
PROPIEDAD SHORTHAND COLUMN-RULE
Esta propiedad permite establecer los valores de column-rule width, column-rule-style y column-rule-color en una sola línea. Ejemplo: colum-rule: 3px solid blue;
EJEMPLO DE DISEÑO CON COLUMNAS
Escribe este código y visualiza sus resultados. Con los contenidos que hemos explicado a lo largo del curso debes ser capaz de interpretar todo el código que hemos incluido, por ejemplo por qué resulta de interés aplicar la propiedad word-wrap, por qué usamos prefijos y por qué hemos dejado comentada la línea correspondiente a column-width. También debes ser capaz de valorar las ventajas y desventajas que puede tener usar este tipo de propiedades.
|
<html> |
El resultado que se obtiene en un navegador que acepte estas propiedades será similar a este:
EJERCICIO
Analiza el código que mostramos a continuación, aplícalo a un documento HTML y visualiza los resultados, y responde a las preguntas.
|
.cols3 { -webkit-column-count: 3; -webkit-column-gap: 20px; -webkit-column-rule: 1px solid #000; -moz-column-count: 3; -moz-column-gap: 20px; -moz-column-rule: 1px solid #000; column-count: 3; column-gap: 20px; column-rule: 1px solid #000; }
.cols3 h1 { -webkit-column-span:all; -moz-column-span:all; column-span:all; } |
Explica paso a paso a qué da lugar cada instrucción o fragmento de código (ejemplo: .cols3 indica que se aplicarán los estilos definidos a todos los elementos html cuyo atributo class sea igual a cols3, -webkit-column-count: 3; se escribe para lograr que …). ¿Qué utilidad tiene la propiedad column-span?
Para comprobar si tu código y respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
