Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: EnigmaticNerd en 24 de Septiembre 2017, 00:24
-
Buenas tardes. Este es el enunciado del ejercicio CU01057D del tutorial pdf de programación web con CSS desde cero:
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?
Acá el código del primer documento html:
<!DOCTYPE html>
<html lang="es">
<head>
<title>
CU01057D
</title>
<meta name="author" content="EnigmaticNerd"/>
<meta name="description" content="Columnas css - aprenderaprogramar.com"/>
<meta name="keywords" content="css, cursos, columnas, diseño, column-count, column-gap, aprenderaprogramar.com"/>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos/CU01057.css"/>
</head>
<body>
<div class="cols3">
<h1>Ejemplo del uso de las propiedades de columnas</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati laudantium,
explicabo a, iure hic quia, quae ducimus est ab eligendi perferendis ipsa possimus!
Eos, ut, quisquam! Modi delectus, natus repellendus?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati laudantium,
explicabo a, iure hic quia, quae ducimus est ab eligendi perferendis ipsa possimus!
Eos, ut, quisquam! Modi delectus, natus repellendus?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati laudantium,
explicabo a, iure hic quia, quae ducimus est ab eligendi perferendis ipsa possimus!
Eos, ut, quisquam! Modi delectus, natus repellendus?
</p>
</div>
</body>
</html>
</html>
Acá la hoja de estilos css:
/*Estilos para el ejercicio CU01057D*/
.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;
}
Descripción:
I.)-webkit-column-count:3 establece una división en tres columnas del contenido dentro del elemento con clase .cols3 para los navegadores Chrome, Safari, Android y iOs.
II.)-webkit-column-gap:20px establece una separación entre las columnas de 20 pixeles para los navegadores Chrome, Safari, Android, iOs.
III.)-webkit-column-rule:1px solid #000 hace uso de la notación shorthand column-rule en los navegadores Chrome, Safari, Android, iOs para definir el grosor, estilo y color de la línea que separa las columnas. En este caso, una línea sólida, con 1px de grosor y de color negro.
IV.)-moz-column-count:3 establece una división en tres columnas del contenido dentro del elemento con clase .cols3 para el navegador Firefox.
V.)-moz-column-gap:20px establece una separación entre las columnas de 20 pixeles para el navegador Firefox.
VI.)-moz-column-rule: 1px solid #000 hace uso de la notación shorthand column-rule en el navegador Firefox para definir el grosor, estilo y color de la línea que separa las columnas. En este caso, una línea sólida, con 1px de grosor y de color negro.
VII.)column-count: 3 establece una división en tres columnas del contenido dentro del elemento con clase .cols3.
VIII.)column-gap:20px establece una separación entre las columnas de 20 pixeles.
IX.)column-rule:1px solid #000 hace uso de la notación shorthand column-rule para definir el grosor, estilo y color de la línea que separa las columnas. En este caso, una línea sólida, con 1px de grosor y de color negro.
X.)-webkit-column-span:all establece que el elemento h1 dentro de la clase .cols3 ocupará todo las columnas en los navegadores Chrome, Safari, Android y iOs.
XI.)-moz-column-span:all establece que el elemento h1 dentro de la clase .cols3 se extenderá a lo largo de todas las columnas en el navegador Firefox.
XII.)column-span:all establece que el elemento h1 dentro de la clase .cols3 ocupará todo las columnas.
Nota: En el navegador Firefox la propiedad column-span no funciona, ni siquiera utilizando el prefijo -moz-. Según el extracto de un foro, se debe a que es una etiqueta experimental. Para conseguir el efecto deseado con column-span en el navegador Firefox, hay que hacer uso de otras técnicas css o con javascript.
Para corroborar la información, se puede visitar el siguiente link: https://teamtreehouse.com/community/column-span-not-working-for-me-on-firefox (https://teamtreehouse.com/community/column-span-not-working-for-me-on-firefox).
Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
-
Hola, ejercicio bien resuelto
Saludos