Contenedores. Elementos <div>

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Contenedores. Elementos <div>"

Domingo Herrero Revuelta
hace 9 años
Vistas:

para columnas, etc. Los <div> habitualmente se anidan.

1 Html5 añade nuevos elementos semánticos pero todos ellos se basan en el uso del <div>. Estos elementos sirven para dividir la página (de ahí el nombre div, de divisor) en contenido relacionado, un div para la cabecera, para un slider, para columnas, etc. Los <div> habitualmente se anidan. Aquí vemos una estructura que podemos ver en un página web y posiblemente algunas de las estructuras que vemos pueden ser un d i v : c a b e c e r a, s l i d e r, columnas, etc. El elemento DIV es una especie de caja en la que situamos elementos de la página y podemos personalizar con elementos CSS

2 Ya vimos cómo incluir estilos en un documento mediante selectores de etiqueta. Es bastante habitual cuando trabajamos en css utilizar el atributo class, que nos permite incluir estilos a distintas partes del documento simultáneamente. Obviamente el atributo class puede se utilizado con cualquier etiqueta html, pero aquí vamos a incluirlo en distintos <div> para ver el potencial de estos elementos. <body> <div class="contenedor"> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi quis repellendus dolorem quod itaque voluptates ad optio voluptatem inventore laborum suscipit iure aperiam, molestiae in quibusdam vitae doloremque eligendi expedita.</p> </div> </body>

3 <body> <div class="contenedor"> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi quis repellendus dolorem quod itaque voluptates ad optio voluptatem inventore laborum suscipit iure aperiam, molestiae in quibusdam vitae doloremque eligendi expedita.</p> </div> </body>.contenedor { width: 400px; height: 200px; background: lightgrey; padding: 10px; margin: 0 auto; }

4 Con el código anterior veríamos: El contenedor <div> tiene asignado el atributo class = contenedor y desde el archivo css le asignamos nuestro estilo para dicho elemento. Para dar estilo a un atributo class escribimos.nombre; en este caso.contenedor, todo lo que contenga entre las llaves afectará a todos los elementos que tengan en su atributo class la palabra contenedor.

5 Otra propiedad interesante es margin: 0 auto; así conseguimos decirle al elemento que tiene un margen de 0 arriba y abajo y automático a la derecha y a la izquierda, lo cual como vemos nos permite centrar el contenedor en el documento..contenedor { width: 400px; height: 200px; background: lightgrey; padding: 10px; margin: 0 auto; } También ves que en contendor hemos puesto dimensiones (ancho y alto), un color de fondo y un padding para que el contenido esté más saneado. Esta es la manera de ir dando estilos desde nuestro fichero.css a todos los elementos del documento.

6 Con lo ya visto podríamos hacer un ejercicio a partir de este Mockup

7 Estructura!36

8 Estructura%HTML% En%HTML5,%los%bloques%,son%susLtuidos%por%bloques%semánLcos%que% %%% muestran%signiﬁcado%por%si%mismos.% %% %% <header>% % <nav>% % <seclon>% <aside>% % <arlcle>% % % % <footer>%!37

9 Imágenes Es muy habitual el uso de imágenes en los documentos web, la manera de insertarla es bastante sencilla. Usamos la etiqueta <img> que tiene dos atributos; el src que es la fuente de la imagen, ya sea mediante una dirección absoluta o relativa. El atributo alt de alternativo nos permite que aparezca un texto si la imagen no puede visualizarse. Es muy buena práctica usarlo. <img src=" alt="imagen de..."> Las imágenes son elementos inline pero se puede acceder a sus propiedades del Model Box, como padding, margin; border; background, etc.

10 Imágenes Además las imágenes también pueden formar parte de un div, ser una especie de imagen de fondo por así decirlo. En este caso trabajamos con las propiedades: background-image: url( cheetah.png"); Ponemos la url de la imagen que queremos mostrar background-repeat: no-repeat; Esta propiedad por defecto tiene el valor repeat, puede ser no-repeat o también repeat-x o repeat-y. Todas son bastante obvias. background-position: center left; Admite un par de valores para su posición vertical (top, center, bottom) y para su posición horizontal (left, center, rigth). background-size: percentage, length, cover, etc.; cover: escala la imagen para que sea tan grande como sea posible dentro del contenedor.

11 Imágenes Podemos realizar esta tarea como práctica

Documentos relacionados

EL MODELO DE CAJA CSS

EL MODELO DE CAJA CSS Sesión 10 By Ing. David Gil LA ETIQUETA HTML La etiqueta define una división o una sección en un documento HTML. La etiqueta se utiliza para agrupar bloques