Resumen: Entrega nº57 del Tutorial básico del programador web: CSS desde cero.
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.

css

 

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>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">

<style type="text/css">
* {font-family: verdana, sans-serif; margin:0; background-color:#FAEBD7;}
h1, h2 {text-align:center;}
.container2{    
    word-wrap: break-word;    font-size: 12px;
    width: 450px;    border: solid 5px red;
    margin: 10px auto 10px auto; padding: 10px; line-height: 1.5em;
        -moz-column-count: 3; -webkit-column-count: 3;    column-count: 3;    
        /*-moz-column-width: 130px; -webkit-column-width: 130px; colum-width: 130px;*/
    -moz-column-gap: 20px; -webkit-column-gap: 20px; colum-gap: 20px;
        -moz-column-rule: 3px solid blue; -webkit-column-rule: 3px solid blue;
    colum-rule: 3px solid blue;}
</style> </head>

<body>
<h1>Columnas con CSS</h1>
<h2>aprenderaprogramar.com</h2>

    <div class="container2">
        AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más. Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más. Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más.

CSS no es un lenguaje de programación propiamente dicho, aunque a veces se lo denomina lenguaje de programación coloquialmente. CSS no es un lenguaje de programación propiamente dicho, aunque a veces se lo denomina lenguaje de programación coloquialmente. CSS no es un lenguaje de programación propiamente dicho, aunque a veces se lo denomina lenguaje de programación coloquialmente.

Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más. Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más.
    </div>

</body>
</html>

 

 

El resultado que se obtiene en un navegador que acepte estas propiedades será similar a este:

columnas css

 

 

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 acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

 

Descargar archivo: