CSS div.

Presentación del tema: "CSS div."— Transcripción de la presentación:

1 CSS div

2 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   

3 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; }   

4 Estructura CSS la propiedad display, permite establecer el tipo de caja de un elemento. Los valores más utilizados son: inline, block y none.   

5 Estructura CSS Padding, margin y border   

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

7 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; }

8 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; border-radius: 0 20px 20px 0; border-radius: 20px px; 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%;

9 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; 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;

10 Recursos CSS CSS3 Generator http://css3generator.com/
CSS3 Gradient Generator {CSS} Portal - on line generator CSS3 MAKER: CSS3.com   

11 CSS Fin del tema

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

13 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   

14 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