2 Hojas de Estilo es Cascada (CSS)

CSS controla el aspecto grfico del documento mediante hojas de estilo (style sheets),
indicando al navegador cmo se deben renderizar los elementos de un documento HTML.
Consiguiendo as separar el aspecto del contenido.

Cmo se declara una norma de estilo:

Comienza con una llave inicial { y termina con la correspondiente llaven final }; cada
bloque de declaracin: {declaracin; declaracin} separadas por punto y coma ;.
Cada declaracin: propiedad : valor; (fija un valor para una propiedad).
El valor de cada propiedad puede ser: palabra clave, literal, nmero, longitud, porcentaje,
URL, color, ngulo, tiempo, frecuencia o contador.
HTML tiene tres maneras de referenciar la informacin del estilo:

En lnea; situando style en el elemento dentro de la pgina, no se puede reutilizar

para varios elementos que comparten las mismas propiedades. Est desaprobado por
el W3C.

En la cabeza (head) de la pgina, dentro de la etiqueta : <style>...</style>

Como archivo aparte; que es lo ms aconsejable para mantener la separacin entre

contenido y presentacin, la solucin es crear una hoja de estilo separada del
documento HTML y referenciarla con:
<link rel=stylesheet href=misestilos.css media=screen />

La principal ventaja es que las hojas de estilo son aplicables a una o a muchas
pginas. Pueden contener indicaciones de estilo para cada uno de los distintos dispositivos de
presentacin y segn tamao y resolucin de la pantalla (Diseo fluido o adaptativo).
Las reglas CSS ms importantes ordenadas de menor a mayor son:

Navegador (CSS por defecto del navegador)

Autor (CSS definida por el diseador)
Usuario (CSS definida segn las preferencias del usuario)
!important autor (valores CSS importantes imprescindibles para el diseador)
!important usuario (valores CSS importantes imprescindibles para el usuario)

Puede disearse el estilo de manera genrica, que afecte a todos los elementos de la pgina
con una etiqueta HTML.

p{
color: #F00;
}
CSS permite el uso de selectores mltiples para agrupar varias reglas individuales en una
sola regla. Los selectores deben ir separados por comas (,)
h1, h2, h3 {
color: #F00;
}
2-1 Herencia CSS.
Para entender la herencia es necesario entender el rbol del documento.

El rbol del documento del ejemplo anterior:

Si definimos un estilo en el body, todos los elementos situados debajo en el rbol del
documento, heredan esa propiedad.

Hay algunas propiedades HTML que no se heredan, como por ejemplo border.

2-2 Selectores CSS

universal;

Afecta a todos los elementos.

El selector de clase .nombre afecta a todos los elementos con esa clase (class). Se puede
utilizar la misma clase en varios elementos, y varias clases en el mismo elemento.
El selector (id) #nombre afecta al elemento con el (id) #nombre (es nico en toda la pgina
web).

Selector elemento
p { color: green; }
afecta a todos los elementos <p>...</p>.
Selector elemento, elemento
h1, h2, h3, h4, h5, h6 { color: blue; }
afecta a cada uno de los h.
Selector elemento elemento
div p { color: pink; }
afecta a todos los elementos <p> dentro de un <div> (sin importar el nivel de profundidad).
Selector elemento>elemento
div > p { color: blue; }
afecta a todos los elementos hijos <p> cuyo padre es <div>.
Selector elemento+elemento
div + p { color: red; }
afecta a los elementos <p> que estn situados inmediatamente despus del elemento <div> no
dentro de el.
Selector elemento:first-child
selecciona el primer elemento hijo.

Selector elemento:last-child
selecciona el ltimo elemento hijo.
Selector elemento:nth-child(nmero)
selecciona un elemento hijo especfico.
Selector elemento.atencion
todos los elementos de tipo elemento con atributo class=atencion
Selector :link, :visited, :active, :hover
a:link, a:visited, a:active, a:hover
:link estilo aplicado a los enlaces no visitados, :visited cuando el enlace ha sido visitado, :active
cuando el elemento est activo, :hover cuando el ratn est sobre el enlace. Como los navegadores
muestran por defecto los enlaces de color azul y los enlaces visitados de color morado, es habitual
modificar los estilos para adaptarlos a la gua de estilo del sitio web.

Cuando se crean archivos CSS con cientos de normas de estilo que se aplican a diferentes
selectores, se pueden agrupar aquellos selectores con las mismas normas para hacer las hojas de
estilos ms eficientes.

2-3 Importancia de las declaraciones CSS.

Cuando dos declaraciones afectan a un mismo elemento. Cul de ellas se interpreta en el
navegador como ms importante?
#caja h1 {
color: blue;
}
h1.titulo {
color: red;
}
h1 {
color: black;
}
#caja h1
A = 0 x estilo en lnea
B = 1 x id
C = 0 x class
D = 1 x elemento
puntuacin = 0,1,0,1
h1.titulo
A = 0 x estilo en lnea
B = 0 x id
C = 1 x class
D = 1 x element
puntuacin = 0,0,1,1
h1
A = 0 x estilo en lnea.
B = 0 x id
C = 0 x class
D = 1 x element
puntuacin = 0,0,0,1
La ganadora es 0101

Cuando dos declaraciones tienen el mismo valor, ser la ltima especificada la que se aplique.
2-4 Unidades de medida
Las medidas en CSS se emplean, para definir la altura, anchura y mrgenes de los elementos
y para establecer el tamao de letra de texto. Todas las medidas se indican como un valor numrico
entero o decimal seguido de una unidad de medida (sin ningn espacio en blanco entre el nmero y
la unidad de medida). Si el valor es 0, la unidad de medida es opcional. Si el valor es distinto a 0 y
no se indica ninguna unidad, la medida se ignora. Si el valor decimal de una medida es inferior a 1,
se puede omitir el 0 de la izquierda (0.5em es equivalente a .5em).
Las unidades absolutas establecen de forma completa el valor:

in, pulgadas equivale a 2.54 cm.

cm, centmetros.
mm, milmetros.
pt, puntos equivale a 0.35mm.
pc, pica eqivale a 4.23mm.

La principal ventaja de las unidades absolutas es que su valor es directamente el valor que se
debe utilizar, su principal desventaja es que son muy poco flexibles y no se adaptan fcilmente a los
diferentes medios.
De todas las unidades absolutas, la nica que suele utilizarse es el punto (pt). Se trata de la
unidad de medida preferida para establecer el tamao del texto en los documentos que se van a
imprimir (print).

Las unidades relativas definen su valor en relacin con otra medida, son las ms utilizadas
en el diseo web por su flexibilidad con la que se adaptan a los diferentes medios:

em, (no confundir con la etiqueta <em> de HTML) relativa respecto del tamao de
letra del elemento, 1em equivale a la anchura de la letra M.
ex, relativa respecto de la altura de la letra x minsculas del tipo y tamao de letra
del elemento.
px, (pxel) relativa respecto de la resolucin de la pantalla del dispositivo en el que
se visualiza la pgina HTML.

Los navegadores muestran por defecto el texto de los prrafos con un tamao de letra de
16px.
El W3C recomienda el uso de la unidad em para indicar el tamao del texto y para tadas las
medidas que sean posibles. Normalmente se utilizan px y % para definir el layout del documento
(anchura de las columnas y de los elementos de las pginas) y em y % para el tamao de letra de los
textos.

2-5 Colores
Los colores en CSS se pueden indicar de esta manera; palabras clave, RGB hexadecimal,
RGB numrico y RGB porcentual. El mtodo ms habitual es el RGB hexadecimal.

El mtodo RGB hexadecimal est basado en el sistema numrico hexadecimal, (0 al 9 y de

la A a la F). Definir un color CSS con este mtodo requiere realizar los siguientes pasos; determinar
los componentes RGB decimales del color, R red , G green, B blue; transformar el valor decimal de
cada componente al sistema numrico hexadecimal. Se le aade el prefijo #, la forma compacta de
indicar un color, es comprimir sus valores cuando todas sus componentes son iguales dos a dos:
#AAA = #AAAAAA

#A0F = AA00FF

#369 = #336699

Las letras que forman parte del color en formato RGB hexadecimal se pueden escribir en
maysculas o minsculas indistintamente, se recomienda escribirlas en maysculas.
2-6 Medios CSS
CSS permite definir diferentes estilos para diferentes medios o dispositivos; pantallas,
impresoras, mviles, proyectores, etc:
Medio

Descripcin
all
Todos los medios definidos
braille
Dispositivos tctiles que emplean el sistema braille
embosed
Impresoras braille
handheld
Dispositivos de mano: mviles, PDA, etc.
print
Impresoras y navegadores en el modo "Vista Previa para Imprimir"
projection Proyectores y dispositivos para presentaciones
screen
Pantallas de ordenador
speech
Sintetizadores para navegadores de voz utilizados por personas discapacitadas
tty
Dispositivos textuales limitados como teletipos y terminales de texto
tv
Televisores y dispositivos con resolucin baja

Los medios ms utilizados actualmente son screen (para definir el aspecto de la pgina en
pantalla), print (para definir el aspecto de la pgina cuando se imprime) y handheld (que define el
aspecto de la pgina cuando se visualiza mediante un dispositivo mvil).
CSS clasifica a los medios en diferentes grupos segn sus caractersticas:
Continuo /
Paginado
braille
continuo
embossed
paginado
handheld
ambos
print
paginado
projection paginado
screen
continuo
speech
continuo
tty
continuo
tv
ambos
Medio

Visual / Auditivo /
Tctil / Vocal
tctil
tctil
visual, auditivo, vocal
visual
visual
visual, auditivo
vocal
visual
visual, auditivo

Mapa de bits /
Caracteres
caracteres
caracteres
ambos
mapa de bits
mapa de bits
mapa de bits
(no tiene sentido)
caracteres
mapa de bits

Interactivo /
Esttico
ambos
esttico
ambos
esttico
interactivo
ambos
ambos
ambos
ambos

La gran ventaja de CSS es que permite modificar los estilos de una pgina en funcin del
medio en el que se visualiza. Existen cuatro formas diferentes de indicar el medio en el que se
deben aplicar los estilos CSS.
a) Medios definidos con las reglas de tipo @media:
Las reglas @media son un tipo especial de regla CSS que permiten indicar de forma
directa el medio o medios en los que se aplicarn los estilos incluidos en la regla. Para especificar el
medio en el que se aplican los estilos, se incluye su nombre despus de @media. Si los estilos se
aplican a varios medios, se incluyen los nombres de todos los medios separados por comas. A
continuacin se muestra un ejemplo:
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2em }
}
El ejemplo anterior establece que el tamao de letra de la pgina cuando se visualiza en una
pantalla debe ser 13 px. Sin embargo, cuando se imprimen los contenidos de la pgina, su tamao
de letra debe ser de 10 pt. Por ltimo, tanto cuando la pgina se visualiza en una pantalla como
cuando se imprimen sus contenidos, el interlineado del texto debe ser de 1.2em.

b) Medios definidos con las reglas de tipo @import:

Cuando se utilizan reglas de tipo @import para enlazar archivos CSS externos, se puede
especificar el medio en el que se aplican los estilos indicando el nombre del medio despus de la
URL del archivo CSS:
@import url("estilos_basicos.css") screen;
@import url("estilos_impresora.css") print;
Las reglas del ejemplo anterior establecen que cuando la pgina se visualiza por pantalla, se
cargan los estilos definidos en el primer archivo CSS. Por otra parte, cuando la pgina se imprime,
se tienen en cuenta los estilos que define el segundo archivo CSS.
Si los estilos del archivo CSS externo deben aplicarse en varios medios, se indican los
nombres de todos los medios separados por comas. Si no se indica el medio en una regla de tipo
@import, el navegador sobreentiende que el medio es all, es decir, que los estilos se aplican en
todos los medios.
c) Medios definidos con la etiqueta <link>:
Si se utiliza la etiqueta <link> para enlazar los archivos CSS externos, se puede utilizar el
atributo media para indicar el medio o medios en los que se aplican los estilos de cada archivo:
<link rel="stylesheet" media="screen" href="basico.css" />
<link rel="stylesheet" media="print, handheld" href="especial.css" />
En este ejemplo, el primer archivo CSS se tiene en cuenta cuando la pgina se visualiza en
la pantalla (media="screen"). Los estilos indicados en el segundo archivo CSS, se aplican al
imprimir la pgina (media="print") o al visualizarla en un dispositivo mvil
(media="handheld").
Si la etiqueta <link> no indica el medio CSS, se sobreentiende que los estilos se deben
aplicar a todos los medios, por lo que es equivalente a indicar media="all".
d) Medios definidos mezclando varios mtodos:
CSS tambin permite mezclar los tres mtodos anteriores para indicar los medios en los que
se aplica cada archivo CSS externo:
<link rel="stylesheet" media="screen" href="basico.css" />
@import url("estilos_seccion.css") screen;
@media print {
/* Estilos especficos para impresora */
}

Los estilos CSS que se aplican cuando se visualiza la pgina en una pantalla se obtienen
mediante el recurso enlazado con la etiqueta <link> y mediante el archivo CSS externo incluido
con la regla de tipo @import. Adems, los estilos aplicados cuando se imprime la pgina se
indican directamente en la pgina HTML mediante la regla de tipo @media.

2-7 Modelo de Caja (Box Model)

Los elementos html pueden visualizarse como bloque o como en lnea.
Los elementos bloques (block) ocupan el ancho de la pgina y fuerzan a una nueva lnea
antes y despus. Son posicionados uno sobre otro hacia abajo en la pgina y tan alto como la
informacin que contiene.
<address> <article> <aside> <audio> <blockquote> <canvas> <dd>
<div> <dl> <fieldset> <figcaption> <figure> <footer> <form> <h1>,
<h2>, <h3>, <h4>, <h5>, <h6> <header> <hgroup> <hr> <nav>
<noscript> <ol> <output> <p> <pre> <section> <table> <tfoot> <ul>
<video>
Los elementos en lnea (inline) slo ocupan el ancho necesario y no fuerzan nuevas lneas.
Son posicionados uno al lado del otro en la misma lnea, mientras haya espacio horizontal.
<b> <big> <i> <small> <tt> <abbr> <acronym> <cite> <code> <dfn>
<em> <kbd> <strong> <samp> <var> <a> <bdo> <br> <img> <map>
<object> <q> <script> <span> <sub> <sup> <button> <input> <label>
<select> <textarea>
El elemento <div> es un elemento de bloque que se emplea para contener en su interior a
otros elementos html. Este elemento no tiene ningn significado, es semnticamente neutro.
Empleando CSS, el elemento <div> se puede utilizar para estructurar el documento en grandes
bloques de contenido. La etiqueta <div> ofrece a los diseadores la flexibilidad y el control sobre la
posicin cuando se combina con las propiedades CSS. Hay que tener cuidado al emplear el tamao,
el contenido segn el navegador puede desbordar el tamao de un div. Evitar definir altos si no son
necesarios.
El elemento <span> es un elemento en lnea que se emplea como un contenedor de texto. No
tiene ningn significado especial, es semnticamente neutro. Cuando se utiliza junto con CSS, se
puede utilizar para establecer los atributos de estilo para las partes del texto.
Una pgina de este tipo realizada con las etiquetas de HTML5 quedara:

La estructura HTML, debe realizarse en el sentido lgico de lectura de documento, cuando

la pgina se vea sin aplicar los estilos no pierde su significado.
Los navegadores consideran cada elemento HTML como una caja. Una pgina web es en
realidad un grupo de cajas ordenadas siguiendo ciertas reglas. Estas reglas son establecidas por
estilos provistos por los navegadores o por los diseadores usando CSS.
CSS tiene un set predeterminado de propiedades destinados a sobrescribir los estilos
provistos por navegadores y obtener la organizacin deseada. Estas propiedades no son especficas,
tienen que ser combinadas para formar reglas que luego sern usadas para agrupar cajas y obtener la
correcta disposicin en pantalla. La combinacin de estas reglas es normalmente llamada modelo o
sistema de disposicin. Todas estas reglas aplicadas juntas constituyen lo que se llama un modelo de
caja. Cada una de las cajas est formada por seis partes, como muestra la imagen:

1.
2.
3.
4.
5.
6.
7.

Content (texto) contenido HTML.

Padding (relleno).
Border (borde).
Background-image (imagen de fondo).
Background-color (color de fondo).
Margin (margen).
* elementos transparentes.

width ; establece la anchura de la caja. Se aplica a todos los elementos, excepto los de lnea
que no sean imgenes, las filas de tabla y los grupos de filas de tabla.
Unidad de medida | porcentaje | auto | inherit (el elemento hereda el valor del elemento padre
para esta propiedad)
#caja { width: 400px; }
<div id=caja>
...
</div>
height ; establece la altura de la caja. Se aplica a todos los elementos, excepto los de lnea
que no sean imgenes, las filas de tabla y los grupos de filas de tabla.
Unidad de medida | porcentaje | auto | inherit (el elemento hereda el valor del elemento padre
para esta propiedad)
#caja { height: 400px; }
<div id=caja>
...
</div>
margin-top, margin-right, margin-bottom, margin-left ; establece los margenes horizontales
y verticales de la caja, margin-top y margin-bottom slo se pueden aplicar a los elementos de
bloque y las imgenes mientras que margin-left y margin-right se pueden aplicar a cualquier
elemento.
Unidad de medida | porcentaje | auto | inherit (el elemento hereda el valor del elemento padre
para esta propiedad)

La propiedad que permite definir de forma simultanea los cuatro mrgenes es margin,
valores que puede tener:
1. Si solo se indica un valor, todos los mrgenes tienen el mismo.
2. Si se indican dos valores, el primero se asigna al margen superior e inferior y el segundo a
los de izquierda y derecha.
3. Tres valores, el primero margen superior, el tercero margen inferior y el segundo mrgenes

izquierdo y derecho.
4. Cuatro valores, el orden es superior, derecho, inferior e izquierdo.
div.caja {
margin: .5em .8em .4em 1em;
}
margin ; establece de forma simultanea los cuatro mrgenes (shorthand = atajo).
Unidad de medida | porcentaje | auto | inherit (el elemento hereda el valor del
elemento padre para esta propiedad)
Cuando se juntan dos o ms mrgenes verticales, se fusionan de forma automtica y la altura
del nuevo margen ser igual a la altura del margen ms alto de los que se han fusionado.

Si un elemento est contenido dentro de otro elemento, sus mrgenes verticales se fusionan
y resultan en un nuevo margen de la misma altura que el mayor margen de los que se han fusionado.

Si no se diera este comportamiento y se estableciera un determinado margen a todos los

prrafos, el primer prrafo no mostrara un aspecto homogneo respecto de los dems.

padding-top, padding-right, padding-bottom, padding-left ; establece los rellenos horizontales y

verticales de la caja.
Unidad de medida | porcentaje | inherit (el elemento hereda el valor del elemento padre para
esta propiedad)

La propiedad que permite definir de forma simultanea los cuatro rellenos es padding, valores
que puede tener:
1. Si solo se indica un valor, todos los mrgenes tienen el mismo.
2. Si se indican dos valores, el primero se asigna al margen superior e inferior y el segundo a
los de izquierda y derecha.
3. Tres valores, el primero margen superior, el tercero margen inferior y el segundo mrgenes
izquierdo y derecho.
4. Cuatro valores, el orden es superior, derecho, inferior e izquierdo.
div.caja {
padding: .5em .8em .4em 1em;
}
padding ; establece los cuatro rellenos de un elemento de forma simultnea, (shorthand = atajo).
Unidad de medida | porcentaje | inherit (el elemento hereda el valor del elemento padre para
esta propiedad)

border-top-width, border-right-width, border-bottom-width, border-left-width ; permite modificar el

aspecto de cada uno de los cuatro bordes de la caja de un elemento.
Unidad de medida | thin(delgado) | medium(normal) | thick(ancho) | inherit (el elemento
hereda el valor del elemento padre para esta propiedad)
La unidad de medida ms habitual para establecer el grosor de los bordes es el px, las
palabras clave apenas se utilizan, ya que el estndar CSS no indica explcitamente el grosor al que
equivale cada palabra clave, cada navegador le da un valor diferente.
border-width ; establece de forma simultnea la anchura de todos los bordes de una caja,
(shorthand = atajo).
Unidad de medida | thin(delgado) | medium(normal) | thick(ancho) | inherit (el elemento
hereda el valor del elemento padre para esta propiedad)

border-top-color, border-right-color, border-bottom-color, border-left-color ; establece el color de

cada uno de los cuatro bordes de los elementos.
Color | transparent | inherit (el elemento hereda el valor del elemento padre para esta
propiedad)
border-color ; establece de forma simultnea el color de todos los bordes de una caja.
Color | transparent | inherit (el elemento hereda el valor del elemento padre para esta
propiedad)
border-top-style, border-right-style, border-bottom-style, border-left-style ; permite establecer el
estilo de cada uno de los bordes.
None | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit (el
elemento hereda el valor del elemento padre para esta propiedad)

border-style ; establece de forma simultnea los estilos de todos los bordes de una caja,
(shorthand=atajo).
None | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit (el
elemento hereda el valor del elemento padre para esta propiedad)
border-top, border-right, border-bottom, border-left, establece el estilo completo de cada uno de los
cuatro bordes de los elementos, (shorthand=atajo).
Unidad de medida borde || color borde || estilo borde | inherit (el elemento hereda el valor del
elemento padre para esta propiedad)
border ; (shorthand=atajo) establece el valor de todos los atributos de todos los bordes de
forma directa.
Unidad medida borde || color borde || estilo borde| inherit (el elemento hereda el valor del
elemento padre para esta propiedad)

2-8 Margen, relleno, bordes y modelo de caja

La anchura y altura de un elemento no solamente se calcula teniendo en cuenta sus
propiedades width y height. El margen, el relleno y los bordes establecidos a un elemento
determinan la anchura y altura final del elemento.

30px(margen)+10px(borde)+50px(relleno)+300px(div)+50px(relleno)+10px(borde)+30px(margen) = 480px

2-9 Fondos
El fondo solamente se visualiza en el rea ocupada por el contenido y su relleno, ya que el
color de los bordes se controla directamente desde los bordes y las zonas de los mrgenes siempre
son transparentes.
background-color ; permite mostrar un color de fondo slido.
Color | transparent | inherit (el elemento hereda el valor del elemento padre para esta
propiedad)
background-image ; permite mostrar una imagen como fondo de una caja.
Url | none | inherit (el elemento hereda el valor del elemento padre para esta
propiedad)
CSS permite establecer de forma simultnea un color y una imagen de fondo. En este caso,
la imagen se muestra delante del color, por lo que solamente si la imagen contiene zonas
transparentes es posible ver el color de fondo.
background-repeat ; controla la forma en la que se repiten las imgenes de fondo.
repeat | repeat-x | repeat-y | no-repeat | inherit (el elemento hereda el valor del
elemento padre para esta propiedad)
repeat ; indica que la imagen se debe repetir en todas direcciones, comportamiento por
defecto.
no-repeat ; muestra una sola vez la imagen y no se repite en ninguna direccin.
repeat-x ; repite la imagen slo horizontalmente.
repeat-y ; repite la imagen slo verticalmente.
background-position ; controla la posicin de la imagen dentro del elemento, desplazando la
imagen de fondo respecto de la esquina superior izquierda.

top left | top center | top right | center left | center center | center right | bottom left | bottom center |
bottom right | x-% y-% | x-pos y-pos | inherit (el elemento hereda el valor del elemento padre para
esta propiedad)
Si solamente se indica un porcentaje o una medida, se considera que es el desplazamiento
horizontal y al desplazamiento vertical se le asigna automticamente el valor de 50%.
background-attachment ; controla la forma en la que se visualiza la imagen de fondo;
permanece fija cuando se hace scroll en la ventana del navegador o se desplaza junto con la
ventana.
scroll | fixed | inherit (el elemento hereda el valor del elemento padre para esta propiedad)
fixed ; hace que una imagen se muestre fija al desplazarse la ventana del navegador.
background ; establece todas las propiedades del fondo de un elemento, (shorthand=atajo),
permite asignar todos o slo algunos de los valores que se pueden definir.
background color || background image || background repeat || background attachment || background
position | inherit (el elemento hereda el valor del elemento padre para esta propiedad)
body { background: #222d2d url(./images/foto.jpg) repeat-x 0 0; }
3 Posicionamiento
Los navegadores crean y posicionan de forma automtica todas las cajas que forman cada
pgina HTML. CSS permite modificar la posicin en la que se muestran, CSS define cinco modelos
diferentes para posicionar una caja:

Posicionamiento normal o esttico; es el utilizado por los navegadores.

Posicionamiento relativo; posiciona una caja segn el posicionamiento normal y despus
desplazarla respecto de su posicin original.
Posicionamiento absoluto; la posicin de una caja se establece de forma absoluta respecto de
su elemento contenedor y el resto de elementos de la pgina ignoran la nueva posicin del
elemento.
Posicionamiento fijo; variante del posicionamiento absoluto que convierte una caja en un
elemento inamovible, de forma que su posicin en la pantalla siempre es la misma
independientemente del resto de elementos e independientemente de si el usuario sube o
baja la pgina en la ventana del navegador.
Poscionamiento flotante; se trata del modelo ms especial de posicionamiento, ya que
desplaza las cajas todo lo posible hacia la izquierda o hacia la derecha de la lnea en la que
se encuentran.

position ; selecciona el posicionamiento con el que se mostrar el elemento, slo indica

cmo se posiciona una caja, pero no la desplaza.
static | relative | absolute | fixed | inherit (el elemento hereda el valor del elemento
padre para esta propiedad)
static ; posicionamiento normal o esttico, se ignoran los valores de las propiedades top,
right, bottom y left, que se vern a continuacin.

relative ; posicionamiento relativo, el desplazamiento de la caja se controla con las

propiedades top, right, bottom y left.
absolute ; posicionamiento absoluto, el desplazamiento de la caja se controla con las
propiedades top, right, bottom y left, el origen de coordenadas del desplazamiento depende del
posicionamiento de su elemento contenedor.
fixed ; posicionamiento fijo, el desplazamiento se establece de la misma forma que en el
posicionamiento absoluto, pero en este caso el elemento permanece inamovible en la pantalla.
top, right, bottom, left ; indica el desplazamiento horizontal y vertical del elemento respecto
de su posicin original.
unidad de medida | porcentaje | auto | inherit (el elemento hereda el valor del
elemento padre para esta propiedad)

3-1 Posicionamiento normal

Es el modelo que utilizan por defecto los navegadores para mostrar los elementos de las
pginas. En este modelo, slo se tiene en cuenta si el elemento es de bloque o en lnea, sus
propiedades width y height y su contenido. Las cajas se muestran una debajo de otra comenzando
desde el principio del elemento contenedor. La distancia entre las cajas se controla mediante los
mrgenes verticales.

Si un elemento se encuentra dentro de otro, el elemento padre se llama elemento

contenedor y determina tanto la posicin como el tamao de todas sus cajas interiores.
Si un elemento no se encuentra dentro de un elemento contenedor, entonces su elemento
contenedor es el elemento <body> de la pgina. Normalmente, la anchura de los elementos de
bloque est limitada a la anchura de su elemento contenedor, aunque en algunos casos sus
contenidos pueden desbordar el espacio disponible.
Las cajas de los elementos en lnea se muestran una detrs de otra de forma horizontal
comenzando desde la posicin ms a la izquierda de su elemento contenedor. La distancia entre
cajas se controla mediante los mrgenes laterales.

Si las cajas en lnea ocupan ms espacio del disponible en su propia lnea, el resto de cajas
se muestran en las lneas inferiores. Si las cajas en lnea ocupan un espacio menor que su propia
lnea, se puede controlar la distribucin de las cajas mediante la propiedad text-align para centrarlas,
alinearlas a la derecha o justificarlas.

3-2 Posicionamiento relativo

Desplaza una caja respecto de su posicin original establecida mediante el posicionamiento
normal. El desplazamiento de la caja se controla con las propiedades top, right, bottom y left.
El valor de la propiedad top se interpreta como el desplazamiento entre el borde superior de
la caja en su posicin final y el borde superior de la misma caja en su posicin original.
De la misma forma, el valor de las propiedades left, right y bottom indica respectivamente el
desplazamiento entre el borde izquierdo/derecho/inferior de la caja en su posicin final y el borde
izquierdo/derecho/inferior de la caja original.
Por tanto, la propiedad top se emplea para mover las cajas de forma descendente, la
propiedad bottom mueve las cajas de forma ascendente, la propiedad left se utiliza para desplazar
las cajas hacia la derecha y la propiedad right mueve las cajas hacia la izquierda. Si se utilizan
valores negativos en las propiedades top, right, bottom y left, su efecto es justamente el inverso.
El desplazamiento relativo de una caja no afecta al resto de cajas adyacentes, que se
muestran en la misma posicin que si la caja desplazada no se hubiera movido de su posicin
original. Se produce solapamiento entre los contenidos de las cajas.

3-3 Posicionamiento absoluto

El posicionamiento absoluto se emplea para establecer de forma exacta la posicin en la que
se muestra la caja de un elemento. La nueva posicin de la caja se indica mediante las propiedades
top, right, bottom y left; en relacin al elemento contenedor.
Cuando una caja se posiciona de forma absoluta, el resto de elementos de la pgina se ven
afectados y modifican su posicin.

La caja 2 est posicionada de forma absoluta, lo que provoca que el resto de elementos de la
pgina modifiquen su posicin. La caja 3 deja su lugar original y pasa a ocupar el hueco dejado por
la caja 2.
El primer elemento contenedor que est posicionado de cualquier forma diferente a position:
static se convierte en la referencia que determina la posicin de la caja posicionada de forma
absoluta. Si ningn elemento contenedor est posicionado, la referencia es la ventana del navegador.
El desplazamiento de una caja posicionada de forma absoluta se controla mediante las
propiedades top, right, bottom y left. La interpretacin de los valores de estas propiedades depende
del elemento contenedor de la caja posicionada.

El valor de la propiedad top indica el desplazamiento desde el borde superior de la caja hasta
el borde superior del elemento contenedor que se utiliza como referencia.
El valor de la propiedad right indica el desplazamiento desde el borde derecho de la caja
hasta el borde derecho del elemento contenedor que se utiliza como referencia.
El valor de la propiedad bottom indica el desplazamiento desde el borde inferior de la caja
hasta el borde inferior del elemento contenedor que se utiliza como referencia.
El valor de la propiedad left indica el desplazamiento desde el borde izquierdo de la caja
hasta el borde izquierdo del elemento contenedor que se utiliza como referencia.

Si se quiere posicionar un elemento de forma absoluta respecto de su elemento contenedor,

es imprescindible posicionar este ltimo. Para ello, slo es necesario aadir la propiedad position:
relative , por lo que no es obligatorio desplazar el elemento contenedor respecto de su posicin
original.

3-4 Posicionamiento Fijo

La forma de obtener el origen de coordenadas para interpretar su desplazamiento es idntica
al posicionamiento absoluto. El posicionamiento fijo hace que las cajas no modifiquen su posicin
ni aunque el usuario suba o baje la pgina en la ventana de su navegador.
Si la pgina se imprime las cajas posicionadas de forma fija se repiten en todas las pginas,
puede ser til para crear encabezados o pies de pgina preparadas para imprimir.
3-5 Posicionamiento Flotante
Cuando una caja se posiciona con el modelo de posicionamiento flotante, deja de pertenecer
al flujo normal de la pgina, el resto de cajas ocupan el lugar dejado por ella, se desplaza hasta la
zona ms a la izquierda o ms a la derecha de la posicin en la que originalmente se encontraba.

Si en el anterior ejemplo la caja 1 se posiciona de forma flotante hacia la izquierda, el

resultado es el que muestra la siguiente imagen:

La caja 1 es de tipo flotante, por lo que desaparece del flujo normal de la pgina y el resto de
cajas ocupan su lugar. El resultado es que la caja 2 ahora se muestra donde estaba la caja 1 y la caja
3 se muestra donde estaba la caja 2.
Al mismo tiempo, la caja 1 se desplaza todo lo posible hacia la izquierda de la posicin en la
que se encontraba. El resultado es que la caja 1 se muestra encima de la nueva posicin de la caja 2
y tapa todos sus contenidos.

Si existen otras cajas flotantes, al posicionar de forma flotante otra caja, se tiene en cuenta el
sitio disponible. En el siguiente ejemplo se posicionan de forma flotante hacia la izquierda las tres
cajas:

En el ejemplo anterior, las cajas no se superponen entre s porque las cajas flotantes tienen
en cuenta las otras cajas flotantes existentes. Como la caja 1 ya estaba posicionada lo ms a la
izquierda posible, la caja 2 slo puede colocarse al lado del borde derecho de la caja 1, que es el
sitio ms a la izquierda posible respecto de la zona en la que se encontraba.
Si no existe sitio en la lnea actual, la caja flotane baja a la lnea inferior hasta que encuentra
el sitio necesario para mostrarse lo ms a la izquierda o lo ms a la derecha posible en esa nueva
lnea:

Las cajas flotantes influyen en la disposicin de todas las dems cajas. Los elementos en
lnea hacen sitio a las cajas flotantes adaptando su anchura al espacio libre dejado por la caja
desplazada. Los elementos de bloque no les hacen sitio, pero s que adaptan sus contenidos para que
no se solapen con las cajas flotantes.
float ; permite posicionar de forma flotante una caja.
left | right | none | inherit
Si se indica un valor left o right, la caja se desplaza hasta el punto ms a la izquierda o
derecha posible en esa misma lnea (si no existe sitio en esa lnea, la caja baja una lnea y se
muestra lo ms a la izquierda o derecha posible en esa nueva lnea). El resto de elementos
adyacentes se adaptan y fluyen alrededor de la caja flotante.

img { float: left; }

El valor none permite anular el posicionamiento flotante de forma que el elemento se
muestre en su posicin original.
clear ; indica el lado del elemento que no debe ser adyacente a ninguna caja flotante.
none | left | right | both | inherit

La propiedad clear indica el lado del elemento HTML que no debe ser adyacente a ninguna
caja posicionada de forma flotante. Si se indica el valor left, el elemento se desplaza
descendentemente hasta que el borde superior del elemento est por debajo del borde inferior de
cualquier elemento flotante hacia la izquierda, (right, al lado derecho).
El valor both despeja los lados izquierdo y derecho del elemento, ya que desplaza el
elemento de forma descendente hasta que el borde superior se encuentre por debajo del borde
inferior de cualquier elemento flotante hacia la izquierda y hacia la derecha.

4 Visualizacin
La propiedad display permite ocultar completamente un elemento haciendo que desaparezca
de la pgina. Como el elemento oculto no se muestra, el resto de elementos de la pgina se mueven
para ocupar su lugar.
La propiedad visibility permite hacer invisible un elemento, no la muestra pero sigue
ocupando su sitio.

display ; permite controlar la forma de visualizar un elemento e incluso ocultarlo.

inline | block | none | inline-block | inherit
block ; muestra un elemento como si fuera de bloque.
inline ; muestra un elemento como si fuera en lnea.
none ; oculta un elemento y hace que desaparezca de la pgina. El resto de elementos se
visualizan como si no existiera el elemento oculto, pueden ocupar el espacio en el
que se debera visualizar este.

La propiedad display: inline se puede utilizar en las listas (<ul>, <ol>) que se quieren
mostrar horizontalmente y la propiedad display: block se emplea para los enlaces que forman el
men de navegacin.
visibility ; permite hacer visibles e invisibles a los elementos.
visible | hidden | collapse | inherit
Inicialmente todas las cajas que componen la pgina son visibles. Empleando el valor
hidden es posible convertir una caja en invisible para que no muestre sus contenidos. El resto de
elementos de la pgina se muestran como si la caja todava fuera visible, por lo que en el lugar
donde originalmente se mostraba la caja invisible, ahora se muestra un huevo vaco.
El valor collapse slo se puede utilizar en las filas, grupos de filas, columnas y grupos de
columnas de una tabla. Su efecto es similar al de la propiedad display, ya que oculta completamente
la fila y/o columna.
4-1 Relacin entre display, float y position
Cuando se establecen las propiedades display, float y position sobre una misma caja, su
interpretacin es la siguiente:
1. Si display vale none, se ignoran las propiedades float y position y la caja no se muestra en la
pgina.
2. Si position vale absolute o fixed, la caja se posiciona de forma absoluta, se considera que
float vale none y la propiedad display vale block tanto para los elementos en lnea como
para los elementos de bloque. La posicin de la caja se determina mediante el valor de las
propiedades top, right, bottom y left.
3. En cualquier otro caso, si float tiene un valor distinto de none, la caja se posiciona de forma
flotante y la propiedad display vale block tanto para los elementos en lnea como para los
elementos de bloque.
4-2 Propiedad overflow
Normalmente, los contenidos de un elemento se pueden mostrar en el espacio reservado para
ese elemento. Sin embargo, en algunas ocasiones el contenido de un elemento no cabe en el espacio
reservado para ese elemento y se desborda. Overflow controla la forma en la que se visualzian los
contenidos que sobresalen de sus elementos.
overflow ; controla los contenidos sobrantes de un elemento.
visible | hidden | scroll | auto | inherit
visible ; el contenido no se corta y se muestra sobresaliendo la zona reservada para
visualizar el elemento. Este es el comportamiento por defecto.
hidden ; el contenido sobrante se oculta y slo se visualiza la parte del contenido que cabe
dentro de la zona reservada para el elemento.

scroll ; solamente se visualiza el contenido que cabe dentro de la zona reservada para el
elemento, pero tambin se muestran barras de scroll que permiten visualizar el resto
del contenido.
auto ; el comportamiento depende del navegador, aunque normalmente es el mismo que la
propiedad scroll.

4-3 Propiedad z-index

CSS permite controlar la posicin tridimensional de las cajas. Es posible indicar las cajas
que se muestran delante o detrs de otras cajas cuando se producen solapamientos. Utilizando esta
propiedad es posible crear pginas complejas con varios niveles o capas.
z-index ; establece el nivel tridimensional en el que se muestra el elemento.
auto | numero | inherit

La propiedad z-index slo tiene efecto en los elementos posicionados, por lo que es
obligatorio que la propiedad z-index vaya acompazada de la propiedad position. Si debes posicionar
un elemento pero no quires moverlo de su posicin original ni afectar a resto de elementos de la
pgina, puedes utilizar el posicionamiento relativo (position: relative).
div { position: absolute }
#caja1 { z-index: 5; top: 1em; left: 8em; }
#caja2 { z-index: 15; top: 5em; left: 5em; }
#caja3 { z-index: 25; top: 2em; left: 2em; }