Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

css posicionamiento y visualización

CSS posicionamiento y maquetación. CSS layout and positioning

  • Login to see the comments

  • Be the first to like this

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

×