css posicionamiento y visualización

2,005 views

Published on

CSS posicionamiento y maquetación. CSS layout and positioning

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,005
On SlideShare
0
From Embeds
0
Number of Embeds
48
Actions
Shares
0
Downloads
32
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

css posicionamiento y visualización

  1. 1. CSS Posicionamiento y Visualización CSS Layout Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  2. 2. 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 @micafelunes 12 de julio de 2010
  3. 3. El Navegador Interpreta 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. Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  4. 4. Declaración de estilos CSS Aplicamos estilos a los elementos HTML de una página construyendo una lista de propiedades selector { selector puede ser: nombre-propiedad: valor; • etiqueta html (h1, p, a, etc.) ... • una clase .nombre nombre-propiedad: valor; • un identificador #nombre } Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  5. 5. Declaración de estilos CSS ador { h1 { #mi_id entific d: valo r; nombre-pro piedad: valor; bre-p ropieda nom i_clase { ... .m ... opoe: #df f co l i rdaff :ffv;alor; or: #ffffff; nom bre-pr col } } ... color : #ffffff; } Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  6. 6. 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 @micafelunes 12 de julio de 2010
  7. 7. h1{ directamente, no hace falta hacer nada, la etiqueta coge estilo sola .....} .mi_clase{ añado a la etiqueta el atributo class <p class=”mi_clase”> } #identificador{ añado a la etiqueta el atributo id <p id=”mi_clase”> } ... Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  8. 8. Modelo de Caja 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 Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  9. 9. Modelo de Caja • Contenido • Padding (Espacio Interior) • Borde • Imagen de Fondo • Color de Fondo • Margen Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  10. 10. Modelo de Caja Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  11. 11. Tipos de elementos HTML • 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 Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  12. 12. Tipos de elementos y Cajas El tipo de elemento (block o inline) influye en la caja que crea el navegador para poder mostrarlo. Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  13. 13. Tipos de elementos y Cajas 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 Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  14. 14. Pueden ser inline o block según circustancias: button, del, iframe, ins, map, object, script Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  15. 15. Modelos de posicionamiento • 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 Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  16. 16. Posicionamiento con CSS selector { propiedad: valor; 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 @micafelunes 12 de julio de 2010
  17. 17. DESPLAZAMIENTO Modelos de posicionamiento • 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 Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  18. 18. Modelos de posicionamiento Estático o Normal • 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 Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  19. 19. static | relative | absolute | fixed Modelos de posicionamiento Estático o Normal • 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 Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  20. 20. Modelos de posicionamiento Relativo • 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 Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  21. 21. static | relative | absolute | fixed Modelos de posicionamiento Relativo • 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 Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  22. 22. Modelos de posicionamiento Relativo - Ventaja 1 Aparece la propiedad z-index: numero; que introduce una coordenada tridimensional para posicionar en profundidad los elementos (y no funciona con static) Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  23. 23. static | relative | absolute | fixed Modelos de posicionamiento Relativo - Ventaja 1 Aparece la propiedad z-index: numero; que introduce una coordenada tridimensional para posicionar en profundidad los elementos (y no funciona con static) Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  24. 24. Modelos de posicionamiento Relativo - Ventaja 2 • Limita el ámbito de los elementos hijos con posicionamiento absoluto (position: absolute;) lo cual puede darnos ventajas: Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  25. 25. static | relative | absolute | fixed Modelos de posicionamiento Relativo - Ventaja 2 • Limita el ámbito de los elementos hijos con posicionamiento absoluto (position: absolute;) lo cual puede darnos ventajas: Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  26. 26. static | relative | absolute | fixed Modelos de posicionamiento Relativo - Ventaja 2 • Limita el ámbito de los elementos hijos con posicionamiento absoluto (position: absolute;) lo cual puede darnos ventajas: Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  27. 27. Modelos de posicionamiento Absoluto • 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) Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  28. 28. static | relative | absolute | fixed Modelos de posicionamiento Absoluto • 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) Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  29. 29. Modelos de posicionamiento Fijo • 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 Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  30. 30. static | relative | absolute | fixed Modelos de posicionamiento Fijo • 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 Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  31. 31. lunes 12 de julio de 2010
  32. 32. Ejemplo posicionamiento static • 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 Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  33. 33. Ejemplo posicionamiento staticlunes 12 de julio de 2010
  34. 34. lunes 12 de julio de 2010
  35. 35. Ejemplo posicionamiento relative • 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... Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  36. 36. Ejemplo posicionamiento relativelunes 12 de julio de 2010
  37. 37. lunes 12 de julio de 2010
  38. 38. 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 @micafelunes 12 de julio de 2010
  39. 39. Ejemplo posicionamiento absolutelunes 12 de julio de 2010
  40. 40. lunes 12 de julio de 2010
  41. 41. 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 Los elementos no se desplazan,quedan resto fijados incluso con scroll Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafelunes 12 de julio de 2010
  42. 42. Ejemplo posicionamiento fixedlunes 12 de julio de 2010

×