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



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



Aplicamos estilos a los elementos HTML de una página construyendo una lista de propiedades

Declaración de estilos CSS

selector {

nombre-propiedad: valor;

...


}

selector puede ser:

• etiqueta html (h1, p, a, etc.)

• una clase .nombre

• un identificador #nombre



Declaración de estilos CSS

#mi_identificador {


...

color: #ffffff;

}

h1 {


...

color: #ffffff;

}

.mi_clase {


...

color: #ffffff;

}Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe


Declaramos los estilos en un fichero con extensión .CSS

¿Cómo aplico los estilos a mi documento HTML?



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”>



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



• Contenido

• Padding (Espacio Interior)

• Borde

• Imagen de Fondo

• Color de Fondo

• Margen

Modelo de Caja



Modelo de Caja



• 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



El tipo de elemento (block o inline) influye en la caja que crea el navegador para poder mostrarlo.

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

Tipos de elementos y Cajas



button, del, iframe, ins, map, object, script

Pueden ser inline o block según circustancias:



• 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



selector {

propiedad: valor;

...

}

Posicionamiento con CSS

position: valor ;

valor puede ser:

static, relative, absolute, fixed, inherit

El valor por defecto es static



• 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



• 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



• 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



• 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



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



Aparece la propiedad

z-index: numero;

que introduce una coordenada tridimensional para posicionar en profundidad los elementos (y no funciona con static)





• Limita el ámbito de los elementos hijos con posicionamiento absoluto (position: absolute;) lo cual puede darnos ventajas:




• 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



• 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



• 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



Eje

mpl

o po

sici

onam

ient

o st

atic


• 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



Eje

mpl

o po

sici

onam

ient

o re

lativ

e


Ejemplo posicionamiento absolute• SubApartado1 y

SubApartado3 están posicionados de forma absoluta


• 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í



Eje

mpl

o po

sici

onam

ient

o ab

solu

te


Ejemplo posicionamiento fixed• SubApartado1 y

SubApartado3 están posicionados de forma fixed


• 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



Eje

mpl

o po

sici

onam

ient

o fix

ed


css posicionamiento y visualización

Education

Transcript of css posicionamiento y visualización