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;
}
Estructura CSS
la propiedad display, permite establecer el tipo de caja de un
elemento. Los valores más utilizados son: inline, block y none.
Estructura CSS
Padding, margin y border
Estructura CSS
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
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-right-radius: 50px 30px;
border-radius: 0 20px 20px 0;
border-top-left-radius: 24px;
border-radius: 24px 0;
border-bottom-right-radius: 50px 30px; border-radius: 50%;
border-radius: 20px 0 0 20px;
border-radius: 36px 12px;
border-radius: 50% 50% 0 0;
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: 0 0 5px #888;
box-shadow:
inset -5px -5px 0 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 5px #888;
box-shadow: inset -5px -5px #888;
box-shadow: inset -5px -5px 5px #888;
box-shadow:
inset -5px -5px 5px 5px #888;
http://dev.w3.org/csswg/css-backgrounds/
box-shadow: inner 0 0 5px #888;
box-shadow: inset 0 0 5px 5px #888;
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/
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
Descargar

CSS