Buenas noches bermartinv, sobre el punto 1 tienes toda la razón del mundo, si hubiera puesto los comentarios después de cada caracter no se vería tan apelotonado todo al final, pero lo hice para ponerlo todo seguido, pero como tu dices la verdad es que se vería mas limpio.
Sobre el punto 2 se me fue la cabeza y como tu me recomendaste en un hilo anterior, ahora primero plasmo el ejercicio sobre papel y luego hago el ejercicio, y la verdad es que ayuda bastante, y puse fuera de la class 'cols3' la etiqueta h1, pero ya está resuelto, lo veras en el código nuevo.
Sobre el punto 3, tienes razón también, cuando copio y pego algo de Internet para los ejercicios se me olvida poner las etiquetas <p>, <span>,<pre>.... para texto, es una mala costumbre que me voy a empezar a quitar desde ya.
Por lo de mas muchas gracias por tu tiempo y por lo que me aportas, mil gracias...
Saludos.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Columnas CSS. column-count, column-width, columns, column-gap, y column-rule</title>
<meta name="description" content="portal web - aprenderaprogramar.com">
<meta name="keywords" content="columnas css">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos31.css">
</head>
<body>
<div class="cols3">
<h1>Textos Bonitos Para Ti</h1>
<p>Hoy fue, absolutamente el peor día de todos
Y no trates de convencerme de que
Hay algo bueno en cada día
Porque cuando miras con más atención,
Este mundo es un lugar muy cruel
Incluso si
Algunas bondades brillan de vez en cuando
La satisfacción y felicidad no perduran
Y no es verdad que
Está todo en la mente y corazón
Porque
La verdadera felicidad se puede obtener
Solo si lo que te rodea es bueno
No es verdad que el bien existe
Estoy seguro de que concuerdas con eso
La realidad
Crea
Mi actitud
Todo está más allá de mi control
Y en millones de años nunca me vas a escuchar decir que
Hoy fue un buen día.
Ahora léelo de arriba a bajo. Las cosas cambian según la perspectiva.</p>
</div>
</body>
</html>
Y ahora el css...
/*Ejercicio CU01055D del curso CSS aprenderaprogramar.com, columnas css. */
.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?
RESPUESTA:
.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 con el prefijo webkit que se aplica a los navegadores chrome, safari, android, e ios, asegurarnos que estos navegadores ya reconoceran la etiqueta que sirve para dar 3 columnas.
-webkit-column-gap: 20px; se escribe para lograr que con el prefijo webkit, que se aplica a los navegadores anteriormente mencionados, asegurarnos que reconoceran la etiqueta que sirve para dar el ancho de las columnas 20px, en nuestro caso.
-webkit-column-rule: 1px solid #000; se escribe para lograr que con el prefijo webkit, que se aplica a los navegadores anteriormente mencionados, asegurarnos que reconoceran la etiqueta para establecer el ancho, estilo, y color de la línea de separación entre columnas, 1px de ancho de linea, estilo solido, color negro.
-moz-column-count: 3; lo mismo que en webkit, pero en este caso moz, para el navegador firefox.
-moz-column-gap: 20px; lo mismo que en webkit, pero en este caso moz, para el navegador firefox.
-moz-column-rule: 1px solid #000; lo mismo que en webkit, pero en este caso moz, para el navegador firefox.
column-count: 3; definimos la cantidad de columnas, en este caso 3.
column-gap: 20px; definimos el ancho de las columnas, en este caso 20px.
column-rule: 1px solid #000; definimos el ancho, estilo y color de la línea que separan las columnas, 1px de ancho de linea, estilo solido, color negro.
las mismas indicaciones para otros navegadores como explorer.
¿que utilidad tiene la propiedad column-span?
RESPUESTA:
.cols3 h1 { -webkit-column-span:all;
Indica que los elementos h1 dentro de clases .cols3 se extienda a lo largo de las columnas en navegadores como Chrome
-moz-column-span:all; como en el apartado anterior pero para el navegador firefox.
column-span:all; las mismas indicaciones para otros navegadores como explorer.
*/
/*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?
RESPUESTA:
.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 con el prefijo webkit que se aplica a los navegadores chrome, safari, android, e ios, asegurarnos que estos navegadores ya reconoceran la etiqueta que sirve para dar 3 columnas.
-webkit-column-gap: 20px; se escribe para lograr que con el prefijo webkit, que se aplica a los navegadores anteriormente mencionados, asegurarnos que reconoceran la etiqueta que sirve para dar el ancho de las columnas 20px, en nuestro caso.
-webkit-column-rule: 1px solid #000; se escribe para lograr que con el prefijo webkit, que se aplica a los navegadores anteriormente mencionados, asegurarnos que reconoceran la etiqueta para establecer el ancho, estilo, y color de la línea de separación entre columnas, 1px de ancho de linea, estilo solido, color negro.
-moz-column-count: 3; lo mismo que en webkit, pero en este caso moz, para el navegador firefox.
-moz-column-gap: 20px; lo mismo que en webkit, pero en este caso moz, para el navegador firefox.
-moz-column-rule: 1px solid #000; lo mismo que en webkit, pero en este caso moz, para el navegador firefox.
column-count: 3; definimos la cantidad de columnas, en este caso 3.
column-gap: 20px; definimos el ancho de las columnas, en este caso 20px.
column-rule: 1px solid #000; definimos el ancho, estilo y color de la línea que separan las columnas, 1px de ancho de linea, estilo solido, color negro.
las mismas indicaciones para otros navegadores como explorer.
¿que utilidad tiene la propiedad column-span?
RESPUESTA:
.cols3 h1 { -webkit-column-span:all;
Indica que los elementos h1 dentro de clases .cols3 se extienda a lo largo de las columnas en navegadores como Chrome
-moz-column-span:all; como en el apartado anterior pero para el navegador firefox.
column-span:all; las mismas indicaciones para otros navegadores como explorer.
*/
Tema: HTML y CSS diseño columnas column-count column-width columns column-gap CU01057D (Leído 2914 veces)
RSS -
WAP2