css posicionamiento y visualización
description
Transcript of css posicionamiento y visualización
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
Posicionamiento y Visualización
CSS Layout
CSS
lunes 12 de julio de 2010
Cascading Style Sheets
Level 2 Revision 1 (CSS 2.1) Specification
Hojas de Estilo en Cascada
Nivel 2 Revisión 1, Especificación 2.1
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
Cuando el Navegador obtiene el contenido HTML y CSS (Etiquetas y Propiedades Visuales) realiza una serie de “cálculos” complejos para poder renderizar (realizar o producir)
la página en la pantalla.
El Navegador Interpreta
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
Aplicamos estilos a los elementos HTML de una página construyendo una lista de propiedades
Declaración de estilos CSS
selector {
nombre-propiedad: valor;
...
nombre-propiedad: valor;
}
selector puede ser:
• etiqueta html (h1, p, a, etc.)
• una clase .nombre
• un identificador #nombre
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
Declaración de estilos CSS
#mi_identificador {
nombre-propiedad: valor;
...
color: #ffffff;
}
h1 {
nombre-propiedad: valor;
...
color: #ffffff;
}
.mi_clase {
nombre-propiedad: valor;
...
color: #ffffff;
}Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
Declaramos los estilos en un fichero con extensión .CSS
¿Cómo aplico los estilos a mi documento HTML?
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
h1{
.....}
.mi_clase{
}
#identificador{
}
...
directamente, no hace falta hacer nada, la etiqueta coge estilo sola
añado a la etiqueta el atributo class <p class=”mi_clase”>
añado a la etiqueta el atributo id <p id=”mi_clase”>
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
El navegador para poder visualizar y representar un elemento de la página HTML , crea una caja.
Para generar una caja tiene en cuenta:
• Las propiedades Width (Ancho) y Height (Altura)
• Tipo de elemento Bloque o Inline (En linea)
• Posicionamiento (Normal, Relativo, Fijo, Absoluto, Fijo o Flotante)
• Relaciones entre elementos y donde se encuentra cada uno
• Tamaño de imágenes
• Tamaño del navegador
Modelo de Caja
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
• Contenido
• Padding (Espacio Interior)
• Borde
• Imagen de Fondo
• Color de Fondo
• Margen
Modelo de Caja
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
Modelo de Caja
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
• Elementos Bloque
• Empiezan en una nueva línea
• Ocupan todo el espacio posible hasta el finál de línea
• Elementos Inline (En línea)
• No empiezan necesariamente en nueva línea
• Ocupan sólo el espacio necesario para mostrar su contenido
• Width (Ancho) y Height (Alto) se ignorar en los elementos inline
Tipos de elementos HTML
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
El tipo de elemento (block o inline) influye en la caja que crea el navegador para poder mostrarlo.
Tipos de elementos y Cajas
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
párrafo <p> </p> elemento block
enlace <a> </a> elemento inline
elementos block no debe ir dentro de elemento inline
elementos inline puede ir dentro de elementos block
Tipos de elementos y Cajas
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
button, del, iframe, ins, map, object, script
Pueden ser inline o block según circustancias:
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
• Normal o estático - el que utiliza por defecto el navegador
• Relativo - sigue el normal y desplaza respecto a la posición original
• Absoluto - la posición de un elemento se fija respecto del elemento contenedor, el resto de elementos quedan igual.
• Fijo - hace la caja inamovible, siempre en la misma posición
• Flotante - desplaza cada caja todo los posible hacia la izquierda o hacia la derecha de la línea en la que se encuentra
Modelos de posicionamiento
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
selector {
propiedad: valor;
...
}
Posicionamiento con CSS
position: valor ;
valor puede ser:
static, relative, absolute, fixed, inherit
El valor por defecto es static
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
• Relativo - sigue el normal y se desplaza según propiedades top, bottom, right y left (desplazamiento desde su border superior / inferior, derecho o izquierdo)
• Absoluto - se desplaza según propiedades top, bottom, right y left, pero el origen depende elemento contenedor (desplazamiento desde el borde superior / inferior, derecho o izquierdo de su elemento padre)
• Fijo - hace la caja inamovible, siempre en la misma posición controlada por top, bottom, right y left
DESPLAZAMIENTOModelos de posicionamiento
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
• Es el posicionamiento que tiene por defecto todos y cada uno de los elementos, todos comienzan como estáticos
• Los elementos fluirán de forma normal según sean elementos bloque o elementos en linea
• No se utiliza. La única razón para usarlo es fijar o reponer un elemento que no controles como estático
Modelos de posicionamientoEstático o Normal
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
• Es el posicionamiento que tiene por defecto todos y cada uno de los elementos, todos comienzan como estáticos
• Los elementos fluirán de forma normal según sean elementos bloque o elementos en linea
• No se utiliza. La única razón para usarlo es fijar o reponer un elemento que no controles como estático
Modelos de posicionamientoEstático o Normal
static | relative | absolute | fixed
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
• Relativo a él mismo
• Si definimos el elemento como position: relative; y no definimos ningún valor para top, bottom, left o right, no pasará nada (sería como si fuese estático o normal)
• Al usar top, bottom, left o right, se desplazará según lo indicado desde su posición natural
• Sigue afectando a los demás elementos como sin no se moviese
• Un uso podría ser el alinear elementos o corregir alineaciones
Modelos de posicionamientoRelativo
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
• Relativo a él mismo
• Si definimos el elemento como position: relative; y no definimos ningún valor para top, bottom, left o right, no pasará nada (sería como si fuese estático o normal)
• Al usar top, bottom, left o right, se desplazará según lo indicado desde su posición natural
• Sigue afectando a los demás elementos como sin no se moviese
• Un uso podría ser el alinear elementos o corregir alineaciones
Modelos de posicionamientoRelativo
static | relative | absolute | fixed
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
Aparece la propiedad
z-index: numero;
que introduce una coordenada tridimensional para posicionar en profundidad los elementos (y no funciona con static)
Modelos de posicionamientoRelativo - Ventaja 1
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
Aparece la propiedad
z-index: numero;
que introduce una coordenada tridimensional para posicionar en profundidad los elementos (y no funciona con static)
Modelos de posicionamientoRelativo - Ventaja 1
static | relative | absolute | fixed
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
• Limita el ámbito de los elementos hijos con posicionamiento absoluto (position: absolute;) lo cual puede darnos ventajas:
Modelos de posicionamientoRelativo - Ventaja 2
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
• Limita el ámbito de los elementos hijos con posicionamiento absoluto (position: absolute;) lo cual puede darnos ventajas:
Modelos de posicionamientoRelativo - Ventaja 2
static | relative | absolute | fixed
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
• Limita el ámbito de los elementos hijos con posicionamiento absoluto (position: absolute;) lo cual puede darnos ventajas:
Modelos de posicionamientoRelativo - Ventaja 2
static | relative | absolute | fixed static | relative | absolute | fixed
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
• Es muy potente y coloca cada elemento de la página exáctamente donde quieres
• Utilizamos top, bottom, left o right para posicionar el elemento
• La posición es relativa al padre del elemento que tenga definido el posicionamiento como relativo (o absoluto)
• Si no hubiese este elemento padre se referirá al elemento <html> posicionandose en relación a la página misma
• Los elementos posicionados, se eliminan del flujo normal de la página y los demás (ni afecta ni es afectado por otros elementos)
Modelos de posicionamientoAbsoluto
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
• Es muy potente y coloca cada elemento de la página exáctamente donde quieres
• Utilizamos top, bottom, left o right para posicionar el elemento
• La posición es relativa al padre del elemento que tenga definido el posicionamiento como relativo (o absoluto)
• Si no hubiese este elemento padre se referirá al elemento <html> posicionandose en relación a la página misma
• Los elementos posicionados, se eliminan del flujo normal de la página y los demás (ni afecta ni es afectado por otros elementos)
Modelos de posicionamientoAbsoluto
static | relative | absolute | fixed
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
• Se usa en raras ocasiones, pero puede ser útil
• El elemento se posiciona de forma relativa a la vista o la ventana del navegador
• No cambia de posición aunque haya scroll en la página
• Permite que algunos elementos estén siempre presentes (ej. navegación)
• Puede ser un efecto interesante, pero hay que testearlo para que sea práctico
Modelos de posicionamientoFijo
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
• Se usa en raras ocasiones, pero puede ser útil
• El elemento se posiciona de forma relativa a la vista o la ventana del navegador
• No cambia de posición aunque haya scroll en la página
• Permite que algunos elementos estén siempre presentes (ej. navegación)
• Puede ser un efecto interesante, pero hay que testearlo para que sea práctico
Modelos de posicionamientoFijo
static | relative | absolute | fixed
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
lunes 12 de julio de 2010
• Todos los elementos está posicionados por defecto static (pos. estático o normal)
• Se aplicó reseteo de hoja de estilos reset.css
• Se crearon div’s para separar bloques de información y colorearon
Ejemplo posicionamiento static
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
Eje
mpl
o po
sici
onam
ient
o st
atic
lunes 12 de julio de 2010
lunes 12 de julio de 2010
• SubApartado1 y SubApartado3 están posicionados de forma relativa
• El resto de elementos está posicionados por defecto static (pos. estático o normal)
• El posicionamiento relativo no afecta a otros elementos, todo sigue como si no hubiese pasado...
Ejemplo posicionamiento relative
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
Eje
mpl
o po
sici
onam
ient
o re
lativ
e
lunes 12 de julio de 2010
lunes 12 de julio de 2010
Ejemplo posicionamiento absolute• SubApartado1 y
SubApartado3 están posicionados de forma absoluta
• El resto de elementos está posicionados por defecto static (pos. estático o normal)
• El posicionamiento absoluto es en referencia al padre inmediato con posicionamiento absoluto o relativo (div subapartados)
• Los elementos desaparecen del flujo normal y los demás se comportan como si no estuvieses allí
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
Eje
mpl
o po
sici
onam
ient
o ab
solu
te
lunes 12 de julio de 2010
lunes 12 de julio de 2010
Ejemplo posicionamiento fixed• SubApartado1 y
SubApartado3 están posicionados de forma fixed
• El resto de elementos está posicionados por defecto static (pos. estático o normal)
• El posicionamiento absoluto es en referencia al documento (el. <html>)
• Los elementos desaparecen del flujo normal y no afectan al resto
Los elementos no se desplazan,quedan fijados incluso con scroll
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe
lunes 12 de julio de 2010
Eje
mpl
o po
sici
onam
ient
o fix
ed
lunes 12 de julio de 2010