[MÚSICA] [MÚSICA] [MÚSICA] Hola y bienvenidos a la lección de CSS Maquetación. El objetivo de esta lección es que conozcas y practiques las opciones que ofrece CSS para maquetar un sitio web, es decir, para organizar el contenido de las páginas en la pantalla. Los invito a probar cada elemento en su propia página. Para iniciar el proceso de maquetación u organización de los elementos de un sitio web, se debe comprender el concepto de modelo de caja o box model. En CSS el modelo de caja, como su nombre lo indica, es una caja que agrupa cada elemento HTML. El modelo consta de 4 propiedades, Content o contenido, Padding o relleno, Border o borde y Margin o margen. Content hace referencia al contenido del elemento, que puede ser o el texto o una imagen. El Padding es el área entre el borde y el contenido, esta área es transparente. El Border es el área que cobija el padding y el contenido. El Margin es el área que va fuera del borde, esta área también es transparente. En este ejemplo tenemos un HTML en que se incluye un div, un párrafo y una lista de viñetas con cinco elementos. En los estilos, el div tiene un color de fondo gris claro. El ancho del div es de 300 pixeles. El padding, es decir, el espacio que hay entre el borde y el texto, es de 50 pixeles. El border del div es de 15 pixeles sólido y de color naranja. El margen, es decir el espacio desde el borde del div hasta el borde de la página, es de 20 pixeles. Luego de entender el modelo de caja, ahora veamos como se despliegan los contenedores o divs en una página. Un contenedor se puede desplegar en la página de tres formas posibles, en bloque, en línea y en una combinación de los dos anteriores. Para indicar la organización de los contenedores se utiliza el atributo display. El valor por defecto es block. En este ejemplo, vemos la regla display block y los contenedores, los divs del HTML se despliegan en bloque, es decir uno debajo del otro, como lo podemos apreciar. Cuando se cambia la propiedad display del div por inline, los bloques se visualizan uno luego del otro, como cuando se concatenan dos párrafos. Cuando se cambia la propiedad display del div por inline block, los contenedores se visualizan como dos bloques pero en la misma línea. Ahora veremos la forma en que podemos posicionar los bloques en la pantalla. Un bloque se puede posicionar de cuatro formas en una página, estática, relativa, absoluta y fija. Por defecto, todos los bloques se posicionan uno debajo del otro, en el orden que se indica en el código HTML. Un bloque en posición relativa, modificará su posición tomando como referencia, la posición en la cual debería estar por defecto. En este ejemplo, el tercer bloque tiene un margen de 20 pixeles en la margen superior y de 20 pixeles en la margen izquierda, con respecto a su posición por defecto. Un bloque en posición absoluta, modificará su posición tomando como referencia los valores del CSS, top y left, tal como se ve en este ejemplo. Un bloque en posición fixed, modificará su posición tomando como referencia la ventana del navegador y se mantendrá fijo en este lugar, así la página se desplace verticalmente en la pantalla. Ahora veamos, como se puede ajustar el flujo de texto o la forma en que aparece el texto, alrededor de un elemento. Para esto, se usa la propiedad float. Este es el ejemplo de una página sin la propiedad float. Acá tenemos una imagen y un texto, y el texto se ubica debajo de la imagen. Acá tenemos la misma página del ejemplo anterior, con la propiedad float aplicada al logo igual a left, por tanto el logo se ubica en la parte izquierda de la pantalla. Acá tenemos la misma página del ejemplo anterior, con la propiedad del logo float igual a right, por tanto, el logo se ubica en la parte derecha de la página. Hasta acá esta lección de Maquetación en CSS. Te invitamos a realizar los ejercicios y nos vemos en una próxima oportunidad. [MÚSICA] [MÚSICA] [MÚSICA] [AUDIO_EN_BLANCO] [MÚSICA] [MÚSICA]