CSS div

Imágenes HTML Las imágenes se vinculan en una página HTML con la etiqueta <img> con los atributos src = URL alt = texto alternativo de la imagen width = ancho height = alto     

Estructura CSS la etiqueta <div> ofrece a los diseñadores la flexibilidad y el control sobre la posición cuando se combina con las propiedades CSS. Una etiqueta div puede tener, instrucciones de formato (de la familia de fuente, color, bordes, etc), atributos de altura y anchura, posicionamiento Tamaño Hay que tener cuidado al emplear el tamaño, el contenido según el navegador puede desbordar el tamaño de un div. Evitar definir altos si no son necesarios. div{ width: 400px; }      http://gostats.com/resources/css-div-tutorial.html

Estructura CSS la propiedad display, permite establecer el tipo de caja de un elemento. Los valores más utilizados son: inline, block y none.      http://gostats.com/resources/css-div-tutorial.html

Estructura CSS Padding, margin y border     

Estructura CSS Background http://www.css3files.com/background/      back_mantel.png dh.png dh_2.png dh_3.png ac.jpg http://www.css3files.com/background/

Estructura CSS Background ejemplo 3 imágenes f03.png f02.png f01.png      f03.png f02.png f01.png div { background: url(texto/f01.png) left bottom repeat-x, url(texto/f02.png) left bottom no-repeat, url(texto/f03.png) left top repeat-x; background-color: #a4d3ff; }

Estructura CSS CSS3 permite añadir bordes y bordes redondeados      border-radius: 24px; border-top-left-radius: 24px; border-radius: 24px 0; border-radius: 36px 12px; border-top-right-radius: 50px 30px; border-bottom-right-radius: 50px 30px; border-radius: 50%; border-radius: 50% 50% 0 0; http://css3generator.com/ border-radius: 0 20px 20px 0; border-radius: 20px 0 0 20px; border-radius: 0 50% 0 50%; border-top-left-radius: 50% 20%; border-top-right-radius: 50% 20%; border-bottom-left-radius: 50% 20%; border-bottom-right-radius: 50% 20%; http://www.cssmatic.com/es/border-radius

Estructura CSS CSS3 permite añadir sombras      box-shadow: -5px -5px #888; box-shadow: -5px -5px 5px #888; box-shadow: -5px -5px 0 5px #888; box-shadow: -5px -5px 5px 5px #888; box-shadow: 0 0 5px #888; box-shadow: 0 0 5px 5px #888; box-shadow: inset -5px -5px #888; box-shadow: inset -5px -5px 5px #888; http://css3generator.com/ box-shadow: inset -5px -5px 0 5px #888; box-shadow: inset -5px -5px 5px 5px #888; box-shadow: inner 0 0 5px #888; box-shadow: inset 0 0 5px 5px #888; http://dev.w3.org/csswg/css-backgrounds/

Recursos CSS CSS3 Generator http://css3generator.com/ CSS3 Gradient Generator http://gradients.glrzad.com/ {CSS} Portal - on line generator http://www.cssportal.com/css3-rounded-corner/ CSS3 MAKER: http://www.css3maker.com CSS3.com http://www.css3.com/      http://www.lawebera.es/maquetacion-web/maquetar-paginas-web-posicion-capas-ii.php

CSS Fin del tema

Ejercicio Realiza una página que contenga un <div> con al menos 3 imágenes de fondo, bordes redondeados y sombra       

Ejercicio 1.- Las características de una caja <div> son el contenido, el margen interior padding, el borde border y el margen margin, si el ancho de un div es de 400px, el pading 20px y el borde 5px,¿cuanto mide el ancho total de la caja?: a) 400px b) 425px c) 450px d) 440px 2.- Es posible colocar más de una imagen de fondo en una caja <div> a) SI b) NO 3.- Los valores de sombra para una caja <div>: box-shadow: 10px 10px 5px 2px rgba(100, 100, 100, 0.5); el color de la sombra es: a) Rojo b) verde c) azul d) gris 4.- Los valores de sombra para una caja <div>: box-shadow: inset 5px 5px 20px 5px #CCCCCC; La sombra es: a) de color rojo b) interior c) de 30px de desplazamiento horizontal d) exterior 5.- Los valores de bordes redondeados para una caja <div>: border-radius: 10px 0px 10px 0px; el borde de la caja: a) es igual en los 4 esquinas b) es igual en la top left y bottom left c) es igual en top left y top right d) es igual en top left y bottom right       

Ejercicio - Soluciones 1.- Las características de una caja <div> son el contenido, el margen interior padding, el borde border y el margen margin, si el ancho de un div es de 400px, el pading 20px y el borde 5px,¿cuanto mide el ancho total de la caja?: a) 400px b) 425px c) 450px d) 440px C 2.- Es posible colocar más de una imagen de fondo en una caja <div> a) SI b) NO A 3.- Los valores de sombra para una caja <div>: box-shadow: 10px 10px 5px 2px rgba(100, 100, 100, 0.5); el color de la sombra es: a) Rojo b) verde c) azul d) gris D 4.- Los valores de sombra para una caja <div>: box-shadow: inset 5px 5px 20px 5px #CCCCCC; La sombra es: a) de color rojo b) interior c) de 30px de desplazamiento horizontal d) exterior B 5.- Los valores de bordes redondeados para una caja <div>: border-radius: 10px 0px 10px 0px; el borde de la caja: a) es igual en los 4 esquinas b) es igual en la top left y bottom left c) es igual en top left y top right d) es igual en top left y bottom right D