Referencia de CSS 2.1

Referencia de CSS 2.
1
Ordenadas por tipo
Anchura y altura
height
min-height
max-height
min-width
max-width
width
Margen
margin-right
margin-left
margin-top
margin-bottom
margin
Relleno
padding-top
padding-right
padding-bottom
padding-left
padding
Borde
border-color
border-top-style
border-style
border-right-style
border-top
border-bottom-style
border-right
border-left-style
border-bottom
border-top-width
border-left
border-right-width
border-top-color
border-bottom-width
border-right-color
border-left-width
border-bottom-color
border-width
border-left-color
border
Perfl
outline-color
outline-width
outline-style
outline
Fondo
background-attachment
background-position
background-color
background-repeat
background-image
background
Tipografa
color
font-variant
font-family
font-weight
font-size
font
font-style
letter-spacing
Texto
direction
text-indent
line-height
text-transform
text-align
unicode-bidi
text-decoration
word-spacing
Posicionamiento
bottom
clear
foat
left
position
right
top
Visualizacion
clip
visibility
display
white-space
overfow
z-index
Tablas
border-collapse
border-spacing
caption-side
empty-cells
table-layout
Listas
list-style-image
list-style-type
list-style-position
list-style
Contenido generado
content
counter-reset
counter-increment
quotes
Medios impresos
orphans
page-break-after
page-break-before
page-break-inside
widows
Medios auditivos
azimuth
play-during
cue-after
richness
cue-before
speak-header
cue
speak-numeral
elevation
speak-punctuation
pause-after
speak
pause-before
speech-rate
pause
stress
pitch-range
voice-family
pitch
volume
Otras
cursor
vertical-align
Ordenadas alfabticamente
A
azimuth
B
background
background-color
background-image
background-position
background-repeat
border
border-bottom
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-bottom-color
border-bottom-style
border-bottom-width
border-collapse
border-color
border-left
border-left-color
border-top
border-top-color
border-top-style
border-top-width
border-width
bottom
C
caption-side
clear
clip
color
content
counter-increment
counter-reset
cue
cue-after
cue-before
cursor
D
direction
display
elevation
empty-cells
foat
font-style
F
font
font-family
font-size
font-variant
font-weight
H
height
L
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
O
orphans
outline-style
outline
outline-width
outline-color
overfow
padding
pause
P
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
pause-after
pause-before
pitch
pitch-range
play-during
position
Q
quotes
R
richness
right
speak
speak-punctuation
speak-header
speech-rate
speak-numeral
stress
table-layout
text-indent
text-align
text-transform
text-decoration
top
unicode-bidi
V
vertical-align
voice-family
visibility
volume
W
white-space
width
widows
word-spacing
Z
z-index
2015 LibrosWeb.es Contacto

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad height
Propiedad height
Defnicin
Establece la altura de los elementos de bloque

Valores permitidos
Uno y slo uno de los siguientes valores:

medida
porcentaje
auto
inherit
Si se utilizan porcentajes, hace referencia a la altura del elemento en el que se encuentra. Si este elemento
contenedor no tiene establecida una altura de forma explcita y el elemento para el que se defne la altura no
est posicionado de forma absoluta, se ignora la altura en porcentaje y se sustituye por el valor auto
Valor inicial
auto
Se aplica a
Todos los elementos, salvo los elementos en lnea que no sean imgenes, las columnas de tabla y los grupos
de columnas de tabla.
Vlida en
medios visuales
Se hereda
no
Defnicin enel estndar
w3.org/TR/CSS21/visudet.html#propdef-height
Ejemplos de uso
Para los elementos de bloque y las imgenes, la propiedad height permite establecer su altura directamente
mediante una unidad de medida. El siguiente ejemplo establece la altura a un <div> para que no se muestre con la
altura por defecto calculada por el navegador:
div { height: 100px; }
Las imgenes son el nico elemento en lnea para el que se tiene en cuenta la propiedadheight. Por lo tanto,
establecer la propiedad height de CSS es equivalente a establecer el atributo height de HTML.
El siguiente ejemplo muestra la imagen con una altura de 80px, independientemente de la altura real que tenga la
imagen:
La propiedad height no funciona con los elementos en lnea que no son imgenes. En el siguiente ejemplo, a
pesar de que a cada enlace se le asigna una altura diferente, el navegador los muestra todos con la misma altura:
(height: 20px) Lorem ipsum dolor sit amet
Si se utilizan unidades de medida, los valores indicados no pueden ser negativos. El uso deporcentajes para
defnir la altura de los elementos no es tan sencillo como cuando se utiliza para defnir su anchura.
Cuando un elemento establece su altura mediante un porcentaje, la referencia que se toma es la altura de su
elemento contenedor. Sin embargo, si ese elemento contenedor no tiene establecida una altura de forma explcita,
se ignora la altura en porcentaje y se sustituye por el valor auto.
En el siguiente ejemplo, los dos elementos <div> interiores tienen la misma altura del 50%. Sin embargo, slo el
primer <div> se ve correctamente, ya que slo el primer elemento contenedor tiene establecida su altura de forma
explcita. La altura del segundo <div> se ignora y se sustituye por el valor auto:
div { height: auto; }
div { height: 50%; }
div { height: 50%; }
Si se establece la altura de un elemento con la unidad de medidaem, la referencia que se toma es el tamao de
letra del propio elemento. En el siguiente ejemplo, los dos <div> tienen el mismo valor en la propiedad height, pero
como su tamao de letra es muy diferente, su altura tambin es muy diferente:
div {
height: 5em;
font-size: 1em;
}
div {
height: 5em;
font-size: 2em;
}
El valor auto es el valor por defecto de la altura de todos los elementos. En este caso, el navegador determina la
altura de cada elemento teniendo en cuenta, entre otros, el tipo de elemento que se trata (de bloque o en lnea), el
sitio disponible en la pantalla del navegador y los contenidos de los elementos.
Por ltimo, recuerda que el valor de la propiedad height siempre hace referencia a la altura del contenido de cada
elemento. Si se aaden mrgenes, bordes y rellenos, la altura total con la que se muestra el elemento ser mayor
que el valor de la propiedad height:
div {
height: 100px;
}
div {
height: 100px;
padding-top: 30px;
border: 5px solid #000;
}
Compartir
Twitter
Facebook
Google+
Propiedades relacionadas
height
max-height
max-width
min-height
min-width
width

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad max-height
Propiedad max-height
Defnicin
Limita la altura mxima de los elementos de bloque

Valores permitidos

medida
porcentaje
none
inherit
Si se utilizan porcentajes, hace referencia a la altura del elemento en el que se encuentra
Valor inicial
none
Se aplica a
Todos los elementos, salvo los elementos en lnea que no sean imgenes, las flas de tabla y los grupos de flas
de tabla.
Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/visudet.html#propdef-max-height
Ejemplos de uso
La propiedad max-height es una de las propiedades CSS menos utilizadas, ya que normalmente se fjan las
anchuras de los elementos y se deja que el navegador calcule automticamente la altura de cada elemento de
forma que quepan sus contenidos.
En el siguiente ejemplo, los dos <div> tienen establecida una anchura fja. Adems, el segundo <div> tiene
establecida una altura mxima mediante la propiedad max-height: 100px:
Lorem ipsum dolor sit amet,
consectetuer adipiscing
elit. Ut dictum justo ut
pede. Quisque velit.
Curabitur commodo blandit
nunc. Ut scelerisque enim
blandit arcu. Morbi sed
neque. Duis pellentesque
ornare eros. Donec bibendum
eros lacinia urna.
(max-height: 100px) Lorem
ipsum dolor sit amet,
elit. Ut dictum justo ut
pede. Quisque velit.
Curabitur commodo blandit
nunc. Ut scelerisque enim
blandit arcu. Morbi sed
neque. Duis pellentesque
Como su anchura es fja, el navegador ajusta la altura de cada<div> hasta que quepan todos sus contenidos. El
primer <div> no tiene ninguna restriccin en su altura, por lo que el navegador muestra correctamente los
contenidos en su interior.
Sin embargo, la altura necesaria para el segundo <div> es mayor que la altura mxima permitida, por lo que sus
contenidos se desbordan.
El desbordamiento de los contenidos se puede controlar mediante la propiedad overfow.
La propiedad max-height no admite valores negativos y el valor none se puede utilizar para no limitar la altura
mxima de un elemento. Si se utilizan porcentajes, su referencia es la altura del elemento contenedor. Si este
elemento contendor no tiene establecida su altura de forma explcita y el elemento no est posicionado de forma
absoluta, el valor de porcentaje se ignora y se sustituye por el valor none.
El navegador Internet Explorer 6 no incluye esta propiedad, por lo que se debe utilizar un truco que hace uso de
CSS y JavaScript para simular el comportamiento de la propiedad max-height:
#contenedor {
max-height: 300px;
overfow: hidden;
height: expression(this.scrollHeight > 301? "300px": "auto");

}
El ejemplo anterior hace uso de una funcin llamada expression() que slo funciona en los navegadores de tipo
Internet Explorer (desde su versin 5). Esta funcin permite establecer una medida utilizando expresiones
matemticas o mediante cdigo JavaScript.
En este caso, se utiliza JavaScript para establecer de forma dinmica la altura del elemento#contenedor. Si la
altura de este elemento (obtenida mediante this.scrollHeight) es mayor que 301px, se establece su altura a
300px. En cualquier otro caso, se deja que el navegador calcule automticamente la altura necesaria mediante el
valor auto.
El principal inconveniente de utilizar la funcin expression() es que el cdigo CSS resultante no es vlido segn el
estndar ofcial y por tanto, no supera satisfatoriamente el proceso de validacin de herramientas como el validador
de CSS del W3C
Por otra parte, establecer medidas mediante operaciones matemticas puede resultar muy til para tener un control
preciso cuando se utilizan unidades como em y porcentajes. Por este motivo, la futura versin CSS 3 incluir una
funcin llamada calc() cuyo funcionamiento es idntico a expression().
El siguiente ejemplo muestra el uso de calc() para establecer la anchura de un elemento mediante una operacin
matemtica compleja:
#contenedor {
foat: left;
margin: 1em; border: solid 1px;
width: calc(100%/3 - 2*1em - 2*1px);
}
La anchura del elemento #contenedor anterior se establece a una tercera parte del sitio disponible (100%/3) y
despus se le resta el sitio que ocupan los dos mrgenes laterales de 1em de anchura cada uno (2*1em) y el
espacio ocupado por los dos bordes laterales de 1px de anchura cada uno (2*1px).
Compartir
Twitter
Facebook
Google+
height
max-height
max-width
min-height
min-width
width

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad max-width
Propiedad max-width
Defnicin
Limita la anchura mxima de los elementos de bloque

Valores permitidos

medida
porcentaje
none
inherit
Si se utilizan porcentajes, hace referencia a la anchura del elemento en el que se encuentra
Valor inicial
none
Se aplica a
de tabla.
Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/visudet.html#propdef-max-width
Ejemplos de uso
En ocasiones, puede ser til no establecer de forma explcita la anchura de los elementos pero s fjar una anchura
mxima. En el siguiente ejemplo, el primer <div> no tiene establecida la propiedad max-width por lo que su
anchura ocupa todo el espacio disponible en el elemento que lo contiene.
Sin embargo, el segundo <div> tiene establecida una anchura mxima mediante max-width: 400px. Si se reduce
el tamao de la ventana del navegador, los dos <div> reducen su tamao para adaptarse al nuevo sitio disponible.
Sin embargo, al aumentar el tamao de la ventana del navegador, el primer <div> ocupa todo el sitio disponible y el
segundo <div> no crece ms all de los 400px establecidos.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
(max-width: 400px) Lorem ipsum dolor sit amet,

consectetuer adipiscing elit
La propiedad max-width no admite valores negativos, los valores en porcentaje toman como referencia la anchura
del elemento contenedor y el valor none se puede utilizar para no limitar la anchura mxima de un elemento.
Uno de los usos tpicos de max-width es el de limitar la anchura mxima de las pginas web. Con el uso de
pantallas y resoluciones cada vez mayores, se complica la creacin de pginas web cuya anchura se adapta
dinmicamente. El siguiente ejemplo establece la anchura de la pgina al 95% del tamao de la ventana del
navegador:
#contenedor {
width: 95%;
}
<body>
<div id="contenedor">
...
</div>
</body>
Si se visualiza la pgina anterior en una pantalla con una resolucin muy grande, seguramente su aspecto ser
demasiado diferente al diseo original de la pgina. En estos casos, se suele mantener la anchura adaptable a la
ventana del navegador, pero se limita su anchura mxima:
#contenedor {
width: 95%;
max-width: 1200px;
}
<body>
...
</div>
</body>
CSS y JavaScript para simular el comportamiento de la propiedad max-width:
#contenedor {
max-width: 1200px;
width: expression(document.body.clientWidth > 1201? "1200px": "auto");
}
En este caso, se utiliza JavaScript para establecer de forma dinmica la anchura del elemento#contenedor. Si la
anchura de la pgina (obtenida mediante document.body.clientWidth) es mayor que 1201px, se establece su
anchura a 1200px. En cualquier otro caso, se deja que el navegador calcule automticamente la anchura necesaria
mediante el valor auto.
de CSS del W3C
matemtica compleja:
#contenedor {
foat: left;
width: calc(100%/3 - 2*1em - 2*1px);
}
Compartir
Twitter
Facebook
Google+
height
max-height
max-width
min-height
min-width
width

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad min-height
Propiedad min-height
Defnicin
Establece la altura mnima de los elementos de bloque

Valores permitidos

medida
porcentaje
inherit
Valor inicial
0
Se aplica a
de tabla.
Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/visudet.html#propdef-min-height
Ejemplos de uso
Normalmente, la altura de los elementos se establece de forma explcita mediante la propiedadheight o se deja al
navegador que calcule automticamente la altura necesaria de modo que quepan los contenidos en el interior de
cada elemento.
La propiedad min-height presenta un comportamiento intermedio. En primer lugar, el navegador calcula la altura
necesaria para mostrar los contenidos. Si la altura necesaria es mayor que la altura mnima, el elemento se muestra
con esa altura necesaria.
Si la altura necesaria para mostrar los contenidos es inferior a la altura mnima, se fuerza a que la altura del elemento
sea igual que la altura mnima.
En el siguiente ejemplo, el segundo <div> tiene una altura mnima de min-height: 150px, por lo que el navegador
lo muestra con esa altura a pesar de que sus contenidos no ocupan tanto sitio:
elit.
(min-height: 150px) Lorem
elit.
CSS y JavaScript para simular el comportamiento de la propiedad min-height:
#contenedor {
min-height: 300px;
overfow: hidden;
height: expression(this.scrollHeight < 301? "300px": "auto");
}
En este caso, se utiliza JavaScript para establecer de forma dinmica la altura del elemento#contenedor. Si la
altura de este elemento (obtenida mediante this.scrollHeight) es menor que 301px, se establece su altura a
300px. En cualquier otro caso, se deja que el navegador calcule automticamente la altura necesaria mediante el
valor auto.
de CSS del W3C
matemtica compleja:
#contenedor {
foat: left;
width: calc(100%/3 - 2*1em - 2*1px);
}
Compartir
Twitter
Facebook
Google+
height
max-height
max-width
min-height
min-width
width

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad min-width
Propiedad min-width
Defnicin
Establece la anchura mnima de los elementos de bloque

Valores permitidos

medida
porcentaje
inherit
Valor inicial
0
Se aplica a
de tabla.
Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/visudet.html#propdef-min-width
Ejemplos de uso
Por defecto, los elementos de bloque ocupan toda la anchura disponible en el elemento que los contiene. De esta
forma, si se reduce el tamao de la ventana del navegador, el sitio disponible disminuye y la anchura de los
elementos de bloque es menor. Si se utiliza la propiedad min-width, se puede forzar a que un elemento slo
reduzca su anchura hasta cierto lmite, a partir del cual su anchura ya no disminuye.
En el siguiente ejemplo, los dos <div> ocupan todo el sitio disponible en cada momento. Si se reduce el tamao
de la ventana del navegador, los dos <div> reducen su tamao para adaptarse al nuevo sitio disponible.
No obstante, el segundo <div> tiene establecida una anchura mnima mediante min-width: 500px, de modo que
a partir de ese valor, el <div> no reduce su anchura aunque el sitio disponible siga reducindose. Por lo tanto, si
se reduce mucho el tamao de la ventana del navegador, aparece una barra de scroll horizontal.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
(min-width: 500px) Lorem ipsum dolor sit amet, consectetuer adipiscing elit
La propiedad min-width no admite valores negativos y los valores en porcentaje toman como referencia la anchura
del elemento contenedor.
CSS y JavaScript para simular el comportamiento de la propiedad min-width:
#contenedor {
min-width: 300px;
width: expression(document.body.clientWidth < 301? "300px": "auto" );
}
En este caso, se utiliza JavaScript para establecer de forma dinmica la anchura del elemento#contenedor. Si la
anchura de la pgina (obtenida mediante document.body.clientWidth) es menor que 301px, se establece su
anchura a 300px. En cualquier otro caso, se deja que el navegador calcule automticamente la anchura necesaria
mediante el valor auto.
de CSS del W3C
matemtica compleja:
#contenedor {
foat: left;
width: calc(100%/3 - 2*1em - 2*1px);
}
Compartir
Twitter
Facebook
Google+
height
max-height
max-width
min-height
min-width
width

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad width
Propiedad width
Defnicin
Establece la anchura de los elementos de bloque

Valores permitidos

medida
porcentaje
auto
inherit
Valor inicial
auto
Se aplica a
de tabla.
Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/visudet.html#propdef-width
Ejemplos de uso
Para los elementos de bloque y las imgenes, la propiedad width permite establecer su anchura directamente
mediante una medida. El siguiente ejemplo establece la anchura a un <div>, de modo que no ocupe todo el sitio
disponible:
div { width: 150px;
}
Aunque ahora el <div> no ocupa toda la anchura disponible, sigue siendo un elemento de bloque, lo que signifca
que si se coloca seguido otro <div> idntico, se mostrarn uno debajo de otro:
div { width: 150px;
}
div { width: 150px;
}
La siguiente imagen tiene un estilo CSS de width: 50px, equivalente a establecer el atributo width de HTML:
La propiedad width no funciona con los elementos en lnea que no son imgenes. En el siguiente ejemplo, a pesar
de que a cada enlace se le asigna una anchura diferente, el navegador los muestra con la misma anchura:
(width: 50px) Lorem ipsum dolor sit amet
Si se utilizan unidades de medida, los valores indicados no pueden ser negativos. Si en vez de una unidad de
medida se indica un porcentaje, la referencia de ese valor es la anchura del elemento que lo contiene.
En el siguiente ejemplo, los dos elementos <div> interiores tienen la misma anchura del 50%, pero como la
anchura de su elemento contenedor es diferente, la anchura real de cada <div> interno tambin es diferente:
div { width:
50%; }
div { width: 50%; }
Si se establece la anchura de un elemento con la unidad de medidaem, el valor indicado toma como referencia el
tamao de letra del propio elemento. En el siguiente ejemplo, los dos <div> tienen el mismo valor en la propiedad
width, pero como su tamao de letra es muy diferente, su anchura en pantalla tambin es muy diferente:
div { width: 20em; font-size: 1em;

}
div { width: 20em; font-size: 2em;

}
El valor auto es el valor por defecto de la anchura de todos los elementos. En este caso, el navegador determina la
anchura de cada elemento teniendo en cuenta, entre otros, el tipo de elemento que se trata (de bloque o en lnea),
el sitio disponible en la pantalla del navegador y los contenidos de los elementos.
Por ltimo, recuerda que el valor de la propiedad width siempre hace referencia a la anchura del contenido de
cada elemento. Si se aaden mrgenes, bordes y rellenos, la anchura total con la que se muestra el elemento ser
mayor que el valor de la propiedad width:
div { width: 350px; }
div { width: 350px; padding: 30px; border:

5px solid #000; }
Compartir
Twitter
Facebook
Google+
height
max-height
max-width
min-height
min-width
width

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad margin-right
Propiedad margin-right
Defnicin
Establece la anchura del margen derecho de los elementos

Valores permitidos

medida
porcentaje
auto
inherit
Valor inicial
0
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-margin-right
Ejemplos de uso
Para cualquier elemento de la pgina, la propiedad margin-right establece la anchura de su margen derecho,
como se muestra en el siguiente ejemplo:
div { margin-right: 50px; }
Como las zonas de los mrgenes son transparentes y muestran el color de fondo que tenga establecido su
elemento contenedor, en el ejemplo anterior no se puede ver claramente el margen derecho a menos que se
muestre otro elemento a su derecha.
Tambin es posible utilizar valores negativos en el margen derecho. En el siguiente ejemplo, el<div> interior tiene
un margen derecho de -20px , lo que en la prctica implica que "se sale" por la parte derecha de su elemento
contenedor:
div { margin-right: -20px; }
Si se utilizan porcentajes, su referencia es la anchura del elemento contenedor. Si no se ha establecido de forma

explcita una anchura, se sustituye por el valor auto.
Al contrario de lo que sucede con los mrgenes verticales, los mrgenes laterales no se fusionan de forma
automtica. En el siguiente ejemplo, el primer <div> defne un margen derecho de 40px, mientras que el segundo
<div> defne un margen izquierdo de 20px. El navegador muestra un margen lateral de 60px entre los dos
elementos:
Compartir
Twitter
Facebook
Google+
margin-right
margin-left
margin-top
margin-bottom
margin
div { margin-left: 20px; }

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad margin-left
Propiedad margin-left
Defnicin
Establece la anchura del margen izquierdo de los elementos

Valores permitidos

medida
porcentaje
auto
inherit
Valor inicial
0
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-margin-left
Ejemplos de uso
Para cualquier elemento de la pgina, la propiedad margin-left establece la anchura de su margen izquierdo,
como se muestra en el siguiente ejemplo:
Tambin es posible utilizar valores negativos en el margen izquierdo. En el siguiente ejemplo, el<div> tiene un
margen izquierdo de -10px , lo que en la prctica implica que el elemento"se sale" por la parte izquierda de su
elemento contenedor:
div { margin-left: -10px; }

Al contrario de lo que sucede con los mrgenes verticales, los mrgenes laterales no se fusionan de forma
automtica. En el siguiente ejemplo, el primer <div> defne un margen derecho de 40px, mientras que el segundo
<div> defne un margen izquierdo de 20px. El navegador muestra un margen lateral de 60px entre los dos
elementos:
Compartir
Twitter
Facebook
Google+
margin-right
margin-left
margin-top
margin-bottom
margin

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad margin-top
Propiedad margin-top
Defnicin
Establece la anchura del margen superior de los elementos de bloque

Valores permitidos

medida
porcentaje
auto
inherit
Valor inicial
0
Se aplica a
Todos los elementos, salvo los elementos en lnea que no sean imgenes
Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-margin-top
Ejemplos de uso
Para los elementos de bloque y las imgenes, la propiedad margin-top establece la anchura de su margen
superior, como se muestra en el siguiente ejemplo:
div { margin-top: 20px; }
Tambin es posible utilizar valores negativos en el margen superior. En el siguiente ejemplo, el<div> tiene un
margen superior de -20px , lo que en la prctica implica que el elemento"se sale" por la parte superior de su
elemento contenedor:
div { margin-top: -20px; }

El aspecto ms importante relacionado con los mrgenes es que CSS fusiona de forma automtica los mrgenes
verticales de los elementos de bloque.
Si en una pgina web dos elementos de bloque contiguos defnen sus propios mrgenes verticales (mediante las
propiedades margin-top y margin-bottom), el navegador los fusiona de forma automtica y muestra un margen
vertical igual al mayor de los dos mrgenes verticales.
En el siguiente ejemplo, el primer <div> defne un margen inferior de 40px, mientras que el segundo <div> defne
un margen superior de 20px. Como se trata de dos mrgenes verticales contiguos, el navegador los fusiona y se
queda con el ms grande (en este caso, los 40px):
div { margin-bottom: 40px; }
La fusin automtica de mrgenes verticales no se realiza en los elementos posicionados mediante la propiedad
foat y en los elementos posicionados de forma absoluta (position: absolute).
Compartir
Twitter
Facebook
Google+
margin-right
margin-left
margin-top
margin-bottom
margin

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad margin-bottom
Propiedad margin-bottom
Defnicin
Establece la anchura del margen inferior de los elementos de bloque

Valores permitidos

medida
porcentaje
auto
inherit
Valor inicial
0
Se aplica a
Todos los elementos, salvo los elementos en lnea que no sean imgenes
Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-margin-bottom
Ejemplos de uso
Para los elementos de bloque y las imgenes, la propiedad margin-bottom establece la anchura de su margen
inferior, como se muestra en el siguiente ejemplo:
Tambin es posible utilizar valores negativos en el margen inferior. En el siguiente ejemplo, el<div> tiene un margen
inferior de -20px , lo que en la prctica implica que el elemento"se sale" por la parte inferior de su elemento
contenedor:
div { margin-bottom: -20px; }

El aspecto ms importante relacionado con los mrgenes es que CSS fusiona de forma automtica los mrgenes
verticales de los elementos de bloque.
Si en una pgina web dos elementos de bloque contiguos defnen sus propios mrgenes verticales (mediante las
propiedades margin-top y margin-bottom), el navegador los fusiona de forma automtica y muestra un margen
vertical igual al mayor de los dos mrgenes verticales.
En el siguiente ejemplo, el primer <div> defne un margen inferior de 40px, mientras que el segundo <div> defne
un margen superior de 20px. Como se trata de dos mrgenes verticales contiguos, el navegador los fusiona y se
queda con el ms grande (en este caso, los 40px):
La fusin automtica de mrgenes verticales no se realiza en los elementos posicionados mediante la propiedad
foat y en los elementos posicionados de forma absoluta (position: absolute).
Compartir
Twitter
Facebook
Google+
margin-right
margin-left
margin-top
margin-bottom
margin

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad margin
Propiedad margin
Defnicin
Establece la anchura de algunos o todos los mrgenes de los elementos

Valores permitidos
Uno, dos, tres o cuatro de los siguientes valores:

medida
porcentaje
auto
inherit
Valor inicial
Cada margen defne su propio valor por defecto

Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-margin
Ejemplos de uso
La propiedad margin es una de las "propiedades shorthand" que defne CSS y que se utilizan para establecer de
forma abreviada el valor de una o ms propiedades individuales.
Si se quiere establecer el mismo valor para todos los mrgenes de un elemento, se podra utilizar la siguiente regla
CSS:
div {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
Utilizando la propiedad margin, es posible establecer de forma abreviada el mismo valor a todos los mrgenes de
un elemento:
div {
margin: 10px;
}
La propiedad margin es tan poderosa que permite establecer uno, dos, tres o los cuatro mrgenes de forma
simultnea.
Si se indican dos valores, el primero hace referencia a los mrgenes verticales y el segundo es el valor de los
mrgenes horizontales, de modo que las siguientes reglas CSS son equivalentes:
div {
margin: 10px 20px;
}
div {
margin-top: 10px;
margin-right: 20px;
margin-left: 20px;
}
Si se indican tres valores, el primero hace referencia al margen superior, el segundo es el valor de los mrgenes
horizontales y el tercero es el margen inferior, de modo que las siguientes reglas CSS son equivalentes:
div {
margin: 10px 20px 30px;
}
div {
margin-top: 10px;
margin-right: 20px;
margin-left: 20px;
}
Por ltimo, si se indican cuatro valores, el primero es el margen superior, el segundo es el margen derecho, el
tercero es el margen inferior y el cuarto es el margen izquierdo, de modo que las siguientes reglas CSS son
equivalentes:
div {
margin: 10px 20px 30px 40px;
}
div {
margin-top: 10px;
margin-right: 20px;
margin-left: 40px;
}
El uso de propiedades como margin no slo hace ms breve el cdigo CSS, sino que demuestra que se tienen
conocimientos avanzados de CSS.
Compartir
Twitter
Facebook
Google+
margin-right
margin-left
margin-top
margin-bottom
margin

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad paddingtop
Propiedad padding-top
Defnicin
Establece la anchura de la zona de relleno superior de los elementos

Valores permitidos

medida
porcentaje
inherit
Valor inicial
0
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-padding-top
Ejemplos de uso
La propiedad padding-top establece la anchura de la zona de relleno superior de un elemento, como se muestra
en el siguiente ejemplo:
div { padding-top: 50px; }
Al contrario de lo que sucede con los mrgenes, no es posible utilizar valores negativos para las zonas de relleno.
Si se utilizan porcentajes, su referencia es la anchura del elemento contenedor.
En el siguiente ejemplo, el elemento <div> contenedor tiene establecida una anchura de 250px, mientras que el
<div> interior tiene un relleno superior igual a 20%, lo que en la prctica se traduce en50px (el 20% de 250px):
div { padding-top: 20%; }
Compartir
Twitter
Facebook
Google+
padding-top
padding-right
padding-bottom
padding-left
padding

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad paddingright
Propiedad padding-right
Defnicin
Establece la anchura de la zona de relleno derecho de los elementos

Valores permitidos

medida
porcentaje
inherit
Valor inicial
0
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-padding-right
Ejemplos de uso
La propiedad padding-right establece la anchura de la zona de relleno derecho de un elemento, como se
muestra en el siguiente ejemplo:

div { padding-right: 50px; }
<div> interior tiene un relleno derecho igual a 20%, lo que en la prctica se traduce en50px (el 20% de 250px):

div { padding-right: 20%;
}
Compartir
Twitter
Facebook
Google+
padding-top
padding-right
padding-bottom
padding-left
padding

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad paddingbottom
Propiedad padding-bottom
Defnicin
Establece la anchura de la zona de relleno inferior de los elementos

Valores permitidos

medida
porcentaje
inherit
Valor inicial
0
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-padding-bottom
Ejemplos de uso
La propiedad padding-bottom establece la anchura de la zona de relleno inferior de un elemento, como se

div { padding-bottom: 50px; }
<div> interior tiene un relleno inferior igual a 20%, lo que en la prctica se traduce a50px (el 20% de 250px):

div { padding-bottom: 20%; }
Compartir
Twitter
Facebook
Google+
padding-top
padding-right
padding-bottom
padding-left
padding

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad paddingleft
Propiedad padding-left
Defnicin
Establece la anchura de la zona de relleno izquierdo de los elementos

Valores permitidos

medida
porcentaje
inherit
Valor inicial
0
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-padding-left
Ejemplos de uso
La propiedad padding-left establece la anchura de la zona de relleno izquierdo de un elemento, como se

div { padding-left: 50px; }
<div> interior tiene un relleno izquierdo igual a 20%, lo que en la prctica se traduce a50px (el 20% de 250px):

div { padding-left: 20%; }
Compartir
Twitter
Facebook
Google+
padding-top
padding-right
padding-bottom
padding-left
padding

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad padding
Propiedad padding
Defnicin
Establece la anchura de algunas o todas las zonas de relleno de los elementos

Valores permitidos

medida
porcentaje
inherit
Valor inicial
Cada zona de relleno defne su propio valor por defecto

Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-padding
Ejemplos de uso
La propiedad padding es una de las "propiedades shorthand" que defne CSS y que se utilizan para establecer de
forma abreviada el valor de una o ms propiedades individuales.

Si se quiere establecer el mismo valor para todas las zonas de relleno de un elemento, se podra utilizar la siguiente
regla CSS:
div {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
Utilizando la propiedad padding, es posible establecer de forma abreviada el mismo valor a todas las zonas de
relleno de un elemento:
div {
padding: 10px;
}
La propiedad padding es tan poderosa que permite establecer una, dos, tres o las cuatro zonas de relleno de
forma simultnea.
Si se indican dos valores, el primero hace referencia a los rellenos verticales y el segundo es el valor de los rellenos
horizontales, de modo que las siguientes reglas CSS son equivalentes:
div {
padding: 10px 20px;
}
div {
padding-top: 10px;
padding-left: 20px;
}
Si se indican tres valores, el primero hace referencia al relleno superior, el segundo es el valor de los rellenos
horizontales y el tercero es el relleno inferior, de modo que las siguientes reglas CSS son equivalentes:
div {
padding: 10px 20px 30px;
}
div {
padding-top: 10px;
padding-left: 20px;
}
Por ltimo, si se indican cuatro valores, el primero es el relleno superior, el segundo es el relleno derecho, el
tercero es el relleno inferior y el cuarto es el relleno izquierdo, de modo que las siguientes reglas CSS son
equivalentes:
div {
padding: 10px 20px 30px 40px;
}
div {
padding-top: 10px;
padding-left: 40px;
}
El uso de propiedades como padding no slo hace ms breve el cdigo CSS, sino que demuestra que se tienen
conocimientos avanzados de CSS.
Compartir
Twitter
Facebook
Google+
padding-top
padding-right
padding-bottom
padding-left
padding

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad bordercolor
Propiedad border-color
Defnicin
Establece el color de algunos o todos los bordes de los elementos

Valores permitidos

color
transparent
inherit
Valor inicial
Cada borde defne su propio valor por defecto

Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-border-color
Ejemplos de uso
La propiedad border-color es una de las "propiedades shorthand" que defne CSS y que se utilizan para
establecer de forma abreviada el valor de una o ms propiedades individuales.
Si se quiere establecer el mismo valor para el color de todos los bordes de un elemento, se podra utilizar la
siguiente regla CSS:
div {
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: red;
}
En este caso, es mejor utilizar la propiedad border-color para establecer de forma abreviada el mismo color a
todos los bordes del elemento:
div {
border-color: red;
}
La propiedad border-color es tan poderosa que permite establecer el color de uno, dos, tres o los cuatro bordes
de forma simultnea.
Si se indican dos valores, el primero hace referencia a los bordes superior e inferior y el segundo es el valor de los
bordes izquierdo y derecho, de modo que las siguientes reglas CSS son equivalentes:
div {
border-color: red blue;
}
div {
border-right-color: blue;
border-bottom-color: red;
border-left-color: blue;
}
Si se indican tres valores, el primero hace referencia al borde superior, el segundo es el valor de los bordes
izquierdo y derecho y el tercero es el borde inferior, de modo que las siguientes reglas CSS son equivalentes:
div {
border-color: red blue green;
}
div {
border-bottom-color: green;
border-left-color: blue;
}
Por ltimo, si se indican cuatro valores, el primero es el borde superior, el segundo es el borde derecho, el tercero
es el borde inferior y el cuarto es el borde izquierdo, de modo que las siguientes reglas CSS son equivalentes:
div {
border-color: red blue green white;
}
div {
border-bottom-color: green;
border-left-color: white;
}
Para establecer el color de cada borde, se puede utilizar cualquiera de lasdiferentes formas de indicar un color en
CSS:
div { border-color: red #080; }
div { border-color: #C00 #F00 #600; }
div { border-color: rgb(255, 0, 0) blue

#080; }
Adems de utilizar colores normales, tambin es posible establecer alguno o todos los bordes de color
transparente. Un borde transparente es muy diferente a no tener borde, ya que el borde transparente no se ve
pero s que ocupa sitio.
En el siguiente ejemplo, la primera caja tiene establecido un borde transparente que, gracias a JavaScript, cambia
de color cuando se pasa el ratn por encima de la caja. Como el borde transparente no se ve pero s que ocupa
sitio, al mostrar el nuevo borde la caja no se mueve, ya que el navegador haba reservado el sitio necesario para el
borde transparente.
Sin embargo, la segunda caja no tiene establecido ningn borde y al pasar el ratn por encima suyo, gracias a
JavaScript, se muestra un borde. En este caso, como antes no exista un borde y ahora s, el navegador desplaza
la caja ya que debe hacer sitio para mostrar el borde.
div { border-color: transparent; }
div { border: none; }
El uso de propiedades como border-color no slo hace ms breve el cdigo CSS, sino que demuestra que se
tienen conocimientos avanzados de CSS.
Compartir
Twitter
Facebook
Google+
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad borderstyle
Propiedad border-style
Defnicin
Establece el estilo de algunos o todos los bordes de los elementos

Valores permitidos

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
Valor inicial

Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-border-style
Ejemplos de uso
La propiedad border-style permite establecer el estilo de algunos o todos los bordes de un elemento. El
estndar CSS 2 slo permite utilizar los tipos de borde predefnidos, por lo que no se pueden hacer bordes
curvados ni utilizar imgenes para crear bordes avanzados.
El signifcado de cada uno de los estilos de borde se explica en la siguiente tabla:
Valor
Descripcin
none
No se muestra ningn borde. Como se trata del valor por defecto de cada uno de los bordes, ningn
elemento muestra un borde a menos que se establezca de forma explcita
Visualmente es idntico a none, ya que provoca que no se muestre ningn borde. Su nica diferencia
hidden
es la forma en la que el navegador resuelve los confictos entre bordes adyacentes de las celdas de
las tablas
dotted
Borde punteado, formado por una serie de puntos separados por espacios
dashed
Borde discontinuo, formado por una serie de pequeos trazos intercalados por espacios
solid
Borde continuo, formado por una lnea recta continua
double
Borde doble, formado por dos lneas rectas continuas separadas entre s por un espacio en blanco
groove
Borde hundido, que visualmente parece que se encuentra por debajo del nivel de la superfcie de la
pantalla
ridge
Borde saliente, que visualmente parece que se encuentra por encima del nivel de la superfcie de la
pantalla
inset
Borde hundido, que provoca que el elemento que encierra parezca que se encuentra por debajo del
nivel de la superfcie de la pantalla
outset
Borde saliente, que provoca que el elemento que encierra parezca que se encuentra por encima del
Adems, la propiedad border-style es una de las "propiedades shorthand" que defne CSS y que se utilizan para
Si se quiere establecer el mismo valor para el estilo de todos los bordes de un elemento, se podra utilizar la
div {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
En este caso, es mejor utilizar la propiedad border-style para establecer de forma abreviada el mismo estilo a
div {
border-style: solid;
}
La propiedad border-style es tan poderosa que permite establecer el estilo de uno, dos, tres o los cuatro bordes
de forma simultnea.
div {
border-style: solid double;
}
div {
border-right-style: double;
border-left-style: double;
}
div {
border-style: solid double dashed;
}
div {
border-bottom-style: dashed;
border-left-style: double;
}
div {
border-style: solid double dashed dotted;
}
div {
border-bottom-style: dashed;
border-left-style: dotted;
}
Por otra parte, la especifcacin ofcial defne los diferentes estilos de borde que se pueden aplicar, pero no detalla
el aspecto que deben tener. De esta forma, existen diferencias notables en el aspecto con el que los navegadores
muestran cada estilo de borde.
En el siguiente ejemplo se muestran todos los estilos de borde con una anchura de1px y con una anchura de
4px. Prueba a ver esta pgina en diferentes navegadores y podrs apreciar diferencias importantes sobre todo en
los estilos groove y ridge:

div { border-style: none; border-width:
1px; }
div { border-style: none; border-width:

4px; }
div { border-style: hidden; border-width:

1px; }
div { border-style: hidden; border-width:

4px; }
div { border-style: dotted; border-width:

1px; }
div { border-style: dashed; border-width:
1px; }
div { border-style: solid; border-width:
1px; }
div { border-style: double; border-width:
1px; }
div { border-style: groove; border-width:
1px; }
div { border-style: ridge; border-width:
1px; }
div { border-style: inset; border-width:
1px; }
div { border-style: outset; border-width:
1px; }
div { border-style: dotted; border-width:

4px; }
div { border-style: dashed; border-width:
4px; }
div { border-style: solid; border-width:
4px; }
div { border-style: double; border-width:
4px; }
div { border-style: groove; border-width:
4px; }
div { border-style: ridge; border-width:
4px; }
div { border-style: inset; border-width:
4px; }
div { border-style: outset; border-width:
4px; }
Utilizando la propiedad border-style se pueden mostrar fcilmente bordes complejos en cualquier elemento:
div { border-style: solid double; }
div { border-style: dashed dotted; }
div { border-style: dashed double dotted; }
El uso de propiedades como border-style no slo hace ms breve el cdigo CSS, sino que demuestra que se
Compartir
Twitter
Facebook
Google+
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad bordertop
Propiedad border-top
Defnicin
Establece algunas o todas las propiedades del borde superior de los elementos
Valores permitidos
Alguno o todos los siguientes valores y en cualquier orden:

anchura
Estilo de borde
color
Valor inicial
Cada propiedad defne su propio valor por defecto

Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-border-top
Ejemplos de uso
La propiedad border-top es una de las "propiedades shorthand" que defne CSS y que se utilizan para establecer
de forma abreviada el valor de una o ms propiedades individuales.
Como se trata de una de las propiedades ms fexibles de CSS, su defnicin parece complicada, sobre todo en lo
que se refere a los valores permitidos "alguno o todos los siguientes valores y en cualquier orden").
El uso ms habitual de border-top es el de establecer simultneamente el grosor, estilo y color del borde superior
de un elemento:
div { border-top: 1px solid #C00; }
div { border-top: medium double #369; }
Aunque suele ser comn utilizar el orden "grosor, estilo y color", la propiedad border-top permite indicar las
propiedades en cualquier orden:
div { border-top: 1px solid #C00; }
div { border-top: solid 1px #C00; }
div { border-top: #C00 1px solid; }
div { border-top: #C00 solid 1px; }
La propiedad border-top no requiere que se indiquen las tres propiedades que defnen el estilo del borde
superior. Si no se indica alguna propiedad, su valor se obtiene mediante el valor por defecto de esa propiedad.
En el siguiente ejemplo slo se indica el estilo del borde, por lo que el navegador asigna automticamente el valor
medium a su grosor y el valor black a su color:
div { border-top: solid; }
En el siguiente ejemplo se omite el grosor del borde, por lo que el navegador le asigna automticamente el valor
medium:
div { border-top: solid blue; }
No obstante, como el valor por defecto del estilo de un borde esnone, si no se indica explcitamente el estilo del
borde, el resultado es que el navegador no muestra ese borde:
div { border-top: 2px blue; }
El grosor del borde se puede establecer de cualquiera de las diferentes formas de indicar una medida en CSS. El
color tambin se puede establecer de alguna de las diferentes formas de indicar un color en CSS. Por ltimo, el
estilo del borde slo puede ser alguno de los valores que se incluyen en la siguiente tabla:
Valor
Descripcin
none
hidden
las tablas
dotted
dashed
solid
double
groove
pantalla
ridge
pantalla
inset
outset
Puedes ver ejemplos del aspecto de todos los estilos de borde en la defnicin de la propiedadborder-style.
La propiedad border-top es mucho ms utilizada que border-top-width, border-top-color y border-topstyle, ya que permite defnir el aspecto del borde superior de un elemento de forma fcil y concisa.
Compartir
Twitter
Facebook
Google+
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad borderright
Propiedad border-right
Defnicin
Establece algunas o todas las propiedades del borde derecho de los elementos
Valores permitidos

anchura
Estilo de borde
color
Valor inicial

Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-border-right
Ejemplos de uso
La propiedad border-right es una de las "propiedades shorthand" que defne CSS y que se utilizan para
El uso ms habitual de border-right es el de establecer simultneamente el grosor, estilo y color del borde
derecho de un elemento:
div { border-right: 1px solid #C00; }
div { border-right: medium double #369; }
Aunque suele ser comn utilizar el orden "grosor, estilo y color", la propiedad border-right permite indicar las
div { border-right: 1px solid #C00; }
div { border-right: solid 1px #C00; }
div { border-right: #C00 1px solid; }
div { border-right: #C00 solid 1px; }
La propiedad border-right no requiere que se indiquen las tres propiedades que defnen el estilo del borde
derecho. Si no se indica alguna propiedad, su valor se obtiene mediante el valor por defecto de esa propiedad.
div { border-right: solid; }
medium:
div { border-right: solid blue; }
div { border-right: 2px blue; }
Valor
Descripcin
none
hidden
las tablas
dotted
dashed
solid
double
groove
pantalla
ridge
pantalla
inset
outset
La propiedad border-right es mucho ms utilizada que border-right-width, border-right-color y borderright-style, ya que permite defnir el aspecto del borde derecho de un elemento de forma fcil y concisa.
Compartir
Twitter
Facebook
Google+
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad borderbottom
Propiedad border-bottom
Defnicin
Establece algunas o todas las propiedades del borde inferior de los elementos
Valores permitidos

anchura
Estilo de borde
color
Valor inicial

Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-border-bottom
Ejemplos de uso
La propiedad border-bottom es una de las "propiedades shorthand" que defne CSS y que se utilizan para
El uso ms habitual de border-bottom es el de establecer simultneamente el grosor, estilo y color del borde
inferior de un elemento:
div { border-bottom: 1px solid #C00; }
div { border-bottom: medium double #369; }
Aunque suele ser comn utilizar el orden "grosor, estilo y color", la propiedad border-bottom permite indicar las
div { border-bottom: 1px solid #C00; }
div { border-bottom: solid 1px #C00; }
div { border-bottom: #C00 1px solid; }
div { border-bottom: #C00 solid 1px; }
La propiedad border-bottom no requiere que se indiquen las tres propiedades que defnen el estilo del borde
inferior. Si no se indica alguna propiedad, su valor se obtiene mediante el valor por defecto de esa propiedad.
div { border-bottom: solid; }
medium:
div { border-bottom: solid blue; }
div { border-bottom: 2px blue; }
Valor
Descripcin
none
hidden
las tablas
dotted
dashed
solid
double
groove
pantalla
ridge
pantalla
inset
outset
La propiedad border-bottom es mucho ms utilizada que border-bottom-width, border-bottom-color y
border-bottom-style, ya que permite defnir el aspecto del borde inferior de un elemento de forma fcil y concisa.
Compartir
Twitter
Facebook
Google+
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad borderleft
Propiedad border-left
Defnicin
Establece algunas o todas las propiedades del borde izquierdo de los elementos
Valores permitidos

anchura
Estilo de borde
color
Valor inicial

Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-border-left
Ejemplos de uso
La propiedad border-left es una de las "propiedades shorthand" que defne CSS y que se utilizan para
El uso ms habitual de border-left es el de establecer simultneamente el grosor, estilo y color del borde
izquierdo de un elemento:
div { border-left: 1px solid #C00; }
div { border-left: medium double #369; }
Aunque suele ser comn utilizar el orden "grosor, estilo y color", la propiedad border-left permite indicar las
div { border-left: 1px solid #C00; }
div { border-left: solid 1px #C00; }
div { border-left: #C00 1px solid; }
div { border-left: #C00 solid 1px; }
La propiedad border-left no requiere que se indiquen las tres propiedades que defnen el estilo del borde
izquierdo. Si no se indica alguna propiedad, su valor se obtiene mediante el valor por defecto de esa propiedad.
div { border-left: solid; }
medium:
div { border-left: solid blue; }
div { border-left: 2px blue; }
Valor
Descripcin
none
hidden
las tablas
dotted
dashed
solid
double
groove
pantalla
ridge
pantalla
inset
outset
La propiedad border-left es mucho ms utilizada que border-left-width, border-left-color y border-leftstyle, ya que permite defnir el aspecto del borde izquierdo de un elemento de forma fcil y concisa.
Compartir
Twitter
Facebook
Google+
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad border-topcolor
Propiedad border-top-color
Defnicin
Establece el color del borde superior de los elementos

Valores permitidos

color
transparent
inherit
Valor inicial
Color negro
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-border-top-color
Ejemplos de uso
En primer lugar, la propiedad border-top-color permite establecer el color del borde superior de un elemento
mediante cualquiera de las diferentes formas de indicar un color en CSS:
div { border-top-color: red; }
div { border-top-color: #F00; }
div { border-top-color: rgb(255, 0, 0); }
Adems de utilizar colores normales, tambin es posible establecer el borde de color transparente. Un borde
transparente es muy diferente a no tener borde, ya que el borde transparente no se ve pero s que ocupa sitio.
En el siguiente ejemplo, la primera caja tiene establecido un borde superior transparente que, gracias a JavaScript,
cambia de color cuando se pasa el ratn por encima de la caja. Como el borde transparente no se ve pero s que
ocupa sitio, al mostrar el nuevo borde la caja no se mueve, ya que el navegador haba reservado el sitio necesario
para el borde transparente.
Sin embargo, la segunda caja no tiene establecido ningn borde superior y al pasar el ratn por encima suyo,
gracias a JavaScript, se muestra un borde. En este caso, como antes no exista un borde y ahora s, el navegador
desplaza la caja ya que debe hacer sitio para mostrar el borde.
div { border-top-color: transparent; }
div { border-top: none; }
Compartir
Twitter
Facebook
Google+
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad border-rightcolor
Propiedad border-right-color
Defnicin
Establece el color del borde derecho de los elementos

Valores permitidos

color
transparent
inherit
Valor inicial
Color negro
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-border-right-color
Ejemplos de uso
En primer lugar, la propiedad border-right-color permite establecer el color del borde derecho de un elemento
div { border-right-color: red; }
div { border-right-color: #F00; }
div { border-right-color: rgb(255, 0, 0); }
En el siguiente ejemplo, la primera caja tiene establecido un borde derecho transparente que, gracias a JavaScript,
Sin embargo, la segunda caja no tiene establecido ningn borde derecho y al pasar el ratn por encima suyo,
div { border-right-color: transparent; }
div { border-right: none; }
En el ejemplo anterior, las dos cajas parecen comportarse igual. El motivo es que a la derecha de las cajas no hay
ningn otro elemento, por lo que no se puede apreciar el desplazamiento que se produce al pasar el ratn por
encima de la segunda caja.
Compartir
Twitter
Facebook
Google+
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad border-bottomcolor
Propiedad border-bottom-color
Defnicin
Establece el color del borde inferior de los elementos

Valores permitidos

color
transparent
inherit
Valor inicial
Color negro
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-border-bottom-color
Ejemplos de uso
En primer lugar, la propiedad border-bottom-color permite establecer el color del borde inferior de un elemento
div { border-bottom-color: red; }
div { border-bottom-color: #F00; }
div { border-bottom-color: rgb(255, 0, 0);

}
En el siguiente ejemplo, la primera caja tiene establecido un borde inferior transparente que, gracias a JavaScript,
Sin embargo, la segunda caja no tiene establecido ningn borde inferior y al pasar el ratn por encima suyo, gracias
a JavaScript, se muestra un borde. En este caso, como antes no exista un borde y ahora s, el navegador
desplaza los contenidos que se encuentran debajo de la caja ya que debe hacer sitio para mostrar el borde.
div { border-bottom-color: transparent; }
div { border-bottom: none; }
Compartir
Twitter
Facebook
Google+
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad border-leftcolor
Propiedad border-left-color
Defnicin
Establece el color del borde izquierdo de los elementos

Valores permitidos

color
transparent
inherit
Valor inicial
Color negro
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-border-left-color
Ejemplos de uso
En primer lugar, la propiedad border-left-color permite establecer el color del borde izquierdo de un elemento
div { border-left-color: red; }
div { border-left-color: #F00; }
div { border-left-color: rgb(255, 0, 0); }
En el siguiente ejemplo, la primera caja tiene establecido un borde izquierdo transparente que, gracias a JavaScript,
Sin embargo, la segunda caja no tiene establecido ningn borde izquierdo y al pasar el ratn por encima suyo,
div { border-left-color: transparent; }
div { border-left: none; }
Compartir
Twitter
Facebook
Google+
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad border-topstyle
Propiedad border-top-style
Defnicin
Establece el estilo del borde superior de los elementos

Valores permitidos

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
Valor inicial
none
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-border-top-style
Ejemplos de uso
La propiedad border-top-style permite establecer el estilo del borde superior de un elemento. El estndar CSS 2
slo permite utilizar los tipos de borde predefnidos, por lo que no se pueden hacer bordes curvados ni utilizar
imgenes para crear bordes avanzados.
Valor
Descripcin
none
No se muestra ningn borde. Como se trata del valor por defecto de esta propiedad, ningn elemento
muestra un borde superior a menos que se establezca de forma explcita
hidden
las tablas
dotted
dashed
solid
double
groove
pantalla
ridge
pantalla
inset
outset
La especifcacin ofcial defne los diferentes estilos que se pueden aplicar, pero no detalla el aspecto que deben
tener. De esta forma, existen diferencias notables en el aspecto con el que los navegadores muestran cada estilo
de borde.

div { border-top-style: none; border-topwidth: 1px; }
div { border-top-style: none; border-topwidth: 4px; }
div { border-top-style: hidden; border-top-
div { border-top-style: hidden; border-top-
width: 1px; }
width: 4px; }
div { border-top-style: dotted; border-topwidth: 1px; }
div { border-top-style: dotted; border-topwidth: 4px; }
div { border-top-style: dashed; border-topwidth: 1px; }
div { border-top-style: dashed; border-topwidth: 4px; }
div { border-top-style: solid; border-topwidth: 1px; }
div { border-top-style: solid; border-topwidth: 4px; }
div { border-top-style: double; border-topwidth: 1px; }
div { border-top-style: double; border-topwidth: 4px; }
div { border-top-style: groove; border-topwidth: 1px; }
div { border-top-style: groove; border-topwidth: 4px; }
div { border-top-style: ridge; border-topwidth: 1px; }
div { border-top-style: ridge; border-topwidth: 4px; }
div { border-top-style: inset; border-topwidth: 1px; }
div { border-top-style: inset; border-topwidth: 4px; }
div { border-top-style: outset; border-topwidth: 1px; }
div { border-top-style: outset; border-topwidth: 4px; }
En el ejemplo anterior, como slo se establece uno de los cuatro bordes, no es posible comprobar el efecto
tridimensional de los estilos ms avanzados. El siguiente ejemplo muestra los cuatro bordes de los elementos con
los estilos groove, ridge, inset y outset:
div { border: 1px groove; }
div { border: 1px ridge; }
div { border: 1px inset; }
div { border: 1px outset; }
Para ver todos los estilos aplicados en los cuatro bordes de un elemento, puedes consultar la documentacin de la
propiedad border-style.
Compartir
Twitter
Facebook
Google+
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad border-rightstyle
Propiedad border-right-style
Defnicin
Establece el estilo del borde derecho de los elementos

Valores permitidos

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
Valor inicial
none
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-border-right-style
Ejemplos de uso
La propiedad border-right-style permite establecer el estilo del borde derecho de un elemento. El estndar
CSS 2 slo permite utilizar los tipos de borde predefnidos, por lo que no se pueden hacer bordes curvados ni
utilizar imgenes para crear bordes avanzados.
Valor
Descripcin
none
muestra un borde derecho a menos que se establezca de forma explcita
hidden
las tablas
dotted
dashed
solid
double
groove
pantalla
ridge
pantalla
inset
outset
de borde.

div { border-right-style: none; borderright-width: 1px; }
div { border-right-style: none; borderright-width: 4px; }
div { border-right-style: hidden; border-
div { border-right-style: hidden; border-
right-width: 1px; }
right-width: 4px; }
div { border-right-style: dotted; borderright-width: 1px; }
div { border-right-style: dotted; borderright-width: 4px; }
div { border-right-style: dashed; borderright-width: 1px; }
div { border-right-style: dashed; borderright-width: 4px; }
div { border-right-style: solid; borderright-width: 1px; }
div { border-right-style: solid; borderright-width: 4px; }
div { border-right-style: double; borderright-width: 1px; }
div { border-right-style: double; borderright-width: 4px; }
div { border-right-style: groove; borderright-width: 1px; }
div { border-right-style: groove; borderright-width: 4px; }
div { border-right-style: ridge; borderright-width: 1px; }
div { border-right-style: ridge; borderright-width: 4px; }
div { border-right-style: inset; borderright-width: 1px; }
div { border-right-style: inset; borderright-width: 4px; }
div { border-right-style: outset; borderright-width: 1px; }
div { border-right-style: outset; borderright-width: 4px; }
Compartir
Twitter
Facebook
Google+
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad border-bottomstyle
Propiedad border-bottom-style
Defnicin
Establece el estilo del borde inferior de los elementos

Valores permitidos

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
Valor inicial
none
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-border-bottom-style
Ejemplos de uso
La propiedad border-bottom-style permite establecer el estilo del borde inferior de un elemento. El estndar CSS
2 slo permite utilizar los tipos de borde predefnidos, por lo que no se pueden hacer bordes curvados ni utilizar
Valor
Descripcin
none
muestra un borde inferior a menos que se establezca de forma explcita
hidden
las tablas
dotted
dashed
solid
double
groove
pantalla
ridge
pantalla
inset
outset
de borde.

div { border-bottom-style: none; borderbottom-width: 1px; }
div { border-bottom-style: none; borderbottom-width: 4px; }
div { border-bottom-style: hidden; border-
div { border-bottom-style: hidden; border-
bottom-width: 1px; }
bottom-width: 4px; }
div { border-bottom-style: dotted; borderbottom-width: 1px; }
div { border-bottom-style: dotted; borderbottom-width: 4px; }
div { border-bottom-style: dashed; borderbottom-width: 1px; }
div { border-bottom-style: dashed; borderbottom-width: 4px; }
div { border-bottom-style: solid; borderbottom-width: 1px; }
div { border-bottom-style: solid; borderbottom-width: 4px; }
div { border-bottom-style: double; borderbottom-width: 1px; }
div { border-bottom-style: double; borderbottom-width: 4px; }
div { border-bottom-style: groove; borderbottom-width: 1px; }
div { border-bottom-style: groove; borderbottom-width: 4px; }
div { border-bottom-style: ridge; borderbottom-width: 1px; }
div { border-bottom-style: ridge; borderbottom-width: 4px; }
div { border-bottom-style: inset; borderbottom-width: 1px; }
div { border-bottom-style: inset; borderbottom-width: 4px; }
div { border-bottom-style: outset; borderbottom-width: 1px; }
div { border-bottom-style: outset; borderbottom-width: 4px; }
Compartir
Twitter
Facebook
Google+
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad border-leftstyle
Propiedad border-left-style
Defnicin
Establece el estilo del borde izquierdo de los elementos

Valores permitidos

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
Valor inicial
none
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-border-left-style
Ejemplos de uso
La propiedad border-left-style permite establecer el estilo del borde izquierdo de un elemento. El estndar CSS
2 slo permite utilizar los tipos de borde predefnidos, por lo que no se pueden hacer bordes curvados ni utilizar
Valor
Descripcin
none
muestra un borde izquierdo a menos que se establezca de forma explcita
hidden
las tablas
dotted
dashed
solid
double
groove
pantalla
ridge
pantalla
inset
outset
de borde.

div { border-left-style: none; border-leftwidth: 1px; }
div { border-left-style: none; border-leftwidth: 4px; }
div { border-left-style: hidden; border-
div { border-left-style: hidden; border-
left-width: 1px; }
left-width: 4px; }
div { border-left-style: dotted; borderleft-width: 1px; }
div { border-left-style: dotted; borderleft-width: 4px; }
div { border-left-style: dashed; borderleft-width: 1px; }
div { border-left-style: dashed; borderleft-width: 4px; }
div { border-left-style: solid; borderleft-width: 1px; }
div { border-left-style: solid; borderleft-width: 4px; }
div { border-left-style: double; borderleft-width: 1px; }
div { border-left-style: double; borderleft-width: 4px; }
div { border-left-style: groove; borderleft-width: 1px; }
div { border-left-style: groove; borderleft-width: 4px; }
div { border-left-style: ridge; borderleft-width: 1px; }
div { border-left-style: ridge; borderleft-width: 4px; }
div { border-left-style: inset; borderleft-width: 1px; }
div { border-left-style: inset; borderleft-width: 4px; }
div { border-left-style: outset; borderleft-width: 1px; }
div { border-left-style: outset; borderleft-width: 4px; }
Compartir
Twitter
Facebook
Google+
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad border-topwidth
Propiedad border-top-width
Defnicin
Establece la anchura del borde superior de los elementos

Valores permitidos

thin
medium
thick
medida
inherit
Valor inicial
medium
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-border-top-width
Ejemplos de uso
La propiedad border-top-width permite establecer la anchura del borde superior de un elemento de diferentes
formas. En primer lugar, es posible utilizar las palabras thin, medium y thick para mostrar un borde fno, normal y
grueso respectivamente:
div { border-top-width: thin; }
div { border-top-width: medium; }
div { border-top-width: thick; }
Como la especifcacin ofcial no defne de forma explcita el valor que corresponde athin, medium y thick, cada
navegador los muestra con un grosor diferente. Por este motivo no suelen utilizarse estas palabras especiales, ya
que es imposible disear con ellas una pgina que muestre el mismo aspecto en diferentes navegadores.
Normalmente, el grosor de los bordes se establece mediante una medida. La unidad de medida que ms se utiliza
es el pxel, ya que permite un control ms preciso sobre el grosor del borde:
div { border-top-width: 3px; }
Si se utiliza em como unidad de medida, su referencia es el tamao de letra del propio elemento. En el siguiente
ejemplo, el grosor del borde superior de los dos elementos es 0.3em. Sin embargo, como el tamao de letra del
segundo <div> es mayor, su borde superior es ms grueso:
div { border-top-width: 0.3em; font-size: 1em; }
div { border-top-width:
0.3em; font-size: 2em; }
Para eliminar el borde superior de un elemento, se puede utilizar la propiedadborder-top-width asignndole un
grosor igual a 0:
div { border-top-width: 0; }
Compartir
Twitter
Facebook
Google+
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad border-rightwidth
Propiedad border-right-width
Defnicin
Establece la anchura del borde derecho de los elementos

Valores permitidos

thin
medium
thick
medida
inherit
Valor inicial
medium
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-border-right-width
Ejemplos de uso
La propiedad border-right-width permite establecer la anchura del borde derecho de un elemento de diferentes
div { border-right-width: thin; }
div { border-right-width: medium; }
div { border-right-width: thick; }
navegador los muestra de un grosor diferente. Por este motivo no suelen utilizarse estas palabras especiales, ya
div { border-right-width: 3px; }
ejemplo, el grosor del borde derecho de los dos elementos es 0.3em. Sin embargo, como el tamao de letra del
segundo <div> es mayor, su borde derecho es ms grueso:
div { border-right-width: 0.3em; font-size: 1em; }
div { border-right-width:
Para eliminar el borde derecho de un elemento, se puede utilizar la propiedadborder-right-width asignndole un
grosor igual a 0:
div { border-right-width: 0; }
Compartir
Twitter
Facebook
Google+
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad border-bottomwidth
Propiedad border-bottom-width
Defnicin
Establece la anchura del borde inferior de los elementos

Valores permitidos

thin
medium
thick
medida
inherit
Valor inicial
medium
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-border-bottom-width
Ejemplos de uso
La propiedad border-bottom-width permite establecer la anchura del borde inferior de un elemento de diferentes
div { border-bottom-width: thin; }
div { border-bottom-width: medium; }
div { border-bottom-width: thick; }
div { border-bottom-width: 3px; }
ejemplo, el grosor del borde inferior de los dos elementos es 0.3em. Sin embargo, como el tamao de letra del
segundo <div> es mayor, su borde inferior es ms grueso:
div { border-bottom-width: 0.3em; font-size: 1em; }
div { border-bottomwidth: 0.3em; font-size:

2em; }
Para eliminar el borde inferior de un elemento, se puede utilizar la propiedadborder-bottom-width asignndole un
grosor igual a 0:
div { border-bottom-width: 0; }
Compartir
Twitter
Facebook
Google+
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad border-leftwidth
Propiedad border-left-width
Defnicin
Establece la anchura del borde izquierdo de los elementos

Valores permitidos

thin
medium
thick
medida
inherit
Valor inicial
medium
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-border-left-width
Ejemplos de uso
La propiedad border-left-width permite establecer la anchura del borde izquierdo de un elemento de diferentes
div { border-left-width: thin; }
div { border-left-width: medium; }
div { border-left-width: thick; }
div { border-left-width: 3px; }
ejemplo, el grosor del borde izquierdo de los dos elementos es 0.3em. Sin embargo, como el tamao de letra del
segundo <div> es mayor, su borde izquierdo es ms grueso:
div { border-left-width: 0.3em; font-size: 1em; }
div { border-left-width:
Para eliminar el borde izquierdo de un elemento, se puede utilizar la propiedadborder-left-width asignndole un
grosor igual a 0:
div { border-left-width: 0; }
Compartir
Twitter
Facebook
Google+
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad borderwidth
Propiedad border-width
Defnicin
Establece la anchura de algunos o todos los bordes de los elementos

Valores permitidos

thin
medium
thick
medida
inherit
Valor inicial

Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-border-width
Ejemplos de uso
La propiedad border-width es una de las "propiedades shorthand" que defne CSS y que se utilizan para
Si se quiere establecer el mismo valor para el grosor de todos los bordes de un elemento, se podra utilizar la
div {
border-top-width: 3px;
border-right-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
}
En este caso, es mejor utilizar la propiedad border-width para establecer de forma abreviada el mismo grosor a
div {
border-width: 3px;
}
La propiedad border-width es tan poderosa que permite establecer el grosor de uno, dos, tres o los cuatro
bordes de forma simultnea.
div {
border-width: 3px 5px;
}
div {
}
div {
border-width: 3px 5px 2px;
}
div {
}
div {
border-width: 3px 5px 2px 4px;
}
div {
}
Utilizando la propiedad border-width se pueden mostrar fcilmente bordes complejos en cualquier elemento:
div { border-width: 1px 2px 2px 1px; }
div { border-width: 2px 0; }
div { border-width: 0 0 1px 1px; }
El uso de propiedades como border-width no slo hace ms breve el cdigo CSS, sino que demuestra que se
Compartir
Twitter
Facebook
Google+
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad border
Propiedad border
Defnicin
Establece algunas o todas las propiedades de todos los bordes de los elementos
Valores permitidos

anchura
Estilo de borde
color
Valor inicial

Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/box.html#propdef-border
Ejemplos de uso
La propiedad border es una de las "propiedades shorthand" que defne CSS y que se utilizan para establecer de
forma abreviada el valor de una o ms propiedades individuales. En este caso, se trata de una de las propiedades
shorthand ms completas, ya que permite establecer hasta 12 propiedades de forma simultnea.

La propiedad border se utiliza para establecer el mismo grosor, estilo y/o anchura de todos los bordes de un
elemento. Al contrario que las propiedades margin y padding, con la propiedad border no es posible indicar
diferentes valores para cada uno de los cuatro bordes.
El uso ms habitual de border es el de establecer simultneamente el grosor, estilo y color del borde de un
elemento:
div { border: 1px solid #C00; }
div { border: medium double #369; }
En el siguiente ejemplo, se muestran tres formas diferentes de establecer el mismo borde a un elemento:
/* Utilizando la propiedad shorthand "border" */
div {
border: 1px solid #C00;
}
/* Utilizando las propiedades shorthand de cada borde */

div {
border-top: 1px solid #C00;
border-right: 1px solid #C00;
border-bottom: 1px solid #C00;
border-left: 1px solid #C00;
}
/* Utilizando las propiedades simples de cada borde */

div {
border-top-color: #C00;
border-right-style: solid;
border-right-color: #C00;
border-bottom-color: #C00;
border-left-style: solid;
border-left-color: #C00;
}
En el mejor de los casos, la propiedad border es equivalente a 12 propiedades simples. Adems, como sucede
con todas las propiedades de tipo shorthand relacionadas con los bordes, el orden en el que se indican los valores
es indiferente:
div { border: 1px solid #C00; }
div { border: solid 1px #C00; }
div { border: #C00 1px solid; }
div { border: #C00 solid 1px; }
La propiedad border no requiere que se indiquen las tres propiedades que defnen el estilo de los bordes. Si no se
indica alguna propiedad, su valor se obtiene mediante el valor por defecto de esa propiedad.
div { border: solid; }
medium:
div { border: solid blue; }
div { border: 2px blue; }
Valor
Descripcin
none

hidden
las tablas
dotted
dashed
solid
double
groove
pantalla
ridge
pantalla
inset
outset
La propiedad border es mucho ms utilizada que las propiedades individuales de cada borde, ya que permite
defnir el aspecto del borde de un elemento de forma fcil y concisa.
El nico inconveniente de esta propiedad es que asigna los mismos valores a los cuatro bordes de un elemento,
por lo que parece que si uno de ellos no es idntico a los dems, no se puede utilizar la propiedad border. No
obstante, aprovechando el comportamiento de CSS, tambin se puede utilizar la propiedad border cuando alguno
de los bordes es diferente.
En el siguiente ejemplo, tres de los bordes son idnticos (1px solid blue) pero el elemento no debe mostrar un
borde inferior. La forma ms rpida de conseguirlo es utilizar dos de las propiedades shorthand de los bordes:
div { border: 1px solid blue; borderbottom: none; }
De la misma forma, es posible asignar el mismo aspecto a los cuatro bordes y despus utilizar alguna propiedad
simple para cambiar algn grosor, estilo o color de algn borde:
div { border: 1px solid blue; borderbottom-color: red; }

div { border: 3px red; border-style: solid
double; }
div { border: double; border-color: red
blue green black; }
Compartir
Twitter
Facebook
Google+
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad outline-color
Propiedad outline-color
Defnicin
Establece el color del perfl de los elementos

Valores permitidos

color
:invert
inherit
Valor inicial
:invert
Se aplica a
Todos los elementos

Vlida en
medios visuales, medios interactivos

Se hereda
no
w3.org/TR/CSS21/ui.html#propdef-outline-color
Ejemplos de uso
La propiedad outline-color establece el color del perfl de un elemento. Al igual que sucede con la propiedad
border-color, el uso ms sencillo de esta propiedad es el de indicar directamente el color mediante cualquiera de
las diferentes formas de indicar un color en CSS:

div { outline-color: #080; }
div { outline-color: blue; }
div { outline-color: rgb(255, 0, 0); }
Adems de utilizar colores normales, tambin es posible utilizar un valor especial llamadoinvert. El valor invert no
equivale a ningn color concreto, sino que indica al navegador que debe utilizar el color que mayor contraste tenga
con el color de fondo de la pgina.
En el siguiente ejemplo, las dos cajas interiores tienen el mismo valorinvert en la propiedad outline-color. Sin
embargo, como las cajas que las encierran tienen colores de fondo muy diferentes, el color real de cada perfl es
completamente diferente:
div { outline-color: invert;

}
div { outline-color: invert;

}
Si visualizas esta pgina con un navegador que soporte correctamente la propiedadoutline-color, el ejemplo
anterior se muestra como la siguiente imagen:
Compartir
Twitter
Facebook
Google+
outline-color
outline-style
outline-width
outline

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad outline-style
Propiedad outline-style
Defnicin
Establece el estilo del perfl de los elementos

Valores permitidos

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
Valor inicial
none
Se aplica a
Todos los elementos

Vlida en

Se hereda
no
w3.org/TR/CSS21/ui.html#propdef-outline-style
Ejemplos de uso
La propiedad outline-style establece el estilo del perfl de los elementos. Al contrario de lo que sucede con la
propiedad border-style, no se pueden establecer diferentes estilos para cada uno de los cuatro lados. De hecho,
el perfl de un elemento es nico, ya que no existe el concepto de perfl superior o perfl derecho.
Los estilos defnidos para los perfles son exactamente los mismos que los defnidos para los bordes. La nica
excepcin es el valor hidden, que es vlido para los bordes pero no para los perfles. Adems, el estndar CSS 2
tampoco permite utilizar estilos diferentes de los predefnidos, por lo que no se pueden hacer perfles curvados ni
se pueden utilizar imgenes para crear perfles avanzados.
El signifcado de cada uno de los estilos de perfl se explica en la siguiente tabla:
Valor
Descripcin
none
No se muestra ningn perfl. Como se trata del valor por defecto, ningn elemento muestra un perfl a
menos que se establezca de forma explcita
dotted
Perfl punteado, formado por una serie de puntos separados por espacios
dashed
Perfl discontinuo, formado por una serie de pequeos trazos intercalados por espacios
solid
Perfl continuo, formado por una lnea recta continua
double
Perfl doble, formado por dos lneas rectas continuas separadas entre s por un espacio en blanco
groove
Perfl hundido, que visualmente parece que se encuentra por debajo del nivel de la superfcie de la
pantalla
ridge
Perfl saliente, que visualmente parece que se encuentra por encima del nivel de la superfcie de la
pantalla
inset
Perfl hundido, que provoca que el elemento que encierra parezca que se encuentra por debajo del
outset
Perfl saliente, que provoca que el elemento que encierra parezca que se encuentra por encima del
El estndar ofcial defne los diferentes estilos de perfl que se pueden aplicar, pero no detalla el aspecto que deben
de perfl.
En el siguiente ejemplo se muestran todos los estilos de perfl con una anchura de1px y con una anchura de 4px.
Prueba a ver esta pgina en diferentes navegadores y podrs apreciar diferencias importantes sobre todo en los
estilos groove y ridge:
div { outline-style: none; outline-width:
1px; }
div { outline-style: none; outline-width:

4px; }
div { outline-style: dotted; outline-width:

1px; }
div { outline-style: dotted; outline-width:

4px; }
div { outline-style: dashed; outline-width:

1px; }
div { outline-style: dashed; outline-width:

4px; }
div { outline-style: solid; outline-width:

1px; }
div { outline-style: solid; outline-width:

4px; }
div { outline-style: double; outline-width:

1px; }
div { outline-style: double; outline-width:

4px; }
div { outline-style: groove; outline-width:

1px; }
div { outline-style: groove; outline-width:

4px; }
div { outline-style: ridge; outline-width:

1px; }
div { outline-style: ridge; outline-width:

4px; }
div { outline-style: inset; outline-width:

1px; }
div { outline-style: inset; outline-width:

4px; }
div { outline-style: outset; outline-width:

1px; }
div { outline-style: outset; outline-width:

4px; }
En el ejemplo anterior, como los elementos estan muy juntos, se produce un solapamiento de los perfles gruesos
de 4px de anchura. Cuando se utilizan perfles es fcil que se produzcan solapamientos, ya que siempre se dibujan
en un plano superior y no afectan ni a la anchura ni al posicionamiento de los elementos. Aunque se produzcan
solapamientos, los elementos no se desplazan ni se descolocan.
Compartir
Twitter
Facebook
Google+
outline-color
outline-style
outline-width
outline
Novedades
Condiciones
Privacidad
2.969 das online
/ Referencia de CSS
Inicio 2.1
/ Propiedad outline-width
Propiedad outline-width
Defnicin
Establece la anchura del perfl de los elementos

Valores permitidos

thin
medium
thick
medida
inherit
Valor inicial
medium
Se aplica a
Todos los elementos

Vlida en

Se hereda
no
w3.org/TR/CSS21/ui.html#propdef-outline-width
Ejemplos de uso
La propiedad outline-width establece el grosor del perfl de los elementos. Al contrario de lo que sucede con la
propiedad border-width, no se pueden establecer diferentes grosores para cada uno de los cuatro lados. De
hecho, el perfl de un elemento es nico, ya que no existe el concepto de perfl superior o perfl derecho.
La principal diferencia entre outline-width y border-width es que los perfles no ocupan sitio, mientras que los
bordes aumentan la anchura total del elemento. Los navegadores dibujan los perfles en un plano superior, por lo
que aadir un perfl a un elemento no aumenta su anchura ni infuye sobre el resto de elementos de la pgina.
Por este motivo, si se defnen perfles muy gruesos o perfles en elementos muy cercanos, se pueden producir
solapamientos entre perfles. Como los perfles se dibujan en otro plano, los posibles solapamientos no descolocan
ni desplazan a ningn elemento.
La propiedad outline-width permite establecer la anchura del perfl de un elemento de diferentes formas. En
primer lugar, es posible utilizar las palabras thin, medium y thick para mostrar un perfl fno, normal y grueso
respectivamente:
div { outline-width: thin; }
div { outline-width: medium; }
div { outline-width: thick; }
Como se observa en el ejemplo anterior, el perfl de los elementos siempre se dibuja por fuera de su borde.
Adems, como la especifcacin ofcial no defne de forma explcita el valor que corresponde a thin, medium y
thick, cada navegador muestra los perfles con un grosor diferente. Por este motivo no suelen utilizarse estas
palabras especiales, ya que es imposible disear con ellas una pgina que muestre el mismo aspecto en
diferentes navegadores.
Normalmente, el grosor de los perfles se establece mediante una medida. La unidad de medida que ms se utiliza
es el pxel, ya que permite un control ms preciso sobre el grosor del perfl:
div { outline-width: 3px; }
ejemplo, el grosor del perfl de los dos elementos es 0.3em. Sin embargo, como el tamao de letra del segundo
<div> es mayor, su perfl es ms grueso:
div { outline-width: 0.3em; font-size: 1em; }
div { outline-width:
En el ejemplo anterior, como los elementos estan muy juntos y los perfles son muy gruesos, se produce un
solapamiento. Sin embargo, este solapamiento slo es visual y no infuye en el posicionamiento de ningn
elemento.
Para eliminar el perfl de un elemento, se puede utilizar la propiedadoutline-width con un grosor igual a 0:
div { outline-width: 0; }
Esta ltima propiedad se puede utilizar para cambiar el estilo por defecto del navegador. Si pulsas repetidamente la
tecla del tabulador en una pgina web, el navegador va seleccionando de forma secuencial todos los elementos
pinchables o seleccionables: enlaces, botones, controles de formulario, etc.
Para indicar el elemento que est seleccionado, el navegador muestra un perfl muy fno de1px de ancho, de estilo
punteado y del color que ms contrasta con el color de fondo de la pgina. En la mayora de las pginas web, el
perfl que se muestra por defecto es outline: 1px dotted #000 .
Los navegadores ms avanzados incluyen una pseudo-clase llamada :focus que permite establecer el estilo de
los elementos seleccionados. Utilizando la propiedad outline-width junto con :focus se puede eliminar este
perfl:
<style type="text/css">
:focus { outline-width: 0; }
</style>
Si pruebas a pulsar repetidamente la tecla Tabulador en esta pgina, vers como el navegador no muestra ningn
perfl indicando el elemento que est seleccionado en cada momento.
Compartir
Twitter
Facebook
Google+
outline-color
outline-style
outline-width
outline

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad outline
Propiedad outline
Defnicin
Establece algunas o todas las propiedades de todos los perfles de los elementos
Valores permitidos

Color de perfl
Estilo de perfl
Anchura de perfl
Valor inicial

Se aplica a
Todos los elementos

Vlida en

Se hereda
no
w3.org/TR/CSS21/ui.html#propdef-outline
Ejemplos de uso
La propiedad outline es una de las "propiedades shorthand" que defne CSS y que se utilizan para establecer de
forma abreviada el valor de una o ms propiedades individuales. En este caso, se utiliza para establecer el mismo
grosor, estilo y/o anchura de todos los perfles de un elemento.

Aunque es cierto que guarda muchas similitudes con la propiedadborder, en realidad se diferencian en algunos
aspectos muy importantes:
1. Los perfles no ocupan espacio, mientras que los bordes normales s.
2. Los perfles pueden tener formas no rectangulares.
Desde el punto de vista del diseo, la primera caracterstica es la ms importante. Los perfles uoutline siempre se
dibujan "por encima del elemento", por lo que no modifcan la posicin o el tamao total de los elementos.
En el siguiente ejemplo se muestran dos cajas; la primera muestra un borde muy grueso y la segunda muestra un
perfl de la misma anchura:
div { border: 5px solid #369; }
div { outline: 5px solid #369; }
El perfl de la segunda caja se dibuja justo por el exterior de su borde. Aunque visualmente no lo parece, el perfl y
el borde no se encuentran en el mismo plano. De esta forma, el perfl no se tiene en cuenta para calcular la
anchura total de un elemento y no infuye en el resto de elementos cercanos.
La segunda caracterstica importante de los perfles pueden tener formas no rectangulares. En el siguiente ejemplo
se muestra un texto muy largo encerrado en una caja muy estrecha, lo que provoca que el texto se muestre en
varias lneas:
span { border:
2px solid #369;
} Ejemplo de
texto largo que
ocupa varias
lneas
span { outline:
2px solid #369;
} Ejemplo de
texto largo que
ocupa varias
lneas
El primer texto se encierra con un borde que produce un resultado esttico poco afortunado. Cada lnea muestra
un borde superior e inferior, aunque slo la primera y ltima lneas cierran el borde lateralmente.
Mientras tanto, el segundo texto se encierra con un perfl. Como indica su nombre, la propiedadoutline perfla los
contenidos del elemento y los encierra con una forma no rectangular. No obstante, si visualizas esta misma pgina
en diferentes navegadores, vers que todos los navegadores dibujan el perfl de forma diferente, al contrario de lo
que sucede con el borde.
Por este motivo, al contrario que los bordes, no existe el concepto deperfl izquierdo o perfl superior. El perfl de un
elemento es nico y sus propiedades son idnticas para cada uno de los cuatro lados.
Como sucede con muchas propiedades de tipo shorthand, el orden en el que se indican los valores de la
propiedad outline es indiferente:
div { outline: 1px solid #C00; }
div { outline: solid 1px #C00; }
div { outline: #C00 1px solid; }
div { outline: #C00 solid 1px; }
La propiedad outline no requiere que se indiquen las tres propiedades que defnen el estilo de los perfles. Si no
se indica alguna propiedad, su valor se obtiene mediante el valor por defecto de esa propiedad.
En el siguiente ejemplo slo se indica el estilo del perfl, por lo que el navegador asigna automticamente el valor
medium a su grosor y el color se escoge para que tenga el mximo contraste con el fondo de la pgina:
div { outline: solid; }
En el siguiente ejemplo se omite el grosor del perfl, por lo que el navegador le asigna automticamente el valor
medium:
div { outline: solid blue; }
No obstante, como el valor por defecto del estilo de un perfl esnone, si no se indica explcitamente el estilo del
perfl, el resultado es que el navegador no muestra ese perfl:
div { outline: 2px blue; }
El grosor del perfl se puede establecer de cualquiera de lasdiferentes formas de indicar una medida en CSS tal y
como se explica en la propiedad outline-width. El color tambin se puede establecer de alguna de lasdiferentes
formas de indicar un color en CSS, con la particularidad del valor invert que se explica en la documentacin de la
propiedad outline-color. Por ltimo, el estilo del perfl se establece con cualquiera de los valores explicados en la
documentacin de la propiedad outline-style y que coinciden con los valores de la propiedad border-style.
Aunque la propiedad outline es infnitamente menos utilizada que la propiedad border, la has visto muchas ms
veces de las que crees. Si pulsas repetidamente la tecla del tabulador en una pgina web, el navegador va
seleccionando de forma secuencial todos los elementos pinchables o seleccionables: enlaces, botones, controles
de formulario, etc.
Para indicar el elemento que est seleccionado, el navegador muestra un perfl muy fno de1px de ancho, de estilo
punteado y del color que ms contrasta con el color de fondo de la pgina. En la mayora de las pginas web, el
perfl que se muestra por defecto es outline: 1px dotted #000 .
Los navegadores ms avanzados incluyen una pseudo-clase llamada :focus que permite establecer el estilo de
los elementos seleccionados. Utilizando la propiedad outline junto con :focus se puede modifcar el estilo por
defecto del navegador:
<style type="text/css">
:focus { outline: 2px solid red; }
</style>
Si pruebas a pulsar repetidamente la tecla Tabulador en esta pgina, vers como el navegador selecciona
secuencialmente los enlaces de la pgina y como muestra un perfl continuo de color rojo para indicar el elemento
que est seleccionado en cada momento.
De hecho, segn el estndar ofcial, ese es el propsito para el que se crearon los perfles: indicar de forma clara el
elemento (botn, enlace, otros controles de formulario) que est seleccionado en cada momento.
Compartir
Twitter
Facebook
Google+
outline-color
outline-style
outline-width
outline
Novedades
Condiciones
Privacidad
2.969 das online
/ Referencia de CSS
Inicio 2.1
/ Propiedad backgroundattachment
Propiedad background-attachment
Defnicin
Controla si la imagen de fondo se mueve o permanece fja cuando se hace scroll en la ventana del navegador
Valores permitidos

scroll
fxed
inherit
Valor inicial
scroll
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/colors.html#propdef-background-attachment
Ejemplos de uso
La propiedad background-attachment controla si la imagen de fondo establecida en un elemento se mueve o
permanece fja cuando se hace scroll en la ventana del navegador.
Por defecto, las imgenes de fondo se mueven con el elemento en el que se muestran. El siguiente ejemplo
muestra una imagen de fondo que se repite en toda la superfcie del elemento. Si haces scroll en la ventana del
navegador, vers que la imagen de fondo se mueve con el elemento:
Este comportamiento por defecto corresponde al valor scroll de la propiedad background-attachment. Sin
embargo, el valor fxed modifca por completo este comportamiento.
En el siguiente ejemplo, la imagen de fondo permanece fja cuando se hacescroll en la ventana del navegador.
Prueba a subir y bajar los contenidos de la ventana del navegador y vers las diferencias visuales tan evidentes
respecto del ejemplo anterior:
div {
background-image: url("images/imagen_pequena.png");
background-attachment: fxed;
}
El mecanismo de las imgenes de fondo fjas es bastante limitado, ya que cada pgina slo dispone de un nivel de
scroll para mostrar las imgenes fjas. En otras palabras, si se utilizan propiedades comooverfow para aadir
barras de scroll en un elemento, su imagen de fondo fja no se comporta de la manera esperada al hacerscroll
sobre el propio elemento:
div {
overfow: scroll;
}
Compartir
Twitter
Facebook
Google+
background-color
background-image
background-position
background-repeat
background

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad backgroundcolor
Propiedad background-color
Defnicin
Establece el color de fondo de un elemento

Valores permitidos

color
transparent
inherit
Valor inicial
transparent
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/colors.html#propdef-background-color
Ejemplos de uso
La propiedad background-color se emplea para establecer el color de fondo de un elemento mediante cualquiera
de las diferentes formas de indicar un color en CSS:
div { background-color: #E0ECFF; }
div { background-color: rgb(100%, 88%,

88%); }
div { background-color: rgb(227, 255, 224);
}
El color de fondo se muestra en la zona que ocupan el contenido y elrelleno del elemento, justo hasta su borde.
El valor por defecto de esta propiedad es transparent. Cuando un elemento tiene un fondo de color transparente,
se ven los colores de fondo y/o imgenes que tengan establecidos los elementos en los que se encuentra. Si el
elemento no est encerrado por ningn elemento, se ven los colores de fondo y/o imgenes de la pgina web.
En el siguiente ejemplo, se fuerza a que la caja interior tenga un color de fondo transparente, de modo que se ve el
color de fondo de la caja que la encierra:
div { background-color: #E0ECFF; }
div { background-color:
transparent; }
Las posibilidades de background-color son bastante limitadas, ya que slo permite mostrar colores slidos. Por lo
tanto, no es posible utilizar diferentes niveles de transparencia en el color o crear degradados con varios colores.
Si quieres utilizar efectos avanzados como fondo de un elemento, es necesario utilizar la propiedadbackgroundimage sola o combinada con la propiedadbackground-color.
Compartir
Twitter
Facebook
Google+
background-color
background-image
background-position
background-repeat
background

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad backgroundimage
Propiedad background-image
Defnicin
Establece la imagen de fondo de un elemento

Valores permitidos

URL
none
inherit
Valor inicial
none
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/colors.html#propdef-background-image
Ejemplos de uso
La propiedad background-image se emplea para establecer la imagen de fondo de cada elemento. La imagen se
muestra en la zona que ocupan el contenido y el relleno del elemento, justo hasta su borde.
Para indicar la imagen que se muestra como fondo de un elemento, se utiliza una URL. Los navegadores no
restringen el tipo de URL que se pueden utilizar, por lo que pueden ser URL externas/internas y URL
relativas/absolutas.
La URL de la imagen que se quiere mostrar se incluye dentro de los parntesis de la palabraurl(). De forma
opcional, el valor de la URL se puede encerrar entre comillas simples o entre comillas dobles.
div {
background-image: url(http://www.librosweb.es/website/css/images/logo.gif);
}
h1, h2, h3 {
background-image: url("imagenes/fondo.png");
}
ul li {
background-image: url('../comun/imagenes/icono.gif');
}
Si la imagen de fondo es ms grande que el sitio disponible para mostrarla, el navegador slo muestra la parte
visible que resulta de colocar la esquina superior izquierda de la imagen en la esquina superior izquierda del espacio
que ocupa el elemento:
div { background-image: url("images/imagen.png"); }
Imagen original
Por el contrario, si la imagen es ms pequea que el sitio disponible, el navegador repite la misma imagen en todas
las direcciones hasta cubrir completamente el espacio que ocupa el elemento:
div { background-image: url("images/imagen_pequena.png"); }
Imagen original
Sobre un mismo elemento se puede establecer de forma simultnea una imagen de fondo y uncolor de fondo.
Este comportamiento es habitual en algunos elementos, como por ejemplo el fondo de la propia pgina web.
Si un mismo elemento tiene defnida una imagen y un color de fondo, la imagen tiene prioridad. El color de fondo se
muestra en las zonas transparentes de la imagen y en las zonas que no estn cubiertas por la imagen.
Se recomienda establecer un color de fondo siempre que se utilice una imagen de fondo. Como las imgenes se
indican mediante URL y el navegador las tiene que descargar, es posible que se produzcan errores y la descarga
de la imagen no se pueda realizar.
Por lo tanto, si se establece un color de fondo junto con la imagen de fondo y se produce un error que impide
mostrar la imagen, el navegador mostrar el color de fondo establecido. Por este motivo, el color de fondo debe
ser similar a la imagen utilizada.
El estndar CSS no permite modifcar el tamao con el que se muestra la imagen de fondo. Sin embargo, es
posible modifcar opciones como si la imagen se repite o no (background-repeat), si la imagen permanece fja o no
(background-attachment) y modifcar su posicin por defecto (background-position).
Por ltimo, no se pueden establecer dos o ms imgenes diferentes sobre un mismo elemento. Si se quieren
mostrar dos imgenes diferentes como fondo de una pgina web, se puede establecer la primera imagen sobre el
selector html y la segunda imagen sobre el selector body:
html {
background-image: url("imagenes/primera_imagen.png");
}
body {
background-image: url("imagenes/segunda_imagen.png");
}
Para que este ltimo ejemplo sea realmente til, es imprescindible utilizar al menos la propiedadbackgroundrepeat.
Compartir
Twitter
Facebook
Google+
background-color
background-image
background-position
background-repeat
background

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad backgroundposition
Propiedad background-position
Defnicin
Controla la posicin de las imgenes de fondo

Valores permitidos
La explicacin de los valores permitidos para esta propiedad es muy compleja debido a su gran fexibilidad.
Existen tres opciones diferentes para establecer el valor o valores de esta propiedad:
1. Uno y slo uno de los siguientes valores:
porcentaje
medida
center
right
left
Seguido opcionalmente por uno y slo uno de los siguientes valores:

porcentaje
medida
center
bottom
top

left
center
right
Seguido o precedido opcionalmente por uno y slo uno de los siguientes valores:
top
center
bottom
inherit
Si se utilizan porcentajes, hace referencia a la anchura del propio elemento
Valor inicial
0% 0%
Se aplica a
Todos los elementos
3.
Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/colors.html#propdef-background-position
Ejemplos de uso
La propiedad background-position controla la posicin en la que se muestra la imagen de fondo de un elemento.
Por defecto, las imgenes de fondo que no se repiten se muestran en la esquina superior izquierda del elemento.
Si la imagen de fondo se repite horizontalmente, se muestra en la parte superior del elemento y si se repite
verticalmente, se muestra en la parte izquierda del elemento.
La explicacin de los valores que se pueden asignar a la propiedadbackground-position es compleja porque es
una propiedad muy fexible. De hecho, se pueden asignar uno o dos valores elegidos entre porcentajes, medidas y
las palabras clave top, right, bottom, left y center.
Si slo se indica un valor en la propiedad background-position , se considera que el segundo valor escenter,
que equivale al porcentaje 50%.
Si se indican dos valores en la propiedadbackground-position y uno de ellos no es una palabra clave (es decir,
si al menos uno de ellos es una medida o un porcentaje) el primer valor se considera la posicin horizontal y el
segundo valor es la posicin vertical.
En primer lugar, se puede utilizar cualquiera de las diferentes formas de indicar una medida en CSS para indicar la
distancia que se desplaza la esquina superior izquierda de la imagen de fondo respecto de la esquina superior
izquierda del elemento. El siguiente ejemplo muestra una misma imagen de fondo desplazada con diferentes
unidades de medida:
div {
background-repeat: no-repeat;
background-position: 10px 30px;
}

div {
background-position: 2em 1.5cm;
}
El desplazamiento de las imgenes de fondo tambin se aplica a las imgenes que se repiten:
div {
background-repeat: repeat;
background-position: 10px 30px;
}
div {
background-repeat: repeat-x;
}
Si se utilizan medidas, sus valores pueden ser negativos, de forma que la imagen de fondo se desplaza en la
direccin contraria:
div {
background-position: -10px -30px;
}
div {
background-position: -2em -1.5cm;
}
Si slo se indica una medida, el navegador asigna el valorcenter al segundo valor, por lo que la imagen de fondo
se centra verticalmente de forma automtica:
div {
background-position: 10px;
}
div {
background-position: -2em;
}
La propiedad background-position tambin permite el uso de porcentajes para establecer la posicin de la

imagen de fondo. Cuando se indican dos porcentajes (x% y%) se considera que el punto x% - y% de la imagen de
fondo se debe colocar en el punto x% - y% del elemento. Los siguientes ejemplos muestran este comportamiento
de forma prctica:
div {
background-position: 0% 0%;
}
div {
}
En el primer ejemplo, el punto 0% 0% de la imagen de fondo (es decir, su esquina superior izquierda) se coloca en
el punto 0% 0% del elemento (tambin su esquina superior izquierda). El segundo ejemplo, el punto100% 100% de la
imagen de fondo (es decir, su esquina inferior derecha) se coloca en el punto 100% 100% del elemento (tambin su
esquina inferior derecha).
div {
}
div {
}
En el primer ejemplo, el punto 33% 66% de la imagen de fondo (es decir, el punto que est a un tercio de su
anchura desde la parte izquierda y a dos tercios de su altura desde la parte superior) se coloca en el punto 33%
66% del elemento (un tercio de su anchura desde la parte izquierda y dos tercios de su altura desde la parte
superior). El segundo ejemplo, el punto 50% 50% de la imagen de fondo (es decir, justo su centro) se coloca en el
punto 50% 50% del elemento (tambin justo su centro).
Como sucede con las medidas, se pueden utilizar porcentajes negativos que mueven la imagen de fondo en la
direccin contraria. Si se indica slo un porcentaje, el navegador asigna el valor center al segundo valor, por lo
que la imagen de fondo se centra verticalmente de forma automtica:
div {
background-position: 33%;
}
div {
background-position: -30% -20%;
}
Adems de las medidas y los porcentajes, CSS defne varias palabras clave que se corresponden con algunas de
las posiciones ms utilizadas:
Palabra
clave
Valor equivalente
top
0% en la posicin vertical
right
100% en la posicin horizontal
bottom
100% en la posicin vertical
left
0% en la posicin horizontal
center
50% en la posicin horizontal si no se ha establecido la posicin horizontal de otra forma. En otro
caso, 50% en la posicin vertical
left es equivalente a left top). A

Si se utilizan dos palabras clave, se pueden asignar en cualquier orden top
(
continuacin se muestran algunas imgenes de fondo posicionadas mediante las palabras clave:
div {
background-position: bottom right;
}

div {
background-position: center left;
}
El uso de las palabras clave permite simplifcar los valores asignados a la propiedadbackground-position :
background-position:
top;
center;
left;
bottom;
right;
/*
/*
/*
/*
/*
Equivalente
Equivalente
Equivalente
Equivalente
Equivalente
a
a
a
a
a
50% 0%
50% 50%
0% 50%
50% 100%
100% 50%
*/
*/
*/
*/
*/
Debido a la gran fexiblidad de background-position es posible obtener el mismo efecto utilizando valores muy
diferentes. Las siguientes propiedades, por ejemplo, son equivalentes:
center;
center center;
50%;
50% 50%;
center 50%;
50% center;
Si la imagen de fondo permanece fja mediante la propiedad background-attachment, la referencia que se toma
para posicionar la imagen de fondo es la ventana del navegador y no el elemento sobre el que se muestra la
imagen.
En el siguiente ejemplo, una imagen de fondo fja se posiciona entop left, que es la esquina superior izquierda
de la ventana del navegador. El resultado es que la imagen de fondo no se visualiza en el interior del elemento:
div {
background-position: top left;
}
Compartir
Twitter
Facebook
Google+
background-color
background-image
background-position
background-repeat
background

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad backgroundrepeat
Propiedad background-repeat
Defnicin
Controla el tipo de repeticin de las imgenes de fondo

Valores permitidos

repeat
repeat-x
repeat-y
no-repeat
inherit
Valor inicial
repeat
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/colors.html#propdef-background-repeat
Ejemplos de uso
La propiedad background-repeat controla la forma en la que se repiten las imgenes de fondo de los elementos.
Por defecto, si la imagen de fondo que se establece con la propiedad background-image es ms pequea que el
sitio disponible, el navegador repite la imagen en todas las direcciones hasta cubrir completamente la superfcie del
elemento:
div { background-image: url("images/imagen_pequena.png"); }
Imagen original
Utilizando la propiedad background-repeat es posible controlar si la imagen de fondo se repite o no y la forma en

la que se repite. El valor repeat coincide con el comportamiento por defecto del navegador y repite la imagen en
todas las direcciones.
El valor no-repeat muestra la imagen de fondo sin realizar ninguna repeticin:
div {
}
Cuando la imagen no se repite, por defecto se muestra en la esquina superior izquierda del elemento. CSS permite
modifcar la posicin de la imagen de fondo mediante la propiedad background-position.
Por otra parte, los valores repeat-x y repeat-y permiten repetir la imagen de fondo slo en una direccin
(horizontal o vertical). El valor repeat-x repite la imagen de forma horizontal:
div {
}
La imagen de fondo repetida horizontalmente se muestra por defecto en la parte superior del elemento. Utilizando la
propiedad background-position es posible desplazarla a otra posicin:
div {
}
De forma similar, el valor repeat-y se emplea para repetir la imagen de fondo verticalmente:
div {
background-repeat: repeat-y;
}
La imagen de fondo repetida verticalmente se muestra por defecto en la parte izquierda del elemento. Utilizando la
propiedad background-position es posible desplazarla a otra posicin:
div {
background-repeat: repeat-y;
}
Compartir
Twitter
Facebook
Google+
background-color
background-image
background-position
background-repeat
background

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad background
Propiedad background
Defnicin
Establece algunas o todas las propiedades del color y/o imagen de fondo de un elemento
Valores permitidos

background-color
background-image
background-repeat
background-position
inherit
Si se utilizan porcentajes, hace referencia a la anchura del propio elemento (slo se pueden utilizar en la
propiedad background-position)
Valor inicial

Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/colors.html#propdef-background
Ejemplos de uso
La propiedad background es una de las "propiedades shorthand" que defne CSS y que se utilizan para establecer
de forma abreviada el valor de una o ms propiedades individuales. En concreto, background permite establecer
simultneamente las cinco propiedades relacionadas con el color e imagen de fondo de cada elemento.
Gracias a la propiedad background se puede establecer de forma directa el color de fondo b( ackground-color), la
imagen de fondo (background-image), su posicin (background-position), si la imagen es fja o no b
( ackgroundattachment) y/o si la imagen se repite o no b
( ackground-repeat). Puedes consultar la documentacin de cada
propiedad individual para acceder a sus ejemplos de uso.
En ocasiones, la propiedad background se utiliza simplemente para establecer el color de fondo de un elemento,
ya que es ms corto de escribir que la propiedad background-color. De esta forma, las dos reglas CSS
siguientes producen el mismo efecto:
div {
background-color: #CCC;
}
div {
background: #CCC;
}
El uso habitual de la propiedad background es el de mostrar una imagen de fondo en un elemento y

simultneamente establecer las propiedades de esa imagen (si se repite o no, su posicin y si es fja o no). Las
dos reglas CSS siguientes son equivalentes, pero la segunda es mucho ms compacta:
div {
}
div {
background: url("images/imagen_pequena.png") no-repeat 2em 1.5cm fxed;
}
Como es habitual en las "propiedades shorthand", se puede establecer uno, varios o todos los valores permitidos:
div {
background: url("images/imagen_pequena.png") no-repeat;
}
div {
background: url("images/imagen_pequena.png") no-repeat fxed;
}
div {
background: url("images/imagen_pequena.png") 10px 20px no-repeat;

}
div {
background: url("images/imagen_pequena.png") top repeat-y scroll;
}
Como el orden de cada propiedad individual dentro de background es indiferente, todas las declaraciones CSS
siguientes son correctas y equivalentes:
background:
background:
background:
background:
background:
background:
background:
background:
url("images/imagen_pequena.png") no-repeat 2em 1.5cm fxed;

fxed url("images/imagen_pequena.png") no-repeat 2em 1.5cm;
no-repeat fxed url("images/imagen_pequena.png") 2em 1.5cm;
2em 1.5cm url("images/imagen_pequena.png") no-repeat fxed;
no-repeat 2em 1.5cm fxed url("images/imagen_pequena.png");
2em 1.5cm url("images/imagen_pequena.png") fxed no-repeat;
no-repeat url("images/imagen_pequena.png") 2em 1.5cm fxed;
fxed 2em 1.5cm url("images/imagen_pequena.png") no-repeat;
Cuando se establece un color de fondo y una imagen de fondo a un mismo elemento, la imagen tiene prioridad.
Por ello, el color slo se ve en las zonas transparentes de la imagen y en las zonas del elemento que no estn
cubiertas por la imagen de fondo.
No obstante, es una buena prctica establecer un color de fondo siempre que se establezca una imagen de
fondo. El motivo es que cuando los navegadores se descargan las imgenes de fondo, se pueden producir
errores que impidan obtener la imagen.
As, si se ha establecido un color de fondo similar a la imagen de fondo que no se puede mostrar, el usuario
apenas notar la diferencia y el diseo de la pgina no sufrir demasiado el error producido. Cuando la imagen de
fondo es muy compleja y no se puede escoger un color similar, se recomienda establecer un color de fondo
adecuado para leer el texto que pueda contener el elemento.
Compartir
Twitter
Facebook
Google+
background-color
background-image
background-position
background-repeat
background

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad color
Propiedad color
Defnicin
Establece el color del texto de un elemento

Valores permitidos

color
inherit
Valor inicial
Depende de cada navegador, pero normalmente es el color negro

Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/colors.html#propdef-color
Ejemplos de uso
La propiedad color establece el color con el que se muestra el texto contenido en un elemento. El color de la letra
no puede ser transparente, ya que se debe indicar explcitamente un color mediante cualquiera de las diferentes
formas de indicar un color en CSS:
div { color: blue; } Lorem ipsum dolor sit amet,

consectetuer adipiscing elit. Praesent tempor enim
id metus.
div { color: #C00; } Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Praesent tempor enim
id metus.
El valor de esta propiedad se hereda de padres a hijos. De esta forma, si se establece el color de la letra de un
prrafo, todas sus etiquetas interiores muestran el mismo color, salvo que se indique explcitamente lo contrario:
<p style="color: #369;">Lorem ipsum dolor sit amet, consectetuer <em>adipiscing elit</em>. Praesent tempor
enim id metus. <span>Vivamus augue</span>. Nam risus. Morbi auctor. Phasellus dapibus <strong>urna sed
ligula</strong>. Nam vehicula, <ins>diam sed viverra</ins> vestibulum, ipsum metus molestie dolor, id mattis
<del>arcu dui eu nulla</del>. Praesent hendrerit faucibus ligula.</p>
En el ejemplo anterior, el elemento <p> tiene en su interior cinco elementos diferentes <( em>, <span>, <strong>,
<ins> y <del>). Aunque slo se ha establecido la propiedad color en el elemento padre (<p>) todos los elementos
interiores muestran el mismo color de letra porque lo heredan directamente de su padre.

Si algn elemento interno no debe heredar el color de letra de su padre, se debe establecer de forma explcita la
propiedad color para ese elemento:
enim id metus. <span>Vivamus augue</span>. Nam risus. Morbi auctor. Phasellus dapibus <strong style="color:
#936;">urna sed ligula</strong>. Nam vehicula, <ins>diam sed viverra</ins> vestibulum, ipsum metus molestie
dolor, id mattis <del>arcu dui eu nulla</del> . Praesent hendrerit faucibus ligula.</p>
Aunque la propiedad color se hereda, existe una excepcin importante relacionada con los enlaces. Por defecto,
los enlaces no muestran el mismo color de letra que su elemento padre:
enim id metus. <a>Vivamus augue</a>. Nam risus. Morbi auctor. Phasellus dapibus <strong">urna sed
ligula</strong>. Nam vehicula, <ins>diam sed viverra</ins> vestibulum, ipsum metus molestie dolor, id mattis
<del>arcu dui eu nulla</del>. Praesent hendrerit faucibus ligula.</p>
En el ejemplo anterior, el enlace que se encuentra en el interior del prrafo no se muestra del mismo color verde
que el resto de elementos del prrafo. El motivo es que los enlaces no heredan el valor de la propiedad color. Por
lo tanto, los enlaces siempre se ven del color establecido en la pgina (rojo en este caso) o del color azul por
defecto.
Utilizando el valor inherit es posible forzar a que los enlaces hereden su color de letra:
enim id metus. <a style="color: inherit;">Vivamus augue</a>. Nam risus. Morbi auctor. Phasellus dapibus
<strong">urna sed ligula</strong> . Nam vehicula, <ins>diam sed viverra</ins> vestibulum, ipsum metus molestie
dolor, id mattis <del>arcu dui eu nulla</del>. Praesent hendrerit faucibus ligula.</p>
El ejemplo anterior funciona correctamente en todos los navegadores salvo en Internet Explorer 7 y sus versiones
anteriores.
Por otra parte, como el valor de la propiedad color se hereda, es muy fcil establecer el color de letra de todos los
elementos de la pgina. Si se establece la propiedad color en el elemento <body>, todos los elementos de la
pgina heredan su valor salvo que se indique lo contrario.
Por este motivo, una de las reglas CSS que utilizan prcticamente todas las pginas web es la que establece el
color de la letra en el elemento <body>:
body {
color: #CCC;
}
Junto con la regla anterior se suelen aadir algunas otras reglas que establecen colores de letra diferentes en otros
elementos destacados, como los enlaces y los ttulos de seccin:
body {
color: #CCC;
}
h1, h2, h3, h4, h5, h6 {
color: #000;
}
a {
color: #B1251E;
}
Por ltimo, como se trata de una propiedad relacionada con la tipografa y todas esas propiedades comienzan por
font-, algunas veces se confunde la propiedad color con la propiedad font-color, que no existe y por tanto no
tiene ningn efecto sobre el diseo de la pgina.
Compartir
Twitter
Facebook
Google+
color
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad font-family
Propiedad font-family
Defnicin
Establece la fuente o tipo de letra

Valores permitidos

Nombre de la fuente o tipo de letra
Nombre genrico de la fuente o tipo de letra
Seguido opcionalmente por uno o ms de los siguientes valores:
Nombre de la fuente o tipo de letra
Nombre genrico de la fuente o tipo de letra
2. inherit
Valor inicial
Depende del navegador

Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/fonts.html#propdef-font-family
Ejemplos de uso
La propiedad font-family establece la fuente o tipo de letra con la que se muestra el texto. Cuando no se
establece de forma explcita el tipo de letra, los navegadores muestran el texto con un tipo de letra por defecto.
Aunque la fuente por defecto depende de cada navegador, la mayora utilizan Times New Roman o la fuente
disponible que ms se parezca.
La forma ms sencilla de establecer el tipo de letra es indicar el nombre completo de la fuente:
<p style="font-family: Verdana;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim.
Pellentesque id pede vitae pede ultricies gravida. Sed vulputate. Vestibulum quis ipsum. Aenean nec quam. Sed
ultrices tempor massa.</p>
<p style="font-family: Arial;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim. Pellentesque id pede vitae pede
ultricies gravida. Sed vulputate. Vestibulum quis ipsum. Aenean nec quam. Sed ultrices tempor massa.</p>
<p style="font-family: Georgia;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim. Pellentesque id pede vitae
pede ultricies gravida. Sed vulputate. Vestibulum quis ipsum. Aenean nec quam. Sed ultrices tempor massa.</p>
Si el nombre de la fuente incluye espacios en blanco, comas, barras, parntesis y otros caracteres potencialmente
problemticos, el estndar de CSS 2.1 indica que se debe encerrar su nombre entre comillas simples o dobles:
<p style="font-family: 'Trebuchet MS';">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim. Pellentesque id
pede vitae pede ultricies gravida. Sed vulputate. Vestibulum quis ipsum. Aenean nec quam. Sed ultrices tempor massa.</p>
<p style="font-family: 'Lucida Grande';">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim.
Pellentesque id pede vitae pede ultricies gravida. Sed vulputate. Vestibulum quis ipsum. Aenean nec quam. Sed ultrices
tempor massa.</p>
Cuando una pgina web establece que su texto se debe mostrar con un tipo de letra concreto, los navegadores
buscan esa fuente entre la lista de fuentes instaladas en el dispositivo con el que accede el usuario. Por ese
motivo, si se emplean fuentes profesionales o poco conocidas, la mayora de los usuarios normales no la tendrn
instalada. En este caso, los navegadores sustituyen esa fuente por otra fuente genrica.
Afortunadamente, la propiedad font-family permite indicar una serie de fuentes alternativas separadas por
comas. La lista de fuentes tiene prioridad, por lo que los navegadores intentan mostrar el texto con la primera
fuente y si no est disponible, intentan utilizar la segunda fuente y as sucesivamente hasta la ltima fuente indicada:
body {
font-family: Arial, Helvetica, Verdana;
}
p {
font-family: Georgia, Cambria, Times, "Times New Roman";
}
Aunque se pueden indicar tantas fuentes alternativas como se necesiten, nunca es posible asegurar que todos los
usuarios disponen de al menos una de las fuentes alternativas. Por este motivo, CSS tambin permite indicar
nombres genricos de fuentes. Los cinco nombres genricos no hacen referencia a fuentes concretas, sino al
aspecto con el que se muestra el texto.

A continuacin se muestran los cinco valores genricos defnidos y la lista de fuentes con un aspecto similar a ese
valor:
Valor genrico
Fuentes con aspecto similar
serif
Times New Roman, Times, Garamond, Georgia,

Cambria
sans-serif
Arial, Helvetica, Verdana, Trebuchet, Tahoma, Futura
cursive
Comic Sans
fantasy
Comic Sans, Impact
monospace
Courier New, Monaco, Consolas
El aspecto con el que se muestran los cinco valores genricos es el siguiente:

font-family: serif
abcdefghijklmnopqrstuvwxyz
font-family: sans-serif
font-family: cursive
font-family: fantasy
font-family: monospace
El aspecto real de cada valor genrico depende tanto del navegador utilizado como de las fuentes instaladas en el
dispositivo con el que se accede a la pgina.
En la prctica, cuando se defne el tipo de letra del texto, se utiliza una lista de fuentes alternativas en la que el
ltimo valor siempre es uno de los valores genricos. De esta forma, primero se intenta mostrar el texto con el tipo
de letra deseado por el diseador y si no es posible, se utiliza un valor genrico cuyo aspecto sea similar al
deseado:
body {
font-family: Arial, Helvetica, Verdana, sans-serif;

}
p {
font-family: Georgia, Cambria, Times, "Times New Roman", serif;
}
Algunas series de fuentes se utilizan tan a menudo que prcticamente se han convertido en un estndar. La
siguiente lista muestra las series de fuentes ms utilizadas:
font-family:
font-family:
font-family:
font-family:
font-family:
font-family:
Arial, Helvetica, sans-serif;

"Times New Roman", Times, serif;
"Courier New", Courier, monospace;
Georgia, "Times New Roman", Times, serif;
Verdana, Arial, Helvetica, sans-serif;
Geneva, Arial, Helvetica, sans-serif;
Como la propiedad font-family no lo permite, si se quiere mostrar el texto con una fuente especial que no
dispone la mayora de usuarios, se debe recurrir a tcnicas como sIFR, que combina Flash y JavaScript para
mostrar cualquier fuente.
Compartir
Twitter
Facebook
Google+
color
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing
Novedades
Condiciones
Privacidad
2.969 das online
/ Referencia de CSS
Inicio 2.1
/ Propiedad font-size
Propiedad font-size
Defnicin
Establece el tamao de letra

Valores permitidos

absolute-size
relative-size
medida
porcentaje
inherit
Si se utilizan porcentajes, hace referencia al tamao de letra del elemento contenedor
Valor inicial
medium
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/fonts.html#propdef-font-size
Ejemplos de uso
La propiedad font-size permite establecer el tamao de letra del texto. Adems de todas lasunidades de medida
absolutas y relativas conocidas (em, ex, px, %, in, cm, mm, pt, pc) tambin se pueden utilizar palabras clave que
hacen referencia a tamaos de letra absolutos y relativos.
Los tamaos de letra absolutos se establecen mediante las palabras clavexx-small, x-small, small, medium,
large, x-large, xx-large. Aunque depende de cada navegador decidir el tamao de las palabras clave,
normalmente coinciden con los tamaos de los ttulos de seccin <h1> a <h6>:
font-size: xx-large
Lorem ipsum dolor sit amet

font-size: x-large

font-size: large

font-size: medium

font-size: small
font-size: x-small
font-size: xx-small
Como son tamaos de letra absolutos, el texto del ejemplo anterior siempre se ve con el mismo tamao,
independientemente de la resolucin de la pantalla o del tamao de otros elementos de la pgina.
Adems de los tamaos absolutos, la propiedad font-size permite establecer el tamao del texto de forma
relativa mediante las palabras clave larger y smaller. La referencia que se toma para calcular un tamao ms
grande (larger) o ms pequeo (smaller) es el tamao de letra del elemento contenedor.
De esta forma, si el elemento contenedor tiene un tamao de letra equivalente amedium, el tamao utilizado si se
indica un valor larger ser large y si se indica un valor smaller ser small. Si el contenedor tiene un tamao igual
a x-small, el valor larger ser small y el valor smaller ser xx-small y as sucesivamente. Si el elemento
contenedor no tiene un tamao de letra que coincida exactamente con uno de los valores absolutos, el navegador
lo redondea al valor absoluto ms cercano.
Hace unos aos, era muy comn utilizar los valores absolutos (x-small, small, etc.) para establecer el tamao de
letra del texto. No obstante, hoy en da su uso se ha reducido drsticamente. El uso de los valores relativos
(larger, smaller) siempre ha sido residual.
De todas las unidades de medida absolutas y relativas disponibles, se recomienda utilizar la unidad em para
establecer el tamao del texto. El motivo es que al tratarse de una unidad de medida relativa, se adapta fcilmente
sin realizar cambios a cualquier dispositivo de acceso utilizado por los usuarios.
En el siguiente ejemplo se muestran diferentes tamaos de texto establecidos mediante unidades relativas e( m, %,
px) y absolutas (pt):
9px
.5em
50%
.7em
70%
.9em
90%
1em
100%
1.5em
150%
18px
2em
200%
24px
3em
300%
36px
3.5em
350%
48px
12px
14px
9pt
12pt
14pt
18pt
24pt
36pt
48pt
Como se explica en el apartado de unidades de medida relativas y absolutas, el tamao del texto establecido
mediante em toma como referencia el tamao de letra del elemento contenedor. De esta forma, si se modifca el
tamao de letra de la pgina o de alguno de sus elementos contenedores, el tamao de letra del texto tambin se
modifca. El mismo comportamiento se produce en el tamao de texto establecido mediante porcentanjes.
Cuando se establece el tamao del texto mediante pxel, su tamao real en pantalla puede ser grande o pequeo
en funcin de la resolucin de la pantalla, por lo que tambin se considera una unidad de medida relativa. Por su
parte, el texto cuyo tamao se establece en puntos (unidad pt) siempre se muestra del mismo tamao,
independientemente de la resolucin de la pantalla o del tamao de letra de otros elementos de la pgina.
Compartir
Twitter
Facebook
Google+
color
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad font-style
Propiedad font-style
Defnicin
Establece el estilo del tipo de letra

Valores permitidos

normal
italic
oblique
inherit
Valor inicial
normal
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/fonts.html#propdef-font-style
Ejemplos de uso
La propiedad font-style permite establecer el estilo con el que se muestra el tipo de letra seleccionado mediante
la propiedad font-family. Los tres estilos disponibles son: normal n( ormal), itlico (italic) y oblicuo (oblique).
Normalmente, la propiedad font-style se utiliza para mostrar un texto en cursiva (tambin llamadaitlica o
bastardilla). En el siguiente ejemplo, se modifca el estilo de la letra que muestra el prrafo:
<p style="font-style: italic;">Lorem ipsum dolor sit amet, consectetuer <em>adipiscing elit</em>. Praesent
tempor enim id metus. Vivamus augue. Nam risus. Morbi auctor. Phasellus dapibus <em>urna sed ligula</em> </p>.
De la misma forma, tambin se puede utilizar la propiedadfont-style para mostrar con un estilo normal la letra
que se muestra por defecto en cursiva. En el siguiente ejemplo, el primer elemento <em> no se muestra en cursiva
gracias a la propiedad font-style:
<p>Lorem ipsum dolor sit amet, consectetuer <em style="font-style: normal;">adipiscing elit</em>. Praesent
tempor enim id metus. Vivamus augue. Nam risus. Morbi auctor. Phasellus dapibus <em>urna sed ligula</em> </p>.
El otro estilo disponible es oblique, que corresponde al estilo de letra oblicuo. Visualmente, los estilos itlico y
oblicuo son similares pero presentan diferencias muy importantes. En el estilo oblicuo, cada letra del estilo normal se
inclina hacia la derecha para formar un estilo parecido al itlico.
Simplifcando los detalles ms tcnicos, se puede afrmar que el estilo itlico es una cursivaautntica porque utiliza
diferentes "dibujos" (en realidad llamados "glifos" en el mbito de la tipografa) para representar cada carcter. Por su
parte, el estilo oblicuo es una cursiva falsa porque slo consiste en inclinar los caracteres normales.
A continuacin se muestra un prrafo de texto con el estilooblique:
<p style="font-style: oblique;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent tempor
enim id metus. Vivamus augue. Nam risus. Morbi auctor. Phasellus dapibus urna sed ligula</p>.
Aunque las diferencias visuales son sutiles, algunos caracteres de algunos tipos de letra determinados muestran
diferencias muy importantes en sus estilos itlico y oblicuo. La siguiente imagen muestra los caracteres bsicos de
la fuente Myriad Pro. La fla superior corresponde al estilo itlico y la inferior es la del estilo oblicuo, donde se
aprecian grandes diferencias en los caracteres a, b, e, g, p, q:
A continuacin se muestran todos los caracteres con un tamao de letra muy grande para apreciar las diferencias
de cada estilo:
font-style: oblique
font-style: italic
Desafortunadamente, cuando un tipo de letra dispone del estilo cursiva, los navegadores muestran el estilo oblicuo
con el mismo aspecto. Por este motivo, seguramente todos los caracteres del ejemplo anterior tienen el mismo
aspecto cuando los ves en cualquier navegador.
Compartir
Twitter
Facebook
Google+
color
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad font-variant
Propiedad font-variant
Defnicin
Establece la variante del tipo de letra

Valores permitidos

normal
small-caps
inherit
Valor inicial
normal
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/fonts.html#propdef-font-variant
Ejemplos de uso
La propiedad font-variant permite elegir la variante con la que se muestra el tipo de letra seleccionado mediante
la propiedad font-family. Las nicas variantes disponibles en CSS 2.1 son: normal n( ormal) y versalita (small-caps).
La variante versalita muestra el texto con letras maysculas de un tamao similar a las letras minsculas. El siguiente
ejemplo muestra un prrafo con algunas palabras destacadas con la variante versalita:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <span style="font-variant: small-caps"> Praesent
tempor enim id metus</span>. Vivamus augue. Nam risus. Morbi auctor. Phasellus dapibus urna sed ligula.
Las diferencias visuales con las maysculas son muy evidentes, como muestra el siguiente ejemplo en el que los
tres prrafos tienen el mismo contenido pero diferentes variantes tipogrfcas:
normal
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent tempor enim id metus. Vivamus augue. Nam
risus. Morbi auctor. Phasellus dapibus urna sed ligula.
MAYSCULAS NORMALES
LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT. PRAESENT TEMPOR ENIM ID METUS. VIVAMUS AUGUE. NAM
RISUS. MORBI AUCTOR. PHASELLUS DAPIBUS URNA SED LIGULA.
versalitas
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent tempor enim id metus. Vivamus augue. Nam
risus. Morbi auctor. Phasellus dapibus urna sed ligula.
Si el tipo de letra utilizado no dispone de la variante versalita, el navegador genera automticamente esa variante
reemplazando las letras minsculas por letras maysculas cuyo tamao se escala de forma proporcional.
La propiedad font-variant es una de las menos utilizadas de CSS porque slo permite seleccionar una variante
(small-caps). Aunque existen muchas otras posibles variantes (nmeros pequeos, nmeros clsicos, tipo de
letra condensado o expandido), el estndar ofcial de CSS 2.1 reconoce que no existen propiedades ni valores
para seleccionarlas.
Adems de utilizar font-variant como simple recurso esttico, en ocasiones se utiliza para mostrar enversalitas
las siglas y acrnimos encerrados por la etiqueta <acronym> de HTML.
Compartir
Twitter
Facebook
Google+
color
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad font-weight
Propiedad font-weight
Defnicin
Establece el grosor de cada letra

Valores permitidos

normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
inherit
Valor inicial
normal
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/fonts.html#propdef-font-weight
Ejemplos de uso
La propiedad font-weight permite establecer el grosor con el que se muestran las letras del texto. Normalmente,
la propiedad font-weight se emplea para mostrar un texto en negrita (valorbold):
<p style="font-weight: bold;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim.
Pellentesque id pede vitae pede ultricies gravida. Sed vulputate. Vestibulum quis ipsum. Aenean nec quam. Sed
ultrices tempor massa.</p>.
El otro uso habitual de la propiedad font-weight es el de mostrar con un estilo normal un texto que originalmente
se mostraba en negrita, como por ejemplo la etiqueta <strong> de HTML:
<strong>Esta es una etiqueta <strong> con el estilo por defecto<strong>
<strong style="font-weight: normal">Esta es una etiqueta <strong> a la que se le ha quitado la
negrita</strong>
Adems de los valores bold y normal, la propiedad font-style defne los valores relativos lighter ms delgado)
y bolder ms grueso). La referencia que se toma para hacer la letra ms o menos gruesa es el grosor heredado
desde el elemento contenedor.
En el siguiente ejemplo, se muestran los diferentes resultados que producen los valoreslighter y bolder en
funcin del grosor de la letra del elemento contenedor:
<p style="font-weight: normal;">Lorem ipsum dolor sit amet, <span font-weight="lighter">consectetuer
adipiscing elit.</span></p>.
<p style="font-weight: bold;">Lorem ipsum dolor sit amet, <span font-weight="lighter">consectetuer adipiscing
elit.</span></p>.
<p style="font-weight: normal;">Lorem ipsum dolor sit amet, <span font-weight="bolder">consectetuer
adipiscing elit.</span></p>.
<p style="font-weight: bold;">Lorem ipsum dolor sit amet, <span font-weight="bolder">consectetuer adipiscing
elit.</span></p>.
En el ejemplo anterior, los navegadores determinan el grosor de la letra del elemento contenedor (en este caso, el
prrafo) y aumentan (bolder) o disminuyen (lighter) su grosor en el elemento interior (en este caso, el <span>).
En realidad, esto es slo la explicacin terica de lo que deberan hacer los navegadores, ya que en la prctica los
resultados son muy diferentes.
El principal problema de la propiedad font-weight es que casi ningn tipo de letra utilizado por los usuarios
normales dispone de varios grosores diferentes. De hecho, la mayora de sus fuentes slo disponen de estilo
normal (valor normal) y estilo negrita (valor bold). Por lo tanto, hasta que todos los tipos de letra no incorporen
varios grosores diferentes, los valores bolder y lighter carecen de utilidad prctica.
Adems, las fuentes que disponen de muchos grosores diferentes, utilizan una nomenclatura que no es estndar y
que por tanto, vara de un fuente a otra. Si se toma por ejemplo un grosor que parece negrita, el nombre de ese
grosor puede ser bold, regular, roman, medium, semiblod o black dependiendo del tipo de letra.
Por ese motivo, la propiedad font-weight no utiliza palabras para referirse a cada grosor, sino que defne nueve
valores numricos que van desde el 100 hasta el 900. El valor normal corresponde al valor numrico 400 y el valor
bold corresponde al valor numrico 700.
El estndar de CSS 2.1 explica que cada valor numrico indica que ese grosor es al menos tan grueso como el
anterior valor numrico. En el siguiente ejemplo se muestran nueve prrafos con distintos grosores, aunque en la
prctica los navegadores slo muestran dos grosores diferentes:
<p style="font-weight: 100;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>.
Cuando un tipo de letra slo dispone del estilo normal y del estilo negrita, los valores numricos100, 200, 300, 400 y
500 corresponden al estilo normal y los valores numricos 600, 700, 800 y 900 corresponden al estilo en negrita.
La correspondencia entre los grosores defnidos por cada tipo de letra y los valores numricos de la propiedad
font-weight dependen de cada navegador. No obstante, se aplican algunas reglas generales como las
siguientes:
Si la fuente defne una escala numrica de grosores con los nueve valores (como por ejemplo las fuentes de tipo
OpenType) se utilizan directamente esos valores.
Si la fuente dispone de un tipo de letra llamado Medium y otro tipo llamado Book, Regular, Roman o Normal, el
estilo Medium se asigna al valor numrico 500.
El estilo Bold normalmente corresponde al valor numrico 700.
Si la fuente tiene menos de nueve grosores diferentes, se asignan los valores numricos que faltan siguiendo el
algoritmo que se explica a continuacin:
Si el valor 500 no se ha asignado, se asigna al mismo estilo que el valor400
Si los valores 600, 700, 800 y 900 no se han asignado, se asignan al siguiente grosor disponible (normalmente
equivalente al valor bold). Si no se dispone de ningn otro grosor, se asignan al estilo correspondiente al
grosor anterior (normalmente equivalente al valor normal).
Si los valores 100, 200 y 300 no se han asignado, se asignan al anterior grosor disponible. Si no se dispone
de un grosor anterior, se asignan al grosor siguiente.
Si por ejemplo se dispone de un tipo de letra con cuatro grosores:

Tipo de letra
Tamao asignado
Tamaos adicionales
asignados
NombreDeTipoLetra Regular
400
100, 200, 300
NombreDeTipoLetra Medium
500
NombreDeTipoLetra Bold
700
600
NombreDeTipoLetra Heavy
800
900
Si por ejemplo se dispone de un tipo de letra con seis grosores:

Tipo de letra
Tamao asignado
Tamaos adicionales
asignados
NombreDeTipoLetra Book
400
100, 200, 300
NombreDeTipoLetra Medium
500
NombreDeTipoLetra Bold
700
600
NombreDeTipoLetra Heavy
800
NombreDeTipoLetra Black
900
NombreDeTipoLetra
ExtraBlack
La propiedad font-weight es una de las propiedades ms infrautilizadas de CSS. Las limitaciones de los
navegadores y de las fuentes que utilizan los usuarios normales, impiden un correcto funcionamiento ms all de
los valores normal y bold.
Compartir
Twitter
Facebook
Google+
color
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad font
Propiedad font
Defnicin
Establece algunas o todas las propiedades tipogrfcas

Valores permitidos
Existen tres opciones diferentes para establecer el valor o valores de esta propiedad:
1. Opcionalmente, uno, dos o tres de los siguientes valores y en cualquier orden:
font-style
font-variant
font-weight
Seguido por:
Obligatoriamente por el tamao de letra (font-size)
Opcionalmente por el interlineado (line-height)
Obligatoriamente por el tipo de letra (font-family)
caption
icon
menu
message-box
small-caption
status-bar
inherit
Si se utilizan porcentajes, cada propiedad defne el valor al que hace referencia
Valor inicial

Se aplica a
Todos los elementos

Vlida en
3.
medios visuales
Se hereda
si
w3.org/TR/CSS21/fonts.html#propdef-font
Ejemplos de uso
La propiedad font permite establecer algunas o todas las propiedades tipogrfcas del texto de forma simultnea.
Por este motivo, font es una de las propiedades abreviadas que se conocen con el nombre de"propiedades
shorthand".
Los dos nicos valores que se deben incluir obligatoriamente al utilizar la propiedadfont son el tamao y el tipo de
letra:
body {
font: 1.5em Arial, Helvetica, sans-serif;
}
Si se omite el tamao o el tipo de letra o si se intercambia su posicin, la declaracin de la propiedadfont es

incorrecta y se ignora su valor:
font: 1.5em;
font: sans-serif;
font: sans-serif 1.5em;
// Incorrecto: falta el tipo de letra

// Incorrecto: falta el tamao de letra
// Incorrecto: primero se indica el tamao
La propiedad font tambin permite indicar de forma opcional el interlineado (propiedad line-height) justo despus
del tamao de letra y separado por una barra inclinada (/):
body {
font: 1.5em/2 Arial, Helvetica, sans-serif;
}
p {
font: 13pt/1.5em Arial, Helvetica, sans-serif;
}
El resto de propiedades tipogrfcas tambin son opcionales y se pueden indicar alguna o todas a la vez y en
cualquier orden, pero siempre antes que el tamao de letra:
font:
font:
font:
font:
font:
italic 1.5em sans-serif;

small-caps 1.5em sans-serif;
bold 1.5em sans-serif;
700 small-caps 1.5em sans-serif;
small-caps oblique bolder 1.5em sans-serif;
font: oblique 200 1.5em sans-serif;

font: normal italic 1.5em sans-serif;
Si no se defne el valor de alguna propiedad tipogrfca, el navegador le asigna su valor por defecto. Si se defnen
todas las propiedades tipogrfcas a la vez, la declaracin resultante puede llegar a ser muy compleja:
font: italic small-caps bold 1.5em/2 sans-serif;
font: 700 normal 12pt/1.3 sans-serif;
font: oblique lighter 85%/120% sans-serif;
Adems de las propiedades tipogrfcas individuales, la propiedad font defne una serie de palabras clave para
establecer de forma directa todas las propiedades tipogrfcas del texto. Estas palabras clave indican que el texto
debe mostrarse con el mismo aspecto que algunos elementos del sistema operativo del usuario:
Palabra clave
Elementos del Sistema Operativo a los que hace referencia
caption
Controles y campos de formulario (botones, listas desplegables, etc)
icon
Texto mostrado debajo de cada icono
menu
Mens desplegables y otros tipos de mens
message-box
Cuadros de dilogo (ventanas con mensajes de error, informacin, advertencia,

etc.)
small-caption
Controles y campos de formulario ms pequeos
status-bar
Barra de estado de las ventanas
Los elementos de la tabla anterior siempre hacen referencia a los elementos del sistema operativo del usuario, por
lo que no tienen nada que ver con el navegador o aplicacin utilizada para acceder a los contenidos.
Si en el sistema operativo utilizado no est defnido alguno de los valores, los navegadores lo sustituyen por otros
valores similares o utilizan directamente las propiedades tipogrfcas por defecto.
A continuacin se muestra el aspecto del texto defnido con cada palabra clave de la propiedadfont. Si visualizas
esta pgina con diferentes sistemas operativos o modifcas el aspecto del tema que utilizas en tu sistema operativo,
el texto variar su aspecto:
<p style="font: caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p style="font: icon">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p style="font: menu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p style="font: message-box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p style="font: small-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p style="font: status-bar">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
A pesar de su sencillez y de que el texto cuyo aspecto se defne con las palabras clave parece ms integrado con
el sistema operativo del usuario, en la prctica apenas se utilizan estas palabras y casi siempre se opta por defnir
manualmente las propiedades tipogrfcas del texto.
Por ltimo, recuerda que la propiedad font permite establecer todas las propiedades tipogrfcas del texto salvo su
color, que se defne de forma independiente mediante la propiedad color.
El uso de propiedades abreviadas como font no slo hace ms breve el cdigo CSS, sino que demuestra que
se tienen conocimientos avanzados de CSS.
Compartir
Twitter
Facebook
Google+
color
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad letterspacing
Propiedad letter-spacing
Defnicin
Establece la separacin entre las letras del texto

Valores permitidos

normal
medida
inherit
Valor inicial
normal
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/text.html#propdef-letter-spacing
Ejemplos de uso
Aunque CSS 2.1 incluye numerosas propiedades relacionadas con el texto, no dispone de algunas de las
caractersticas ms avanzadas de los lenguajes y aplicaciones especfcos para el control de la tipografa.
As, la propiedad letter-spacing es una simplifcacin de las opciones tracking y kerning disponibles en algunas
aplicaciones especfcas.
El valor normal indica que el navegador se encarga de determinar la separacin ptima entre las letras del texto.
Esta separacin se hace ms evidente cuando se justifca el texto con la propiedad text-align:
text-align: left; letter-spacing: normal
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce
venenatis est eget arcu sodales tempor. Ut lobortis augue sed elit. Nam neque. Sed et lorem a nunc ultrices
molestie. Sed vitae nisi ut odio ornare sollicitudin. Vivamus eget lacus. Morbi consequat, lectus non
porttitor porttitor, lorem arcu tincidunt ante, eu laoreet lorem mi ut velit. Vestibulum non neque.
text-align: justify; letter-spacing: normal
venenatis est eget arcu sodales tempor. Ut lobortis augue sed elit. Nam neque. Sed et lorem a nunc ultrices
molestie. Sed vitae nisi ut odio ornare sollicitudin. Vivamus eget lacus. Morbi consequat, lectus non
porttitor porttitor, lorem arcu tincidunt ante, eu laoreet lorem mi ut velit. Vestibulum non neque.
Si se indica una medida, se considera que es el espaciado adicional que se aade a la separacin normal de cada
letra:
letter-spacing: 0
venenatis est eget arcu sodales tempor.
letter-spacing: 2px
letter-spacing: 0.3em
letter-spacing: 1pt
Si se utilizan medidas, tambin es posible indicar valores negativos, de forma que la separacin entre letras sea
inferior a la normal:
letter-spacing: 0
letter-spacing: -1px
letter-spacing: -0.1em
letter-spacing: -0.5pt
Si el texto est justifcado, el navegador puede ignorar o aplicar parcialmente el valor establecido en la propiedad
letter-spacing. El estndar CSS 2.1 no indica el algoritmo que se debe utilizar para determinar la separacin
entre letras, por lo que el aspecto del texto vara en cada navegador.
Si la separacin entre letras es diferente a la separacin normal, el estndar CSS 2.1 indica que los navegadores
no deben utilizar ligaduras tipogrfcas.
La propiedad letter-spacing se aplica normalmente en los titulares de seccin o en zonas cortas de texto para
conseguir efectos grfcos avanzados.
Para controlar la separacin entre palabras, CSS 2.1 dispone de la propiedad word-spacing.
Compartir
Twitter
Facebook
Google+
color
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad direction
Propiedad direction
Defnicin
Indica la direccin en la que se muestra el texto y su valor tambin lo utilizan otras propiedades CSS
Valores permitidos

ltr
rtl
inherit
Valor inicial
ltr
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/visuren.html#propdef-direction
Ejemplos de uso
Algunos idiomas como el rabe y el hebreo, muestran los caracteres de sus textos desde la derecha hacia la
izquierda, al contrario que la mayora de idiomas. Por este motivo, las pginas que contienen algn texto escrito en
esos idiomas muestran el texto en dos direcciones diferentes. Este comportamiento se denomina bidireccionalidad,
aunque se suele abreviar como "bidi".
El estndar Unicode defne un algoritmo muy complejo para determinar el sentido correcto de cada bloque de
texto. Adems de tener en cuenta el propio contenido del texto, el algoritmo permite controlar y modifcar la
direccin del texto de forma explcita.
CSS 2.1 utiliza ese mismo algoritmo para mostrar el texto bidireccional. Adems, defne las propiedades
direction y unicode-bidi para establecer el comportamiento del algoritmo en cada elemento de la pgina. Por
tanto, los navegadores aplican en primer lugar el algoritmo de Unicode a cada prrafo de la pgina y despus
tienen en cuenta el valor de la propiedad direction para cada elemento.
La propiedad direction defne dos valores para establecer la direccin del texto de un elemento: *ltr, muestra el
texto escrito de izquierda a derecha y es el que utilizan los navegadores por defecto. * rtl, muestra el texto escrito
de derecha a izquierda.
A continuacin se muestran dos prrafos de texto iguales pero con diferente valor en su propiedaddirection:
direction: ltr Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim. Pellentesque id
pede vitae pede ultricies gravida. Sed vulputate. Vestibulum quis ipsum. Aenean nec quam. Sed ultrices tempor
massa. Praesent tempor enim id metus. Vivamus augue. Nam risus. Morbi auctor. Phasellus dapibus urna sed
ligula.
direction: rtl Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim. Pellentesque id
.ligula
Cuando el texto del elemento est justifcado, las diferencias entre los dos valores de la propiedaddirection son
ms evidentes:
direction: ltr Lorem ipsum dolor sit amet, consectetuer adipiscing elit!. Donec dignissim. Pellentesque id
ligula.
direction: rtl Lorem ipsum dolor sit amet, consectetuer adipiscing elit!. Donec dignissim. Pellentesque id
.ligula
Adems de la direccin del texto y la posicin de la ltima lnea de un elemento con su texto justifcado text(
align: justify), el valor de la propiedad direction tambin determina la direccin de las columnas de las tablas
y la direccin del desbordamiento horizontal (propiedad overfow) .

El siguiente ejemplo muestra dos tablas cuyo cdigo HTML es exactamente el mismo pero que se muestran de
forma diferente porque su elemento contenedor utiliza valores diferentes en la propiedad direction:
direction: ltr
Ttulo de la tabla
Cabecera columna 1
Cabecera columna 2
Cabecera fla 1
Valor 1-1
Valor 1-2
Cabecera fla 2
Valor 2-1
Valor 2-2
Cabecera columna 1
Cabecera columna 2
direction: rtl
Ttulo de la tabla
Cabecera columna 2
Cabecera columna 1
Valor 1-2
Valor 1-1
Cabecera fla 1
Valor 2-2
Valor 2-1
Cabecera fla 2
Cabecera columna 2
Cabecera columna 1
Cuando se establece la propiedad direction en las columnas de una tabla, sus celdas no heredan el valor. En
cualquier otro elemento de la pgina, el valor de direction se hereda correctamente.
Por ltimo, los navegadores que no soportan el texto bidireccional, ignoran el valor de esta propiedad as como el
de la propiedad unicode-bidi.
Compartir
Twitter
Facebook
Google+
direction
line-height
text-align
text-decoration
text-indent
text-transform
unicode-bidi
word-spacing

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad lineheight
Propiedad line-height
Defnicin
Establece el interlineado del texto

Valores permitidos

normal
nmero
medida
porcentaje
inherit
Si se utilizan porcentajes, hace referencia al tamao de letra del propio elemento
Valor inicial
normal
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/visudet.html#propdef-line-height
Ejemplos de uso
La propiedad line-height establece la altura de cada lnea que forma el contenido de texto de un elemento, por lo
que se emplea para controlar el interlineado del texto. El uso de line-height es imprescindible cuando se quiere
facilitar la lectura de los contenidos de una pgina.
Si el valor de line-height es mayor que el tamao de letra del texto, los navegadores aaden un espacio de
separacin del mismo tamao por encima y por debajo del texto. En los elementos de bloque, la propiedad lineheight indica la altura mnima de sus contenidos de texto. En los elementos en lnea,line-height indica
directamente la altura de la caja que forma ese elemento (salvo las imgenes, cuya altura se determina mediante la
propiedad height).
El interlineado se puede establecer mediante cuatro tipos de valores. El valor por defecto esnormal, que indica al
navegador que se debe utilizar un valor razonable en funcin del tamao de letra del texto. El estndar no establece
ese valor razonable, pero recomienda que sea un nmero comprendido entre1.0 y 1.2.
line-height: 1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus
pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare
adipiscing pede. Proin elementum augue ut magna.
line-height: normal Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus
El interlineado tambin se puede establecer mediante cualquiera de las unidades de medida absolutas y relativas
de CSS, como por ejemplo pxel, puntos y porcentajes:
line-height: 24px Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus
line-height: 16pt Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus
line-height: 130% Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus
Si se utilizan porcentajes, el valor que se toma como referencia es el tamao de letra del texto, por lo quelineheight: 130% signifca que el tamao de cada lnea debe ser un 30% superior al tamao de la letra.
Por ltimo, el interlineado en CSS tambin se puede establecer mediante un nmero sin unidades de medida, que
se interpreta como el mltiplo del tamao de letra del elemento:
line-height: 1.3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus
Se recomienda utilizar esta ltima forma de establecer el interlineado porque es la ms sencilla y la ms fexible, ya
que se adapta correctamente a cualquier cambio en el tamao de letra del texto.
Si el texto se muestra con varios tipos o tamaos de letra diferentes, el navegador toma el tamao de la letra ms
grande para calcular el valor de la propiedad line-height.
line-height: 1.6 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Fusce ut leo eu ipsum faucibus pretium.
[font-size: 1.5em]
Donec iaculis lorem eleifend mi tempor porttitor.
Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.
Compartir
Twitter
Facebook
Google+
direction
line-height
text-align
text-decoration
text-indent
text-transform
unicode-bidi
word-spacing

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad text-align
Propiedad text-align
Defnicin
Establece la alineacin del contenido de un elemento de bloque

Valores permitidos

left
right
center
justify
inherit
Valor inicial
left si el texto se escribe de izquierda a derecha (valorltr en la propiedad direction) y right si el texto se
escribe de derecha a izquierda (valor rtl en la propiedad direction)
Se aplica a
elementos de bloque y celdas de tabla

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/text.html#propdef-text-align
Ejemplos de uso
A pesar de su nombre, la propiedad text-align no slo controla la alineacin del texto. En realidad, esta
propiedad establece la alineacin de los contenidos (texto, imgenes) que se encuentran dentro de un elemento
de bloque.
El valor inicial de la propiedad text-align depende a su vez del valor de la propiedad direction. Si el texto se
escribe de izquierda a derecha (direction: ltr) el valor inicial de text-align es left. Por el contrario, el valor
inicial de text-align es right cuando el texto se escribe de izquierda a derecha (direction: rtl).
La propiedad text-align defne cuatro valores para alinear los contenidos a la izquierda (left), a la derecha
(right), centrados (center) o justifcados (justify). El siguiente ejemplo muestra cuatro prrafos iguales con
diferentes valores en sus propiedades text-align:
text-align: left Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus
text-align: right Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus
text-align: center Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus
text-align: justify Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus
Adems del texto, la propiedad text-align alinea todos los contenidos que se encuentran dentro del elemento
sobre el que se aplica esta propiedad. El siguiente ejemplo muestra cmo se alinean el texto y la imagen de un
elemento <div> al que se aplica la propiedad text-align:
text-align: left
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus
text-align: right
text-align: center
text-align: justify
Como la propiedad text-align alinea los contenidos de un elemento, no se puede utilizar directamente sobre el
contenido que se quiere alinear. Si se considera el siguiente ejemplo:
.imagen1 { text-align: center; }
div
{ text-align: center; }
<img class="imagen1" src="imagen.png" />
<div>
<img src="imagen.png" />
</div>
La nica imagen que se muestra centrada es la que se encuentra dentro del<div>, ya que la propiedad textalign no alinea un elemento sino sus contenidos:
El valor justify indica que los contenidos del elemento se deben mostrar de forma justifcada, es decir, igualando
la longitud de todas las lneas del texto. El estndar de CSS 2.1 no establece el algoritmo que se debe utilizar para
justifcar los contenidos, por lo que cada navegador defne su propio algoritmo.
El principal problema del valor justify es que los navegadores no son capaces de dividir con guiones las palabras
que no caben enteras en una lnea, tal y como hacen todos los procesadores de texto avanzados. Por este
motivo, este valor hace que el texto muestre espacios en blanco demasiado grandes, sobre todo en las columnas
de texto estrechas:
Lorem ipsum dolor sit

amet, consectetuer
adipiscing elit.
Fusce ut leo eu ipsum
faucibus pretium.
Donec iaculis lorem
eleifend mi tempor
porttitor. Integer
porttitor dui vel dui.
Donec ornare
adipiscing pede.
Proin elementum augue
ut magna.
Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Fusce ut leo eu ipsum
faucibus pretium. Donec iaculis lorem
eleifend mi tempor porttitor. Integer
porttitor dui vel dui. Donec ornare
adipiscing pede. Proin elementum augue ut
magna.

consectetuer adipiscing elit.
Fusce ut leo eu ipsum faucibus
pretium. Donec iaculis lorem
eleifend mi tempor porttitor.
Integer porttitor dui vel dui.
Donec ornare adipiscing pede.
Proin elementum augue ut magna.
La propiedad text-align solo alinea los contenidos formados por elementos en lnea, por lo que los elementos de
bloque como las tablas y los <div> no se pueden alinear con esta propiedad. Si se considera el siguiente ejemplo:
div { text-align: center; }
<div>
<table>
...
<td>Celda 1-1</td>
<td>Celda 1-2</td>
...
</table>
</div>
La regla CSS anterior indica que los contenidos del elemento <div> se deben centrar, por lo que: - Como la tabla
es un elemento de bloque, ignora la alineacin de la propiedad text-align - Como la propiedad text-align se
hereda, las celdas de la tabla si que muestran sus contenidos centrados
Los navegadores muestran el ejemplo anterior de la siguiente manera:
Celda 1-1
Celda 1-2
Celda 2-1
Celda 2-2
Para centrar horizontalmente la tabla, se pueden utilizar los mrgenes automticos:

div
{ text-align: center; }
table { margin: auto; }
<div>
<table>
...
<td>Celda 1-1</td>
<td>Celda 1-2</td>
...
</table>
</div>
Las nuevas reglas CSS ahora si que muestran una tabla centrada respecto de su elemento contenedor y con
todos sus contenidos tambin centrados:
Celda 1-1
Celda 1-2
Celda 2-1
Celda 2-2
Compartir
Twitter
Facebook
Google+
direction
line-height
text-align
text-decoration
text-indent
text-transform
unicode-bidi
word-spacing

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad text-decoration
Propiedad text-decoration
Defnicin
Establece la decoracin que se aade al texto de un elemento

Valores permitidos
La explicacin de los valores permitidos para esta propiedad es compleja debido a su gran fexibilidad. Existen
tres opciones diferentes para establecer el valor o valores de esta propiedad:
1. El valor none
2. Uno o ms de los siguientes valores y en cualquier orden:
underline
overline
line-through
blink
El valor inherit
Valor inicial
none
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/text.html#propdef-text-decoration
3.
Ejemplos de uso
La propiedad text-decoration establece la decoracin que se aplica al texto de un elemento. El estndar CSS
2.1 defne los siguientes cinco tipos de decoraciones:
underline: se muestran subrayadas todas las lneas de texto.
overline: similar al valor underline, pero en este caso el subrayado se muestra en la parte superior de cada
lnea.
line-through: todas las lneas de texto se muestran tachadas mediante una lnea continua en el medio de cada
lnea.
blink: el texto parpadea apareciendo y desapareciendo de forma alternativa.
none: el texto no muestra ninguna decoracin, por lo que se eliminan todas las decoraciones que puede haber
heredado el elemento.
En la prctica, los valores ms utilizados son none para mostrar el texto sin adornos y underline para mostrar el
texto subrayado. El valor line-through se emplea ocasionalmente para mostrar tachado un contenido errneo o
que ya no es vlido. El valor overline apenas se utiliza, ya que su efecto es poco til en la prctica. Por ltimo, el
valor blink nunca se emplea en los sitios web correctos, ya que suele molestar a la mayora de usuarios y
perjudica la accesibilidad del sitio web. De hecho, el propio estndar de CSS 2.1 aconseja que los navegadores
no hagan parpadear el texto.
Los valores defnidos por la propiedad text-decoration se pueden utilizar de forma individual y tambin de forma
conjunta para crear efectos avanzados:
text-decoration: underline Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum
faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor.
text-decoration: overline Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum
text-decoration: underline overline Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu
ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor.
text-decoration: blink Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum
text-decoration: line-through Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu
ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor.
text-decoration: overline underline line-through Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor.
El color y el grosor de las lneas utilizadas en la decoracin del texto no se pueden modifcar. Todos los
navegadores muestran las lneas con el mismo color que el de la letra del texto. En cuanto al grosor, algunos
navegadores lo calculan automticamente en funcin del tamao de letra y otros navegadores muestran las lneas
siempre con un grosor de 1px:
text-decoration: underline Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis
lorem eleifend mi tempor porttitor.
Si un elemento incluye en su interior textos de diferentes colores y tamaos, la lnea empleada en su decoracin no
cambia ni de color ni de grosor, sino que se utilizan el color y grosor calculados para el elemento principal:
text-decoration: underline Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu
faucibus pretium.
ipsum
Donec iaculis lorem eleifend mi tempor porttitor.
Por otra parte, los valores underline, overline y line-through slo se aplican al contenido de texto, por lo que
no se subrayan elementos como las imgenes. No obstante, cuando una imagen se muestra en el interior del
texto, la mayora de navegadores tambin le aplican todas las decoraciones:
Imagen en lnea con el texto : se aplica el subrayado a las imgenes
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Fusce ut leo eu ipsum faucibus
pretium. Donec iaculis lorem eleifend mi tempor porttitor.
Imagen independiente: no se aplica el subrayado
El cdigo HTML y CSS del ejemplo anterior se muestra a continuacin:

<div style="text-decoration: underline;"> Lorem ipsum dolor sit amet, consectetuer adipiscing e
lit. <img src="imagen.png" /> Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleif
end mi tempor porttitor. <img src="imagen.png" /></div>
<img style="text-decoration: underline" src="imagen.png" />
Si un elemento tiene en su interior elementos posicionados de forma fotante o de forma absoluta, los valores de la
propiedad text-decoration no se heredan en esos elementos.
Adems, las lneas de los valores underline, overline y line-through se muestran tanto en el texto como en los
espacios en blanco entre cada letra (letter-spacing) y cada palabra (word-spacing), pero no se muestran en los
mrgenes, bordes y rellenos:
letter-spacing: 3px
margin: 0.5em; padding: 0.5em
word-spacing: 15px
La propiedad text-decoration: underline parece similar a la propiedad border-bottom, pero en la prctica son
muy diferentes. La principal diferencia es que text-decoration slo subraya el contenido de texto, mientras que
border-bottom subraya toda la caja del elemento, tal y como demuestran los dos prrafos del siguiente ejemplo:
text-decoration: underline Lorem ipsum dolor sit amet
border-bottom: 1px solid Lorem ipsum dolor sit amet
La otra gran diferencia es que el subrayado se realiza en lalnea de base del texto, mientras que el borde inferior se
realiza debajo del texto. En la prctica, esto signifca que el subrayado se superpone con letras como g, j, p, q, y,
pero el borde inferior siempre se muestra por debajo de cualquier letra.
La propiedad text-decoration se utiliza habitualmente con los enlaces, ya que permite ocultar el subrayado que
muestran por defecto los enlaces. De hecho, en muchos sitios web es comn encontrar la siguiente regla CSS:
a {
text-decoration: none;
}
Adems, combinando la propiedad text-decoration con la pseudo-clase :hover se pueden conseguir efectos
avanzados. Prueba a pasar el ratn por encima de cada enlace para mostrar/ocultar el subrayado:
Lorem
Lorem
Lorem
Lorem
ipsum
ipsum
ipsum
ipsum
dolor
dolor
dolor
dolor
sit
sit
sit
sit
amet
amet
amet
amet
El efecto anterior tambin es muy utilizado en muchos sitios web, por lo que es comn incluir las siguientes reglas
CSS:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Compartir
Twitter
Facebook
Google+
direction
line-height
text-align
text-decoration
text-indent
text-transform
unicode-bidi
word-spacing

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad text-indent
Propiedad text-indent
Defnicin
Establece la tabulacin o indentacin de la primera lnea del texto de un elemento

Valores permitidos

medida
porcentaje
inherit
Valor inicial
0
Se aplica a
Elementos de bloque y celdas de tabla

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS2/text.html#propdef-text-indent
Ejemplos de uso
La propiedad text-indent indica la tabulacin o indentacin que se aplica a la primera lnea de texto de un
elemento. El tamao de la tabulacin se puede indicar con cualquiera de las unidades de medida defnidas por
CSS y puede ser positivo o negativo:
text-indent: 0; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum
faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui.
Donec ornare adipiscing pede. Proin elementum augue ut magna.
text-indent: 30px; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu
ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel
dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.
text-indent: -30px; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum
text-indent: 2em; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum
text-indent: -2em; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum
Algunos sitios web cuyos contenidos son bloques largos de texto (como por ejemplo peridicos, revistas o libros
publicados como webs) utilizan la propiedad text-indent para mostrar sus contenidos siguiendo el estilo
tradicional de los libros: sin separacin vertical entre prrafos y aplicando una indentacin a todos ellos salvo al
primero:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec
iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede.
Los estilos CSS aplicados en el ejemplo anterior son los siguientes:

p {
margin-bottom: 0;
}
p + p {
text-indent: 1.5em;
}
Al espacio en blanco dejado por la indentacin no se le puede aplicar ningn estilo, tales como un color de fondo
o un borde.
A pesar de que el uso principal de la propiedad text-indent es la tabulacin de prrafos de texto, tambin es la
base de una de las tcnicas ms utilizadas en las pginas HTML.
Cmo mostrar bien el logotipo de una empresa o institucin en su pgina web? Incluir solamente la imagen del
logotipo no es sufciente, ya que puede afectar al SEO del sitio y a su accesibilidad. Incluir el nombre de la empresa
en forma de texto no es viable, ya que la mayora de logotipos son imgenes.
La solucin a este problema es muy sencilla y se basa en el uso de la propiedadtext-indent. Utiliza en primer
lugar el siguiente cdigo HTML, reemplazando Acme.com por el nombre de tu empresa o institucin:
<h1 id="logo">
<a href="/">Acme.com</a>
</h1>
El cdigo anterior hace que el nombre de la empresa o institucin aparezca escrito en forma de texto, lo que es
bueno para el SEO y la accesibilidad. A continuacin, aplica los siguientes estilos CSS:
#logo {
height: 100px;
width: 250px;
}
#logo a {
background: url("/imagenes/logo.png") no-repeat;
display: block;
overfow: hidden;
}
Despus de aplicar los estilos, el logotipo ya se ve de forma grfca gracias a la imagen insertada por la propiedad
background. El problema es que ahora mismo el nombre de la empresa se muestra en forma de texto por encima
de la imagen de su logotipo.
Para solucionarlo, aade la siguiente propiedad text-indent al logotipo:
#logo a {
...
text-indent: -9999px;
}
El valor -9999px hace que el texto (es decir, el nombre de la empresa) se desplace casi 10.000 pxeles hacia la
izquierda de su posicin original. En la prctica, esto supone que el texto desaparece completamente de la pantalla
y en su lugar solamente se ve la imagen de fondo, es decir, el logotipo de la empresa.
De esta forma, el cdigo completo para mostrar correctamente el logotipo de una empresa en su pgina web es el
siguiente:
<h1 id="logo">
<a href="/">Acme.com</a>
</h1>
#logo {
height: 100px;
width: 250px;
}
#logo a {
background: url("/imagenes/logo.png") no-repeat;
display: block;
overfow: hidden;
text-indent: -9999px;
}
Compartir
Twitter
Facebook
Google+
direction
line-height
text-align
text-decoration
text-indent
text-transform
unicode-bidi
word-spacing

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad text-transform
Propiedad text-transform
Defnicin
Transforma el texto de un elemento para mostrarlo en maysculas, minsculas o una mezcla de ambas
Valores permitidos

capitalize
uppercase
lowercase
none
inherit
Valor inicial
none
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/text.html#propdef-text-transform
Ejemplos de uso
La propiedad text-transform permite transformar el texto de un elemento para mostrarlo en maysculas,
minsculas o una mezcla de ambas. Los cuatro valores defnidos por esta propiedad son los siguientes:
lowercase: muestra todo el texto del elemento con letras minsculas.
uppercase: muestra todo el texto del elemento con letras maysculas.
capitalize: muestra la primera letra de cada palabra en mayscula y el resto de letras en minsculas.
none: muestra el texto tal y como est escrito, respetando todas las maysculas y minsculas.
A continuacin se muestran ejemplos del resultado de aplicar cada uno de los valores anteriores:
text-transform: none Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus
text-transform: lowercase lorem ipsum dolor sit amet, consectetuer adipiscing elit. fusce ut leo eu ipsum
faucibus pretium. donec iaculis lorem eleifend mi tempor porttitor. integer porttitor dui vel dui. donec
ornare adipiscing pede. proin elementum augue ut magna.
text-transform: uppercase LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT. FUSCE UT LEO EU IPSUM
FAUCIBUS PRETIUM. DONEC IACULIS LOREM ELEIFEND MI TEMPOR PORTTITOR. INTEGER PORTTITOR DUI VEL DUI. DONEC
ORNARE ADIPISCING PEDE. PROIN ELEMENTUM AUGUE UT MAGNA.
text-transform: capitalize Lorem Ipsum Dolor Sit Amet, Consectetuer Adipiscing Elit. Fusce Ut Leo Eu Ipsum
Faucibus Pretium. Donec Iaculis Lorem Eleifend Mi Tempor Porttitor. Integer Porttitor Dui Vel Dui. Donec
Ornare Adipiscing Pede. Proin Elementum Augue Ut Magna.
Aunque los valores uppercase, lowercase y capitalize apenas se utilizan en elementos como los prrafos de
texto, se pueden emplear en elementos como los titulares de la pgina (<h1>, <h2>, ..., <h6>) para conseguir
efectos visuales interesantes.
La propiedad text-transform tambin tiene en cuenta el texto generado dinmicamente mediante propiedades
como content:
p {
text-transform: capitalize;
}
p:before {
content: "texto generado dinmicamente ";
}
<p>Lorem ipsum dolor sit amet...</p>
Las reglas CSS anteriores producen el siguiente resultado:

Texto Generado Dinmicamente Lorem Ipsum Dolor Sit Amet, Consectetuer Adipiscing Elit. Fusce Ut Leo Eu Ipsum
Faucibus Pretium. Donec Iaculis Lorem Eleifend Mi Tempor Porttitor. Integer Porttitor Dui Vel Dui. Donec
Ornare Adipiscing Pede. Proin Elementum Augue Ut Magna.
Compartir
Twitter
Facebook
Google+
direction
line-height
text-align
text-decoration
text-indent
text-transform
unicode-bidi
word-spacing

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad unicodebidi
Propiedad unicode-bidi
Defnicin
Modifca el comportamiento del algoritmo utilizado para el texto Unicode bidireccional

Valores permitidos

normal
embed
bidi-override
inherit
Valor inicial
normal
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS2/visuren.html#propdef-unicode-bidi
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
direction
line-height
text-align
text-decoration
text-indent
text-transform
unicode-bidi
word-spacing

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad wordspacing
Propiedad word-spacing
Defnicin
Establece la separacin entre las palabras del texto

Valores permitidos

normal
medida
inherit
Valor inicial
normal
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/text.html#propdef-word-spacing
Ejemplos de uso
Aunque CSS 2.1 incluye numerosas propiedades relacionadas con el texto, no dispone de algunas de las
caractersticas ms avanzadas de los lenguajes y aplicaciones especfcos para el control de la tipografa.
De la misma forma que la propiedad letter-spacing es una versin simplifcada del tracking y kerning, la propiedad
word-spacing es una forma simple de controlar el espacio entre cada palabra del texto.
El valor normal indica que el navegador se encarga de determinar la separacin ptima entre cada palabra del
texto. Esta separacin se hace ms evidente cuando se justifca el texto con la propiedad text-align:
text-align: left; word-spacing: normal
Proin elementum augue ut magna. Curabitur viverra accumsan justo. Aliquam sagittis lacinia enim. Suspendisse
risus. Praesent in mauris. Aliquam ut ipsum ut mi tempus tincidunt. Quisque sollicitudin purus nec dui. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur ac massa at
enim vulputate imperdiet. Curabitur facilisis enim vitae felis. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Curabitur nulla. Mauris a nisl. Duis feugiat dapibus velit. Aenean
mollis.
text-align: justify; word-spacing: normal
Proin elementum augue ut magna. Curabitur viverra accumsan justo. Aliquam sagittis lacinia enim. Suspendisse
risus. Praesent in mauris. Aliquam ut ipsum ut mi tempus tincidunt. Quisque sollicitudin purus nec dui. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur ac massa at
enim vulputate imperdiet. Curabitur facilisis enim vitae felis. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Curabitur nulla. Mauris a nisl. Duis feugiat dapibus velit. Aenean
mollis.
Si se indica una medida, se considera que es el espaciado adicional que se aade a la separacin normal de cada
palabra:
word-spacing: 0
word-spacing: 3px
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat.
Fusce venenatis est eget arcu sodales tempor.
word-spacing: 0.5em
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in
erat. Fusce venenatis est eget arcu sodales tempor.
word-spacing: 2pt
Si se utilizan medidas, tambin es posible indicar valores negativos, de forma que la separacin entre palabras sea
inferior a la normal:
word-spacing: 0
word-spacing: -2px
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce venena
est eget arcu sodales tempor.

word-spacing: -0.3em
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi at arcu. Nunc varius orci in erat. Fusce venena
est eget arcu sodales tempor.
word-spacing: -1pt
Si el texto est justifcado, el navegador puede ignorar o aplicar parcialmente el valor establecido en la propiedad
word-spacing. El estndar CSS 2.1 no indica el algoritmo que se debe utilizar para determinar la separacin entre
palabras, por lo que el aspecto del texto vara en cada navegador.
Para controlar la separacin entre letras, CSS 2.1 dispone de la propiedad letter-spacing.
Compartir
Twitter
Facebook
Google+
direction
line-height
text-align
text-decoration
text-indent
text-transform
unicode-bidi
word-spacing

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad bottom
Propiedad bottom
Defnicin
Indica el desplazamiento entre el borde inferior del elemento y la parte inferior de su elemento contenedor
Valores permitidos

medida
porcentaje
auto
inherit
Valor inicial
auto
Se aplica a
Los elementos posicionados

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS2/visuren.html#propdef-bottom
Ejemplos de uso
La propiedad bottom permite desplazar un elemento respecto a su posicin original tomando como referencia el
borde inferior del elemento. Por su propia defnicin, esta propiedad slo afecta a los elementos cuya propiedad
position tenga un valor de relative, absolute o fxed.
El siguiente ejemplo muestra tres cajas idnticas posicionadas de forma relativa (position: relative) y que slo
se diferencian en el valor de su propiedad bottom:
div {
bottom: -10px;
}
div {
bottom: 0;
}
div {
bottom: 10px;
}
Los valores positivos en la propiedad bottom hacen que la caja suba respecto a su posicin original. En otras
palabras, la propiedad bottom: 10px se interpreta de la siguiente manera: "sube la caja hasta que su borde inferior
quede a 10px de distancia de la posicin que originalmente tena ese borde inferior".
De la misma manera, los valores negativos en la propiedadbottom hacen que la caja baje respecto a su posicin
original. En otras palabras, la propiedad bottom: -10px se interpreta de la siguiente manera: "baja la caja hasta que
su borde inferior quede a 10px de distancia de la posicin que originalmente tena ese borde inferior".
Para indicar el valor de la propiedad bottom puedes utilizar cualquiera de las medidas defnidas por CSS. En el
siguiente ejemplo, los valores 10px y -10px del ejemplo anterior se han reemplazado por 1em y -1em
respecticamente. Este cambio hace que la caja suba/baje ms o menos en funcin del propio tamao de letra de
esa caja:
div {
bottom: 1em;
}
div {
bottom: 0;
}
div {
bottom: -1em;
}
Si el valor de la propiedad bottom se indica mediante porcentajes, su referencia es la altura de la caja que contiene
a la caja que quieres mover, es decir, su caja padre. Por lo tanto, la propiedad bottom: 50% desplazara la caja
hacia arriba una distancia igual a la mitad de la altura de su caja padre. Por este motivo, los desplazamientos
indicados en porcentaje no funcionan a menos que indiques explcitamente la altura de la caja padre.
En el siguiente ejemplo, el <div> que encierra a los tres <div> posicionados no tiene establecida ninguna altura,
por lo que el valor de su propiedad height es auto. En este caso, el desplazamiento indicado en porcentajes no
funciona y los tres <div> se ven igual:
div {
bottom: 0;
}
div {
bottom: 25%;
}
div {
bottom: -25%;
}
Sin embargo, si en el mismo ejemplo anterior se establece explcitamente la altura del<div> padre a 80px, ahora s
que se aplica el desplazamiento a los <div> interiores (como la altura del <div> padre es 80px y el desplazamiento
es 25%, las cajas se movern 20px respecto de su posicin original):
div {
bottom: 0;
}
div {
bottom: 25%;
}
div {
bottom: -25%;
La propiedad bottom se puede utilizar por ejemplo para desplazar ligeramente los enlaces dentro de un texto
cuando se pasa el ratn por encima:
(pasa el ratn por encima de los enlaces, sin pinchar en ellos)
El cdigo CSS utilizado en el ejemplo anterior es tan sencillo como:

a:hover {
position: relative;
bottom: 2px;
}
Otro truco habitual es desplazar hacia abajo ligeramente los enlaces al pinchar sobre ellos:
(al pinchar los enlaces de este texto, se desplazan hacia abajo. Para poder ver bien el efecto, pincha sobre
los enlaces pero no sueltes el ratn)

a:active {
position: relative;
bottom: -1px;
}
Si el elemento que se quiere desplazar con la propiedad bottom est posicionado de forma absoluta (position:
absolute), la interpretacin del valor de la propiedad bottom es muy diferente. En este caso, el origen de
coordenadas es el borde inferior de la caja que hace de referencia del posicionamiento absoluto, es decir, el borde
inferior de la caja padre.
div { height: 300px; width: 600px; position: relative; }
div {
bottom: 0;
position: absolute;
}
div {
bottom: 50px;
position: absolute;
}
div {
bottom: -50px;
position: absolute;
}
Como se muestra en el ejemplo anterior, si el desplazamiento es excesivo, la caja desplazada puede salirse de los
lmites de la caja padre en la que est contenido.
Cuando el elemento que se desplaza est posicionado de forma absoluta, los valores de la propiedadbottom
indicados mediante porcentajes se interpretan de la misma manera que en los elementos posicionados de forma
relativa. Por tanto, si la caja padre tiene una altura de 300px y el desplazamiento es del 10%, en realidad la caja se
est desplazando 30px:
div {
bottom: 0;
position: absolute;
}
div {
bottom: 10%;
position: absolute;
}
div {
bottom: -10%;
position: absolute;
}
Compartir
Twitter
Facebook
Google+
bottom
clear
foat
left
position
right
top

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad clear
Propiedad clear
Defnicin
Controla el comportamiento de los elementos adyacentes a elementos posicionados de forma fotante

Valores permitidos

none
left
right
both
inherit
Valor inicial
none
Se aplica a
Los elementos de bloque

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS2/visuren.html#propdef-clear
Ejemplos de uso
La propiedad clear indica el lado o lados de una caja que no debe ser adyacente a un elemento posicionado de
forma fotante con la propiedad foat. Los cuatro valores permitidos para esta propiedad tienen el siguiente
signifcado:
left, hace que la caja sobre la que se aplica baje hasta que su borde superior est por debajo del borde inferior
de cualquier elemento fotado a la izquierda.

right, hace que la caja sobre la que se aplica baje hasta que su borde superior est por debajo del borde
inferior de cualquier elemento fotado a la derecha.

both, hace que la caja sobre la que se aplica baje hasta que su borde superior est por debajo del borde inferior
de cualquier elemento fotado a la izquierda o a la derecha.

none, es el valor por defecto que se aplica a todos los elementos y no tiene efecto sobre la posicin de la caja.
Considera el siguiente ejemplo de pgina que contiene una imagen y dos prrafos de texto:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet feugiat justo, vitae feugiat purus.
Vivamus aliquam ligula at ornare dignissim. Ut imperdiet rutrum tincidunt. Phasellus rhoncus eros auctor
porta vulputate.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis posuere nibh
massa, nec sollicitudin eros vestibulum non. Aliquam pellentesque pharetra tortor ut feugiat. Donec vitae
gravida nunc, eget tincidunt magna. Aliquam accumsan et justo quis porttitor.
Si se aplica la propiedad foat con el valor left a la imagen, el resultado ser el siguiente:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet feugiat justo, vitae
feugiat purus. Vivamus aliquam ligula at ornare dignissim. Ut imperdiet rutrum tincidunt.
Phasellus rhoncus eros auctor porta vulputate.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis
posuere nibh massa, nec sollicitudin eros vestibulum non. Aliquam pellentesque pharetra tortor
ut feugiat. Donec vitae gravida nunc, eget tincidunt magna. Aliquam accumsan et justo quis porttitor.
Si no quieres que los contenidos del primer prrafo fuyan alrededor de la imagen fotante, puedes aplicar los
siguientes estilos CSS:
p {
clear: left;
}
Ahora la caja del prrafo bajar hasta que su borde superior se encuentre por debajo del borde inferior del elemento
fotado, es decir, por debajo del borde inferior de la imagen:
porta vulputate.
Si en el ejemplo anterior se hubiera aplicado la propiedad clear: right, no se habran producido cambios, ya que
no hay ningn elemento fotado a la derecha. Asimismo, si se hubiera aplicado la propiedad clear: both, el
resultado habra sido el mismo.
En vez de aplicar la propiedad clear: left a todos los prrafos de la pgina, resulta habitual dejar que las
imgenes foten alrededor de algunos prrafos, pero evitar que lo hagan en el resto:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet feugiat justo,
vitae feugiat purus. Vivamus aliquam ligula at ornare dignissim. Ut imperdiet rutrum
tincidunt. Phasellus rhoncus eros auctor porta vulputate.
(clear: left) Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis
posuere nibh massa, nec sollicitudin eros vestibulum non. Aliquam pellentesque pharetra tortor ut feugiat.
Donec vitae gravida nunc, eget tincidunt magna. Aliquam accumsan et justo quis porttitor.
Si en el ejemplo anterior hubiera elementos fotados tanto a la izquierda como a la derecha, el segundo prrafo
debera utilizar la propiedad clear: both en vez de clear: left:
(clear: both) Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis
posuere nibh massa, nec sollicitudin eros vestibulum non. Aliquam pellentesque pharetra tortor ut feugiat.
Donec vitae gravida nunc, eget tincidunt magna. Aliquam accumsan et justo quis porttitor.
Etiam egestas, orci ac venenatis iaculis, urna nunc fringilla turpis, a faucibus
purus metus quis libero. Maecenas malesuada eu elit eget pretium. Maecenas congue
lorem nisl, vel interdum neque convallis quis. Etiam a laoreet augue.
Compartir
Twitter
Facebook
Google+
bottom
clear
foat
left
position
right
top

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad foat
Propiedad foat
Defnicin
Posiciona los elementos de forma fotante

Valores permitidos

left
right
none
inherit
Valor inicial
none
Se aplica a
Cualquier elemento que no est posicionado de forma absoluta

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS2/visuren.html#propdef-foat
Ejemplos de uso
La propiedad foat posiciona una caja movindola todo lo posible a la izquierda o derecha de su posicin original.
Los tres valores de esta propiedad se interpretan de la siguiente manera:

left, la caja se desplaza todo lo posible a la izquierda de la posicin en la que se encontraba. El resto de
elementos de la pgina se adaptan para mostrarse a su derecha (a menos que se indique lo contrario mediante
la propiedad clear).
right, la caja se desplaza todo lo posible a la derecha de la posicin en la que se encontraba. El resto de
elementos de la pgina se adaptan para mostrarse a su izquierda (a menos que se indique lo contrario mediante
la propiedad clear).
none, la caja no se desplaza respecto de su posicin original. Adems de ser el valor por defecto de esta
propiedad, el valor none se puede utilizar para eliminar el foat aplicado a un elemento mediante otros selectores.
La principal caracterstica del posicionamiento foat es que el resto de elementos de la pgina se adaptan parafuir
alrededor de la caja fotante. En el siguiente ejemplo, se muestra el aspecto por defecto que tendra una pgina
HTML con una imagen y un par de prrafos de texto:
porta vulputate.
La forma en la que se muestran los elementos de la pgina es la esperada debido al tipo de cada elemento: las
imgenes son elementos en lnea y los prrafos son elementos de bloque. No obstante, esta forma de mostrar los
contenidos es muy diferente a la que se utilizara en un medio impreso como una revista o un peridico.
Aplicando el posicionamiento fotante a la imagen, los contenidos de este ejemplo muestran un aspecto mucho
ms lgico:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet feugiat justo, vitae
feugiat purus. Vivamus aliquam ligula at ornare dignissim. Ut imperdiet rutrum tincidunt.
Phasellus rhoncus eros auctor porta vulputate.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis
posuere nibh massa, nec sollicitudin eros vestibulum non. Aliquam pellentesque pharetra tortor
ut feugiat. Donec vitae gravida nunc, eget tincidunt magna. Aliquam accumsan et justo quis porttitor.
El estilo CSS aplicado a la imagen es tan sencillo como:

img {
foat: left;
margin-right: 1em;
margin-bottom: 1em;
}
Si aadimos una segunda imagen al ejemplo original y aplicamos los mismos estilos, el resultado es el siguiente:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet feugiat
justo, vitae feugiat purus. Vivamus aliquam ligula at ornare dignissim. Ut
imperdiet rutrum tincidunt. Phasellus rhoncus eros auctor porta vulputate.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Duis posuere nibh massa, nec sollicitudin eros vestibulum non. Aliquam
pellentesque pharetra tortor ut feugiat. Donec vitae gravida nunc, eget tincidunt magna. Aliquam accumsan et
justo quis porttitor.
Este ejemplo muestra el verdadero funcionamiento del posicionamiento fotante: los elementos se mueventodo lo
posible hacia la izquierda o hacia la derecha. Normalmente esto signifca que se mueven hasta el borde
izquierdo/derecho de su elemento contenedor. Sin embargo, en ocasiones ya existen otros elementos fotantes en
esa posicin, por lo que se colocan a la izquierda/derecha de esos elementos fotantes.
Si en una determinada posicin existen muchos elementos fotantes, es posible que el nuevo elemento no quepa.
En este caso, el elemento fotante se colocara lo ms a la izquierda/derecha posible en la posicin inmediatamente
inferior.
En una misma posicin puede haber elementos fotados a la izquierda y a la derecha:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet feugiat
justo, vitae feugiat purus. Vivamus aliquam ligula at ornare dignissim. Ut
imperdiet rutrum tincidunt. Phasellus rhoncus eros auctor porta vulputate.
pellentesque pharetra tortor ut feugiat. Donec vitae gravida nunc, eget tincidunt magna. Aliquam accumsan et
justo quis porttitor.
Los estilos CSS del ejemplo anterior son los siguientes:

.img1 {
foat: left;
margin-right: 1em;
margin-bottom: 1em;
}
.img2 {
foat: right;
margin-left: 1em;
margin-bottom: 1em;
}
Si el elemento fotado es muy grande, como la imagen del siguiente ejemplo, puede afectar a varios elementos de
la pgina:
pellentesque pharetra tortor ut feugiat. Donec vitae gravida nunc, eget tincidunt
magna. Aliquam accumsan et justo quis porttitor.
Aunque en el ejemplo anterior parece que los dos prrafos adaptan su forma parafuir alrededor de la imagen
fotada, en realidad slo se adaptan los contenidos y no los propios prrafos.
Si se aplica la propiedad outline sobre los prrafos para ver claramente sus cajas, se aprecia que la forma del
prrafo no ha cambiado y sigue siendo rectangular. Los contenidos internos del prrafo s que cambian su forma
para adaptarse al lugar que ocupa el elemento fotado. Esto es importante si se utilizan bordes o fondos en los
prrafos, ya que la imagen fotada tapar parte de esos fondos y bordes:
pellentesque pharetra tortor ut feugiat. Donec vitae gravida nunc, eget tincidunt
magna. Aliquam accumsan et justo quis porttitor.
Cuando se utiliza la propiedad foat suele ser til aplicar tambin la propiedad clear, que permite controlar el
comportamiento de los elementos cuando a su alrededor tienen elementos fotantes.
Por ltimo, cuando se utiliza el posicionamiento fotante es comn encontrarse el problema de que un determinado
elemento tenga en su interior solamente elementos fotados y el resultado visual no sea el esperado.
Si consideras el siguiente cdigo HTML:
<div>
<a class="anterior"
<a class="siguiente"
</div>
<p>Lorem ipsum dolor sit
<p>Vestibulum ante ipsum
href="#">Anterior</a>
href="#">Siguiente</a>
amet, consectetur adipiscing elit...</p>
primis in faucibus orci luctus et ...</p>
Y aplicas los siguientes estilos CSS:

a.anterior {
foat: left;
}
a.siguiente {
foat: right;
El resultado esperado sera el siguiente:

Anterior
Siguiente
porta vulputate.
Sin embargo, el resultado obtenido es realmente el siguiente:

Anterior
Siguiente
vitae feugiat purus. Vivamus aliquam ligula at ornare dignissim. Ut imperdiet rutrum tincidunt. Phasellus
rhoncus eros auctor porta vulputate.
Los enlaces "anterior" y "siguiente" se salen del <div> en el que se encuentran. Este comportamiento es habitual
cuando un elemento solamente contiene en su interior elementos posicionados de forma fotante. Para
solucionarlo, aplica la propiedad overfow con el valor auto sobre ese elemento contenedor:
div {
overfow: auto;
}
a.anterior {
foat: left;
}
a.siguiente {
foat: right;
}
Si ahora pruebas de nuevo este ejemplo, el resultado s que ser el esperado:

Anterior
Siguiente
porta vulputate.
Compartir
Twitter
Facebook
Google+
bottom
clear
foat
left
position
right
top

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad left
Propiedad left
Defnicin
Indica el desplazamiento entre el borde izquierdo del elemento y la parte izquierda de su elemento contenedor
Valores permitidos

medida
porcentaje
auto
inherit
Valor inicial
auto
Se aplica a

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS2/visuren.html#propdef-left
Ejemplos de uso
La propiedad left permite desplazar un elemento respecto a su posicin original tomando como referencia el
borde izquierdo del elemento. Por su propia defnicin, esta propiedad slo afecta a los elementos cuya propiedad
se diferencian en el valor de su propiedad left:
div {
left: 20px;
}
div {
left: 0;
}
div {
left: -20px;
}
Los valores positivos en la propiedad left hacen que la caja se mueva hacia la derecha respecto a su posicin
original. En otras palabras, la propiedad left: 20px se interpreta de la siguiente manera: "mueve la caja hacia la
derecha hasta que su borde izquierdo quede a 20px de distancia de la posicin que originalmente tena ese borde
izquierdo".
De la misma manera, los valores negativos en la propiedadleft hacen que la caja se mueva hacia la izquierda
respecto a su posicin original. En otras palabras, la propiedad left: -20px se interpreta de la siguiente manera:
"mueve la caja hacia la izquierda hasta que su borde izquierdo quede a 20px de distancia de la posicin que
originalmente tena ese borde izquierdo".
Para indicar el valor de la propiedad left puedes utilizar cualquiera de las medidas defnidas por CSS. En el
respecticamente. Este cambio hace que la caja se mueva hacia la izquierda/derecha ms o menos en funcin del
propio tamao de letra de esa caja:
div {
left: 2em;
}
div {
left: 0;
}
div {
left: -2em;
}
Si el valor de la propiedad left se indica mediante porcentajes, su referencia es la anchura de la caja que contiene
a la caja que quieres mover, es decir, su caja padre. Por lo tanto, la propiedad left: 50% desplazara la caja hacia
la derecha una distancia igual a la mitad de la anchura de su caja padre.
En el siguiente ejemplo, como la anchura del <div> padre es de 400px y los <div> interiores se desplazan un 25%,
en realidad el desplazamiento efectivo ser de 100px (el 25% de 400px):

div {
left: 25%;
}
div {
left: 0;
}
div {
left: -25%;
}
La propiedad left se puede utilizar por ejemplo para desplazar ligeramente los elementos de una lista cuando se
pasa el ratn por encima:
(pasa el ratn por encima de los elementos de la lista)
Consectetuer adipiscing elit
Fusce ut leo eu ipsum faucibus pretium
Donec iaculis lorem eleifend

a:hover {
position: relative;
left: 5px;
}
Si el elemento que se quiere desplazar con la propiedad left est posicionado de forma absoluta (position:
absolute), la interpretacin del valor de la propiedad left es muy diferente. En este caso, el origen de
coordenadas es el borde izquierdo de la caja que hace de referencia del posicionamiento absoluto, es decir, el
borde izquierdo de la caja padre.
Por otra parte, cuando el elemento que se desplaza est posicionado de forma absoluta, los valores de la
propiedad left indicados mediante porcentajes se interpretan de la misma manera que en los elementos
posicionados de forma relativa. Por tanto, si la caja padre tiene una anchura de 300px y el desplazamiento es del
10%, en realidad la caja se est desplazando30px.
Compartir
Twitter
Facebook
Google+
bottom
clear
foat
left
position
right
top

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad position
Propiedad position
Defnicin
Posiciona los elementos de forma normal, relativa, absoluta o fja

Valores permitidos

static
relative
absolute
fxed
inherit
Valor inicial
static
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS2/visuren.html#propdef-position
Ejemplos de uso
Segn el estndar CSS 2.1, los elementos de una pgina HTML se colocan utilizando alguno de los tres
algoritmos de posicionamiento siguientes:
Posicionamiento normal o "Normal fow": comprende el posicionamiento de los elementos de bloque, los
elementos en lnea y el posicionamiento relativo aplicado con la propiedad position: relative.
Posicionamiento fotante o "Floats": primero se coloca la caja en su posicin normal (utilizando el anterior
tipo de posicionamiento) y despus se saca de esa posicin para colocarlo lo ms a la derecha (foat: right) o
lo ms a la izquierda (foat: left) posible.
Posicionamiento absoluto o "Absolute positioning". In the absolute positioning model, a box is removed from
the normal fow entirely (it has no impact on later siblings) and assigned a position with respect to a containing
block.
Los elementos que utilizan el posicionamiento fotante o el posicionamiento absoluto se dice que estn"out of the
fow".
La propiedad position, junto con la propiedad foat, permite modifcar la posicin de cualquier elemento de la
pgina. La especifcacin CSS 2.1 defne cuatro formas diferentes de calcular la posicin de un elemento mediante
la propiedad position, que se corresponden con los cuatro valores permitidos para esta propiedad:static,
relative, absolute y fxed.
El valor static corresponde al posicionamiento normal y es el que los navegadores aplican por defecto a
todos los elementos de una pgina. En este caso, para mostrar cada elemento slo se tiene en cuenta si es un
elemento de bloque (<div> y <p> por ejemplo) o si es un elemento en lnea <( img> y <a> por ejemplo).
Si el elemento es de bloque, empieza en una nueva lnea y ocupa todo el sitio disponible hasta el fnal de la lnea en
la que se encuentra. Si el elemento es en lnea, ocupa solamente el espacio necesario para que se vean sus
contenidos.
Cuando un elemento est posicionado de forma static, no se tienen en cuenta los valores de sus propiedades
top, right, bottom y left.
El valor relative tambin se corresponde al posicionamiento normal. No obstante, a diferencia del valor
static, el posicionamiento relative desplaza a las cajas respecto de su posicin original. Este desplazamiento
no afecta al resto de elementos de la pgina, por lo que se pueden producir solapamientos y efectos no
deseados.
El estndar de CSS 2.1 indica que la propiedad position: relative no est defnida para aquellos elementos
cuya propiedad display sea table-row-group, table-header-group, table-footer-group, table-row, tablecolumn-group, table-column, table-cell y table-caption.
Para saber cmo desplazar un elemento respecto de su posicin original, consulta los ejemplos de las
propiedades top, right, bottom y left.
El valor absolute corresponde al posicionamiento absoluto. En este caso, la referencia respecto de la que se
desplaza un elemento no es su posicin original, sino los bordes superior/inferior/derecho/izquierdo del elemento
en el que se encuentra, es decir, de su elemento padre.
Consulta los ejemplos de las propiedades top, right, bottom y left para saber cmo posicionar de forma absoluta un
elemento.
Por ltimo, el valor fxed es una variante del posicionamiento absoluto. La posicin inicial del elemento se calcula de
la misma manera que con la propiedad position: absolute. La diferencia es que una vez posicionado, el
elemento ya no se mueve nunca de esa posicin. Si haces scroll en la pgina del navegador, el elemento siempre
se muestra en la misma posicin de la pantalla.
Al imprimir una pgina HTML que contiene un elemento posicionado de forma absoluta, todas las pginas
mostrarn el mismo elemento en la misma posicin. Puedes aprovechar esta caracterstica para imprimir
documentos en varias pginas que deban contener elementos comunes como cabeceras y pie de pginas.
Compartir
Twitter
Facebook
Google+
bottom
clear
foat
left
position
right
top

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad right
Propiedad right
Defnicin
Indica el desplazamiento entre el borde derecho del elemento y la parte derecha de su elemento contenedor
Valores permitidos

medida
porcentaje
auto
inherit
Valor inicial
auto
Se aplica a

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS2/visuren.html#propdef-right
Ejemplos de uso
La propiedad right permite desplazar un elemento respecto a su posicin original tomando como referencia el
borde derecho del elemento. Por su propia defnicin, esta propiedad slo afecta a los elementos cuya propiedad
se diferencian en el valor de su propiedad right:
div {
right: 20px;
}
div {
right: 0;
}
div {
right: -20px;
}
Los valores positivos en la propiedad right hacen que la caja se mueva hacia la izquierda respecto a su posicin
original. En otras palabras, la propiedad right: 20px se interpreta de la siguiente manera: "mueve la caja hacia la
izquierda hasta que su borde derecho quede a 20px de distancia de la posicin que originalmente tena ese borde
derecho".
De la misma manera, los valores negativos en la propiedadright hacen que la caja se mueva hacia la derecha
respecto a su posicin original. En otras palabras, la propiedad right: -20px se interpreta de la siguiente manera:
"mueve la caja hacia la derecha hasta que su borde derecho quede a 20px de distancia de la posicin que
originalmente tena ese borde derecho".
Para indicar el valor de la propiedad right puedes utilizar cualquiera de las medidas defnidas por CSS. En el
respecticamente. Este cambio hace que la caja se mueva hacia la izquierda/derecha ms o menos en funcin del
propio tamao de letra de esa caja:
div {
right: 2em;
}
div {
right: 0;
}
div {
right: -2em;
}
Si el valor de la propiedad right se indica mediante porcentajes, su referencia es la anchura de la caja que
contiene a la caja que quieres mover, es decir, su caja padre. Por lo tanto, la propiedad right: 50% desplazara la
caja hacia la izquierda una distancia igual a la mitad de la anchura de su caja padre.
En el siguiente ejemplo, como la anchura del <div> padre es de 400px y los <div> interiores se desplazan un 25%,
en realidad el desplazamiento efectivo ser de 100px (el 25% de 400px):

div {
right: 25%;
}
div {
right: 0;
}
div {
right: -25%;
}
La propiedad right se puede utilizar por ejemplo para desplazar ligeramente los elementos de una lista cuando se
pasa el ratn por encima:
(pasa el ratn por encima de los elementos de la lista)
Fusce ut leo eu ipsum faucibus pretium
Donec iaculis lorem eleifend

a:hover {
position: relative;
right: -5px;
}
Si el elemento que se quiere desplazar con la propiedad right est posicionado de forma absoluta (position:
absolute), la interpretacin del valor de la propiedad right es muy diferente. En este caso, el origen de
coordenadas es el borde derecho de la caja que hace de referencia del posicionamiento absoluto, es decir, el
borde derecho de la caja padre.
Por otra parte, cuando el elemento que se desplaza est posicionado de forma absoluta, los valores de la
propiedad right indicados mediante porcentajes se interpretan de la misma manera que en los elementos
posicionados de forma relativa. Por tanto, si la caja padre tiene una anchura de 300px y el desplazamiento es del
10%, en realidad la caja se est desplazando30px.
Compartir
Twitter
Facebook
Google+
bottom
clear
foat
left
position
right
top

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad top
Propiedad top
Defnicin
Indica el desplazamiento entre el borde superior del elemento y la parte superior de su elemento contenedor
Valores permitidos

medida
porcentaje
auto
inherit
Valor inicial
auto
Se aplica a

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS2/visuren.html#propdef-top
Ejemplos de uso
La propiedad top permite desplazar un elemento respecto a su posicin original tomando como referencia el borde
superior del elemento. Por su propia defnicin, esta propiedad slo afecta a los elementos cuya propiedad position
tenga un valor de relative, absolute o fxed.
se diferencian en el valor de su propiedad top:
div {
top: -10px;
}
div {
top: 0;
}
div {
top: 10px;
}
Los valores positivos en la propiedad top hacen que la caja baje respecto a su posicin original. En otras palabras,
la propiedad top: 10px se interpreta de la siguiente manera: "baja la caja hasta que su borde superior quede a
10px de distancia de la posicin que originalmente tena ese borde superior".
De la misma manera, los valores negativos en la propiedadtop hacen que la caja suba respecto a su posicin
original. En otras palabras, la propiedad top: -10px se interpreta de la siguiente manera: "sube la caja hasta que
su borde superior quede a 10px de distancia de la posicin que originalmente tena ese borde superior".
Para indicar el valor de la propiedad top puedes utilizar cualquiera de las medidas defnidas por CSS. En el
respecticamente. Este cambio hace que la caja suba/baje ms o menos en funcin del propio tamao de letra de
esa caja:
div {
top: 1em;
}
div {
top: 0;
}
div {
top: -1em;
}
Si el valor de la propiedad top se indica mediante porcentajes, su referencia es la altura de la caja que contiene a la
caja que quieres mover, es decir, su caja padre. Por lo tanto, la propiedad top: 50% desplazara la caja hacia abajo
una distancia igual a la mitad de la altura de su caja padre. Por este motivo, los desplazamientos indicados en
porcentaje no funcionan a menos que indiques explcitamente la altura de la caja padre.
En el siguiente ejemplo, el <div> que encierra a los tres <div> posicionados no tiene establecida ninguna altura,
por lo que el valor de su propiedad height es auto. En este caso, el desplazamiento indicado en porcentajes no
funciona y los tres <div> se ven igual:
div {
top: 0;
}
div {
top: 25%;
}
div {
top: -25%;
}
Sin embargo, si en el mismo ejemplo anterior se establece explcitamente la altura del<div> padre a 80px, ahora s
que se aplica el desplazamiento a los <div> interiores (como la altura del <div> padre es 80px y el desplazamiento
es 25%, las cajas se movern 20px respecto de su posicin original):
div {
top: 0;
}
div {
top: 25%;
div {
top: -25%;
}
La propiedad top se puede utilizar por ejemplo para desplazar ligeramente los enlaces dentro de un texto cuando
se pasa el ratn por encima:
(pasa el ratn por encima de los enlaces, sin pinchar en ellos)

a:hover {
position: relative;
top: -2px;
}
Otro truco habitual es desplazar hacia abajo ligeramente los enlaces al pinchar sobre ellos:
(al pinchar los enlaces de este texto, se desplazan hacia abajo. Para poder ver bien el efecto, pincha sobre
los enlaces pero no sueltes el ratn)

a:active {
position: relative;
top: 1px;
}
Si el elemento que se quiere desplazar con la propiedad top est posicionado de forma absoluta (position:
absolute), la interpretacin del valor de la propiedad top es muy diferente. En este caso, el origen de coordenadas
es el borde superior de la caja que hace de referencia del posicionamiento absoluto, es decir, el borde superior de
la caja padre.
div {
top: 0;
position: absolute;
}
div {
top: -50px;
position: absolute;
}
div {
top: 50px;
position: absolute;
}
Como se muestra en el ejemplo anterior, si el desplazamiento es excesivo, la caja desplazada puede salirse de los
lmites de la caja padre en la que est contenido.
Cuando el elemento que se desplaza est posicionado de forma absoluta, los valores de la propiedadtop
indicados mediante porcentajes se interpretan de la misma manera que en los elementos posicionados de forma
relativa. Por tanto, si la caja padre tiene una altura de 300px y el desplazamiento es del 10%, en realidad la caja se
est desplazando 30px:
div {
top: 0;
position: absolute;
}
div {
top: 10%;
position: absolute;
}
div {
top: -10%;
position: absolute;
}
Compartir
Twitter
Facebook
Google+
bottom
clear
foat
left
position
right
top

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad clip
Propiedad clip
Defnicin
Establece la parte visible de un elemento

Valores permitidos

shape
auto
inherit
Valor inicial
auto
Se aplica a
Elementos posicionados de forma absoluta

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS2/visufx.html#propdef-clip
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
clip
display
overfow
visibility
white-space
z-index

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad display
Propiedad display
Defnicin
Establece el tipo de caja generada por un elemento

Valores permitidos

inline
block
list-item
run-in
inline-block
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
none
inherit
Valor inicial
inline
Se aplica a
Todos los elementos

Vlida en
todos los medios

Se hereda
no
w3.org/TR/CSS21/visuren.html#propdef-display
Ejemplos de uso
La propiedad display es una de las propiedades CSS ms infrautilizadas. Aunque todos los diseadores conocen
esta propiedad y utilizan sus valores inline, block y none, las posibilidades de display son mucho ms
avanzadas.
De hecho, la propiedad display es una de las ms complejas de CSS 2.1, ya que establece el tipo de la caja
que genera cada elemento. La propiedad display es tan compleja que casi ningn navegador es capaz de
mostrar correctamente todos sus valores.
El valor ms sencillo de display es none que hace que el elemento no genere ninguna caja. El resultado es que el
elemento desaparece por completo de la pgina y no ocupa sitio, por lo que los elementos adyacentes ocupan su
lugar. Si se utiliza la propiedad display: none sobre un elemento, todos sus descendientes tambin desaparecen
por completo de la pgina.
Si se quiere hacer un elemento invisible, es decir, que no se vea pero que siga ocupando el mismo sitio, se debe
utilizar la propiedad visibility. La propiedad display: none se utiliza habitualmente en aplicaciones web dinmicas
creadas con JavaScript y que muestran/ocultan contenidos cuando el usuario realiza alguna accin como pulsar
un botn o un enlace.
Los otros dos valores ms utilizados son block e inline que hacen que la caja de un elemento sea de bloque o
en lnea respectivamente. El siguiente ejemplo muestra un prrafo y varios enlaces a los que se les ha aadido un
borde para mostrar el espacio ocupado por cada caja:
Lorem ipsum
Donec mollis nunc in leo
Vivamus fermentum
Como el prrafo es por defecto un elemento de bloque "block element"), ocupa todo el espacio disponible hasta el
fnal de su lnea, aunque sus contenidos no ocupen todo el sitio. Por su parte, los enlaces por defecto son
elementos en lnea "inline element"), por lo que su caja slo ocupa el espacio necesario para mostrar sus
contenidos.
Si se aplica la propiedad display: inline al prrafo del ejemplo anterior, su caja se convierte en un elemento en
lnea y por tanto slo ocupa el espacio necesario para mostrar sus contenidos:
[display: inline] Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
in leo Vivamus fermentum
Lorem ipsum
Donec mollis nunc
Para visualizar ms claramente el cambio en el tipo de caja, el siguiente ejemplo muestra un mismo prrafo largo
con display: block y display: inline :
[display: block] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus
vulputate lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit
sem pede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.
[display: inline] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus
vulputate lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sem
pede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.
De la misma forma, si en los enlaces del ejemplo anterior se emplea la propiedaddisplay: block se transforman
en elementos de bloque, por lo que siempre empiezan en una nueva lnea y siempre ocupan todo el espacio
disponible en la lnea, aunque sus contenidos no ocupen todo el sitio:
[display: block] Lorem ipsum
[display: block] Donec mollis nunc in leo
[display: block] Vivamus fermentum
Uno de los valores ms curiosos de display es inline-block, que crea cajas que son de bloque y en lnea de
forma simultnea. Una caja de tipo inline-block se comporta como si fuera de bloque, pero respecto a los
elementos que la rodean es una caja en lnea.
El enlace del siguiente ejemplo es de tipo inline-block, lo que permite por ejemplo establecerle un tamao
mediante la propiedad width:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputate lobortis.
Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit
pede. Nulla cursus porta sem. Donec mollis nunc in leo.
[display: inline-block,
width: 25%] Quisque
semper, magna sed
pharetra tincidunt, quam
urna dapibus dolor, a
dignissim sem neque id
purus. Etiam luctus
viverra nisi.
Integer lobortis
accumsan felis. Cras venenatis. Morbi cursus, tellus vitae iaculis pulvinar, turpis nibh posuere nisl, sed
vehicula massa orci at dui. Morbi pede ipsum, porta quis, venenatis et, ullamcorper in, metus. Nulla
facilisi. Quisque laoreet molestie mi. Ut mollis elit eget urna.
Si tu navegador soporta el valor inline-block, el ejemplo anterior se debe visualizar tal y como muestra la
siguiente imagen:
Otro de los valores defnidos por la propiedad display es list-item, que hace que cualquier elemento de
cualquier tipo se muestre como si fuera un elemento de una lista (elemento <li>). El siguiente ejemplo muestra tres
prrafos que utilizan la propiedad display: list-item para simular que son una lista de elementos de tipo <ul>:
Sed non sem quis tellus vulputate lobortis.
Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit
pede.
A continuacin se muestra el cdigo HTML del ejemplo anterior:

<p style="display: list-item; margin-left:
cing elit.</p>
igula ipsum tincidunt pede, et blandit sem
2em">Lorem ipsum dolor sit amet, consectetuer adipis

2em">Sed non sem quis tellus vulputate lobortis.</p>
2em">Vivamus fermentum, tortor id ornare ultrices, l
pede suscipit pede.</p>
Los elementos con la propiedad display: list-item son exactamente iguales que los elementos <li> a efectos
de su visualizacin, por lo que se pueden utilizar las propiedades de listas como list-style-type, list-style-image, liststyle-position y list-style.
Uno de los valores ms curiosos de la propiedad display es run-in, que genera una caja de bloque o una caja
en lnea dependiendo del contexto, es decir, dependiendo de sus elementos adyacentes. El comportamiento de
las cajas de tipo run-in se rige por las siguientes reglas: * Si la cajarun-in contiene una caja de bloque, la caja
run-in se convierte en una caja de bloque. * Si despus de la cajarun-in se encuentra una caja de bloque (que
no est posicionada de forma absoluta y tampoco est posicionada de forma fotante), la caja run-in se convierte
en una caja en lnea en el interior de la caja de bloque. * En cualquier otro caso, la caja run-in se convierte en una
caja de bloque.
El siguiente ejemplo muestra una misma caja de tipo run-in que se visualiza de forma muy diferente en funcin del
tipo de caja que existe a continuacin:
[display:
[display:
Lorem ipsum
run-in]
block] dolor sit amet, consectetuer adipiscing elit.
[display:
[display:
Lorem ipsum
run-in]
inline] dolor sit amet, consectetuer adipiscing elit.
El cdigo HTML y CSS del ejemplo anterior se muestra a continuacin:

<p style="display: run-in; border: 2px dashed #C00;"><strong>[display: run-in]</strong> Lorem i
psum</p>
<p style="display: block; border: 2px solid #000;"><strong>[display: block]</strong> dolor sit
amet, consectetuer adipiscing elit.</p>
<p style="display: run-in; border: 2px dashed #C00;"><strong>[display: run-in]</strong> Lorem i

psum</p>
<p style="display: inline; border: 2px solid #000;"><strong>[display: inline]</strong> dolor si
t amet, consectetuer adipiscing elit.</p>
En la actualidad slo la ltima versin del navegador Opera es capaz de mostrar correctamente el ejemplo anterior,
tal y como muestra la siguiente imagen:
El estndar CSS 2.1 incluye un ejemplo del posible uso del valor run-in. En este ejemplo, un ttulo de seccin
<h3> crea una caja run-in, de forma que cuando va seguido de un prrafo, el titularse mete dentro del prrafo:
<h3 style="display: run-in">Lorem ipsum dolor sit amet</h3>
<p>Sed non sem quis tellus vulputate lobortis. Vivamus fermentum, tortor id ornare ultrices, li
gula ipsum tincidunt pede, et blandit sem pede suscipit pede. Nulla cursus porta sem. Donec mol
lis nunc in leo. Integer lobortis accumsan felis.</p>
El resto de valores de la propiedad display estn relacionados con las tablas y hacen que un elemento se
muestre como si fuera una parte de una tabla: fla, columna, celda o grupos de flas/columnas. Los valores
defnidos por la propiedad display son inline-table, table-row-group, table-header-group, table-footergroup, table-row, table-column-group, table-column, table-cell, table-caption.
Aunque los valores relacionados con las tablas son los ms avanzados, tambin son los que peor soportan los
navegadores. A continuacin se muestra un ejemplo con tres prrafos de texto que establecen la propiedad
display: table-cell :
[display: table-cell] Lorem
[display: table-cell] In
[display: table-cell] Morbi sed nisl sed dui
molestie suscipit libero. Cras consequat sodales. Vivamus ornare felis nec

Maecenas non tortor.
Vestibulum ante ipsum primis
in faucibus orci luctus et
ultrices posuere cubilia
Curae; Sed fermentum lorem a
velit.
sem. Nunc non tellus et urna

mattis tempor. Nulla nec
tellus a quam hendrerit
venenatis. Suspendisse
pellentesque odio et est.
Morbi sed nisl sed dui
consequat sodales.
est. Phasellus massa justo, ornare sed,

malesuada a, dignissim a, nibh. Vestibulum
vitae nunc at lectus euismod feugiat. Nullam
eleifend. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per
inceptos himenaeos. In ut ipsum.
La propiedad display: table-cell hace que cualquier elemento se muestre como si fuera una celda de una
tabla. Como en el ejemplo anterior los tres elementos <p> utilizan la propiedad display: table-cell , el resultado
es visualmente idntico a utilizar una tabla y tres elementos <td>.
Si utilizas un navegador con soporte completo de CSS 2.1, el ejemplo anterior se visualiza tal y como muestra la
siguiente imagen:
Como los valores relacionados con las tablas hacen que cualquier elemento que no sea una tabla se muestre y
comporte como si lo fuera, se pueden utilizar para crear los layouts de las pginas. Hace aos, la estructura de las
pginas se defna mediante tablas, flas y columnas. Esta solucin tiene innumerables desventajas y por eso todos
los diseadores web profesionales crean la estructura de sus pginas mediante CSS y elementos <div>.
No obstante, las tablas tienen algunas ventajas en su comportamiento respecto a los elementos<div>
posicionados de forma absoluta o fotante. La principal ventaja es que todas las celdas de una fla siempre tienen la
misma altura, por lo que si se utilizan tablas no se sufre el problema de las columnas de pgina con diferente altura.
Adems, la estructura creada con una tabla nunca se rompe, ya que las celdas de datos nunca se visualizan una
debajo de otra cuando la ventana del navegador se hace muy pequea. Sin embargo, cuando se defne la
estructura mediante elementos <div> posicionados es posible que la pgina se rompa y alguna columna se
muestre debajo de otros contenidos.
Utilizando la propiedad display de forma avanzada es posible crear una estructura de pgina que sea
semnticamente correcta, est diseada exclusivamente con CSS y que se comporte exactamente igual que
como lo hacen las tablas.
El siguiente cdigo HTML corresponde a la estructura de una pgina con tres columnas:
...
<div id="contenidos">
<div id="secundario">
Curabitur rutrum...
</div>
<div id="principal">
Lorem ipsum dolor sit amet...
</div>
<div id="lateral">
Nam erat massa...
</div>
</div>
</div>
...
Utilizando las siguientes reglas CSS y la propiedad display es posible hacer que los elementos <div> anteriores
se comporten como si fueran elementos <tr> y <td>:
#contenedor {
display: table;
border-spacing: 5px;
}
#contenidos {
display: table-row;
}
#principal, #secundario, #lateral {
display: table-cell;
}
#principal {
width: 60%;
}
#secundario, #lateral {
width: 20%;
}
El elemento #contenedor se visualiza como una tabla porque se le aplica la propiedaddisplay: table. De esta
forma, se pueden aplicar al elemento #contenedor propiedades exclusivas de las tablas como border-spacing. El
elemento #contenidos se visualiza como si fuese una fla de tabla (etiqueta<tr>). En su interior se encuentran las
tres columnas de la pgina que se visualizan como si fueran tres elementos <td> gracias a la propiedad display:
table-cell.
A continuacin se muestra el resultado obtenido al aplicar estas reglas CSS al cdigo HTML anterior:
Curabitur rutrum
eros a risus. Cum
sociis natoque
penatibus et
magnis dis
parturient
Lorem ipsum dolor sit amet, consectetuer adipiscing

elit. Maecenas non tortor. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Sed fermentum lorem a velit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit.
Proin sodales, enim in volutpat vehicula, leo turpis
Nam erat massa,

blandit in,
dapibus sit
amet, vestibulum
et, augue.
Suspendisse ac
montes, nascetur
ridiculus mus. In
molestie suscipit
libero. Cras sem.
Nunc non tellus
et urna mattis
tempor. Nulla nec
tellus a quam
hendrerit
venenatis.
Suspendisse
pellentesque odio
et est.
vehicula magna, ut rutrum arcu lorem ac pede.

Curabitur rutrum eros a risus. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur
ridiculus mus. In molestie suscipit libero. Cras sem.
Nunc non tellus et urna mattis tempor. Nulla nec tellus
a quam hendrerit venenatis. Suspendisse pellentesque
odio et est. Morbi sed nisl sed dui consequat sodales.
Donec porta porta ligula. Nam erat massa, blandit in,
dapibus sit amet, vestibulum et, augue. Suspendisse ac
risus. Duis semper fringilla sem. Praesent augue arcu,
scelerisque nec, ornare malesuada, posuere a, neque.
Nullam nulla nisi, ultrices quis, adipiscing non,
varius ut, dui. Nulla viverra pellentesque sem.
risus.
La estructura de la pgina del ejemplo anterior est diseada exclusivamente con CSS pero se comporta como si
fuera una tabla. Todas las columnas de la pgina tienen la misma altura sin necesidad de recurrir a ningn truco y la
pgina nunca se rompe por muy pequea que se haga la ventana del navegador.
Si visualizas esta pgina con un navegador que soporte correctamente la propiedaddisplay de CSS 2.1, el
ejemplo anterior se ve tal y como muestra la siguiente imagen:
Por ltimo, aunque el estndar CSS 2.1 establece que el valor por defecto de la propiedaddisplay es inline,
todos los navegadores obvian esta recomendacin y asignan por defecto el valor block a los elementos de bloque
y el valor inline a los elementos en lnea.
Compartir
Twitter
Facebook
Google+
clip
display
overfow
visibility
white-space
z-index

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad overfow
Propiedad overfow
Defnicin
Controla el comportamiento de los contenidos que no caben en su elemento contenedor

Valores permitidos

visible
hidden
scroll
auto
inherit
Valor inicial
visible
Se aplica a
Elementos de bloque, celdas de tabla y elementos de tipo inline-block

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/visufx.html#propdef-overfow
Ejemplos de uso
Si no se establece la propiedad width sobre un elemento, su tamao se calcula automticamente en funcin de si
es un elemento de bloque o en lnea, en funcin del tamao del elemento contenedor en el que se encuentra y en
funcin de algunos otros parmetros.
De la misma forma, si no se establece la propiedadheight sobre un elemento, su valor por defecto esauto, lo que
signifca que el navegador muestra ese elemento con la altura necesaria para que sus contenidos se vean
completamente.
En el diseo de pginas web es habitual establecer la anchura de los elementos mediante la propiedadwidth para
crear las columnas de contenidos. Sin embargo, el uso de la propiedad height es mucho ms limitado, ya que se
suele dejar que el navegador calcule automticamente la altura necesaria para cada elemento.
El siguiente ejemplo muestra cmo el navegador establece automticamente diferentes alturas para un mismo
elemento en funcin de su anchura:
width: 90%; height: auto Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo
eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor
dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.
width: 50%; height: auto Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Fusce ut leo eu ipsum
faucibus pretium. Donec iaculis lorem eleifend mi
tempor porttitor. Integer porttitor dui vel dui.
Donec ornare adipiscing pede. Proin elementum augue
ut magna.
El principal motivo por el que no suele establecerse la altura de los elementos es que normalmente no se conoce
su contenido exacto. Si por ejemplo se utiliza un elemento <div> para mostrar la descripcin de un producto o el
texto de una noticia, no es posible fjar la altura correcta de ese <div>, ya que variar para cada producto o noticia.
Cuando se establece una altura ms pequea que la necesaria para mostrar los contenidos de un elemento, el
resultado es el que muestra el siguiente ejemplo:
width: 50%; height: 50px Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Fusce ut leo eu ipsum
faucibus pretium. Donec iaculis lorem eleifend mi
tempor porttitor. Integer porttitor dui vel dui.
Donec ornare adipiscing pede. Proin elementum augue
ut magna.
El estndar de CSS 2.1 indica que cuando los contenidos de un elemento no caben en su interior, el navegador
debe mostrarlos aunque se salgan del elemento y se solapen con los elementos adyacentes. Afortunadamente, la
propiedad overfow permite modifcar este comportamiento por defecto.
El valor por defecto de la propiedad overfow es visible, que es el comportamiento que hace que los contenidos
se salgan del elemento y sean completamente visibles. El siguiente valor que defne overfow es hidden, que hace
que el navegador oculte todos los contenidos que se salen de la caja del elemento:
overfow: visible Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Fusce ut leo eu
ipsum faucibus pretium. Donec iaculis lorem
overfow: hidden Lorem ipsum dolor sit amet,

i
f
ib
ti
D
i
li l
El valor hidden se utiliza cuando no se puede controlar la cantidad de contenidos que se van a incluir dentro de un
elemento pero al mismo tiempo se quiere controlar de forma precisa el tamao de cada elemento de la pgina.
En ocasiones, el valor hidden no es apropiado porque es necesario que se vean todos los contenidos. Para estos
casos, la propiedad overfow incluye el valor scroll, que hace que el navegador muestre barras de scroll sobre un
elemento cuando sus contenidos no caben en la caja del elemento:
overfow: scroll Lorem ipsum dolor sit amet,

i
f
ib
i
i
li l
Si se establece la propiedad overfow: scroll sobre un elemento, el estndar indica que los navegadores deben
mostrar siempre en ese elemento las dos barras de scroll (la vertical y la horizontal) aunque sus contenidos no se
salgan o slo se salgan por un sitio. En el medio print el contenido se imprime ntegramente, por lo que es
equivalente al valor visible.
Las barras de scroll siempre se muestran en el interior de las cajas (antes que los bordes), por lo que no aumentan
el tamao total de la caja del elemento, pero s que disminuyen el sitio disponible para mostrar sus contenidos.
Por ltimo, la propiedad overfow tambin defne el valor auto, que permite que cada navegador tome la decisin
sobre si es necesario o no mostrar las barras de scroll. Aunque la decisin depende del navegador, el estndar de
CSS 2.1 indica que si el contenido se sale del elemento, se deben mostrar barras de scroll:
overfow: auto Lorem ipsum dolor sit amet,

i
f
ib
ti
D
i
li l
El valor auto es el preferido por los diseadores, ya que: * Si el contenido cabe dentro del elemento, no se
muestra ninguna barra de scroll. * Si el contenido se sale por un lado, slo se muestra la barra descroll de ese
lado (horizontal o vertical). * Si el contenido se sale por todos los lados, se muestran las dos barras de scroll.
Compartir
Twitter
Facebook
Google+
clip
display
overfow
visibility
white-space
z-index

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad visibility
Propiedad visibility
Defnicin
Permite hacer visibles o invisibles las cajas de los elementos

Valores permitidos

visible
hidden
collapse
inherit
Valor inicial
visible
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/visufx.html#propdef-visibility
Ejemplos de uso
La propiedad visibility es similar a la propiedad display pero mucho ms limitada. Mientras que display permite
cambiar el tipo de caja de un elemento, la propiedad visibility slo permite hacer visible o invisible una caja.
El valor por defecto de visibility es visible, que hace que la caja del elemento se vea de forma normal. Otro
de los valores defnidos por visibility es hidden, que hace que la caja del elemento sea invisible.
El efecto de hacer invisible una caja mediante visibility: hidden es muy diferente al efecto de ocultarla
mediante display: none . El siguiente ejemplo muestra el resultado de hacer invisible y ocultar la caja 2:
Caja 2 = visibility: visible
1
Caja 2 = visibility: hidden

1
Caja 2 = display: none

1
Cuando una caja es invisible (visibility: hidden) no se muestra pero sigue ocupando sitio, por lo que los
elementos adyacentes se comportan como si fuera visible. Por su parte, una caja oculta (display: none ) ni se ve
ni ocupa sitio, por lo que es como si no existiera en la pgina y los elementos adyacentes se ven afectados.
Adems, cuando una caja se oculta todos sus elementos interiores se ocultan automticamente. De la misma
forma, cuando una caja se hace invisible sus elementos interiores tambin se hacen invisibles automticamente. La
diferencia es que los elementos interiores invisibles se pueden volver a mostrar si se utiliza la propiedad
visibility: visible
Por ltimo, la propiedad visibility defne el valor collapse, que slo se utiliza en las flas y columnas de las
tablas. Si se emplea el valor collapse en cualquier elemento que no sea una fla, grupo de flas, columna o grupo
de columnas, tiene el mismo efecto que el valor hidden.
La propiedad visibility es mucho ms limitada que la propiedad display, pero puede resultar til para crear
efectos visuales dinmicos cuando se utiliza junto con JavaScript.
Compartir
Twitter
Facebook
Google+
clip
display
overfow
visibility
white-space
z-index

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad whitespace
Propiedad white-space
Defnicin
Establece el tratamiento de los espacios en blanco

Valores permitidos

normal
pre
nowrap
pre-wrap
pre-line
inherit
Valor inicial
normal
Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/text.html#propdef-white-space
Ejemplos de uso
El tratamiento de los espacios en blanco en el cdigo HTML es una de las caractersticas ms desconcertantes
para los diseadores web que comienzan a crear pginas. A continuacin se muestra cmo visualizan los
navegadores dos prrafos de ejemplo:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputate lobortis. Vivamus
fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit pede. Nulla
cursus porta sem. Donec mollis nunc in leo.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputate lobortis. Vivamus
fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit pede. Nulla
cursus porta sem. Donec mollis nunc in leo.
Aunque los dos prrafos anteriores se visualizan de la misma forma, en realidad su cdigo HTML es
completamente diferente:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputate
lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit
sem pede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.</p>
<p>Lorem ipsum
dolor
sit amet,
elit.
Sed non sem
quis tellus vulputate
lobortis. Vivamus fermentum, tortor
id ornare
ultrices, ligula ipsum tincidunt
pede, et blandit
sem pede suscipit
pede. Nulla cursus
porta sem. Donec mollis nunc in leo.</p>
El segundo prrafo contiene numerosos espacios en blanco y saltos de lnea. Sin embargo, como los navegadores
eliminan automticamente todos los espacios en blanco sobrantes, los dos prrafos se ven exactamente igual.
En el estndar HTML un "espacio en blanco" puede ser un salto de lnea, un tabulador y un espacio en blanco
normal. Los navegadores eliminan de forma automtica todos los espacios en blanco sobrantes salvo el espacio
en blanco que separa las palabras del texto.
La nica excepcin de este comportamiento es la etiqueta<pre> de HTML, utilizada para mostrar texto que ya
tiene formato (su nombre viene de preformateado) y que por tanto respeta todos los espacios en blanco y todos
los saltos de lnea:
Lorem ipsum
dolor
sit amet,
elit.
Sed non sem
id ornare
pede, et blandit
sem pede suscipit
pede. Nulla cursus
porta sem. Donec mollis nunc in leo.
El cdigo HTML del ejemplo anterior es:

<pre>Lorem ipsum
dolor
sit amet,
elit.
Sed non sem
id ornare
pede, et blandit
sem pede suscipit
pede. Nulla cursus
porta sem. Donec mollis nunc in leo.</pre>
La propiedad white-space permite variar el comportamiento de los espacios en blanco. El estndar CSS 2.1
defne cinco modelos diferentes de tratamiento de espacios en blanco:
normal: los espacios en blanco sobrantes y los saltos de lnea se eliminan. No obstante, el texto se muestra en
tantas lneas como sea necesario para que sus contenidos no se salgan del elemento contenedor.
pre: no se eliminan los espacios en blanco sobrantes y slo se muestran los saltos de lnea incluidos en el texto
original. Este comportamiento puede provocar que los contenidos de texto se salgan de su elemento
contenedor.
nowrap: se comporta igual que normal en los espacios en blanco, pero no aade saltos de lnea en el texto
original, por lo que los contenidos se pueden salir de su elemento contenedor.

pre-wrap: se comporta igual que pre, pero se introducen los saltos de lnea que sean necesarios para que los
contenidos de texto nunca se salgan de su elemento contenedor.

pre-line: se eliminan los espacios en blanco sobrantes, pero se respetan los saltos de lnea originales y se
crean tantos saltos de lnea como sean necesarios para que el contenido de texto no se salga de su elemento
contenedor.
Como las explicaciones includas en el estndar CSS 2.1 pueden llegar a ser confusas, la siguiente tabla resume el
comportamiento de cada valor:
Valor
Respeta espacios en
blanco
Respeta saltos de
lnea
Ajusta las lneas
normal
no
no
si
pre
si
si
no
nowrap
no
no
no
pre-wrap
si
si
si
pre-line
no
si
si
A continuacin se muestra el efecto de cada modelo de tratamiento de espacios en blanco sobre un mismo
prrafo que contiene espacios en blanco y saltos de lnea y que se encuentra dentro de un elemento contenedor
de anchura limitada:
[white-space: normal] Lorem ipsum dolor sit amet,

consectetuer adipiscing elit. Vestibulum dictum.
Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.
[white-space: pre] Lorem ipsum dolor sit amet,

Vestibulum
dictum. Class aptent taciti
sociosqu ad litora
torquent per
conubia
nostra, per inceptos
hymenaeos.
[white-space: pre-wrap] Lorem ipsum dolor sit amet,

Vestibulum
dictum. Class aptent taciti
sociosqu ad litora
torquent per
conubia
nostra, per inceptos
hymenaeos.
[white-space: nowrap] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum dictum. Class apte
[white-space: pre-line] Lorem ipsum dolor sit amet,

Vestibulum dictum. Class aptent taciti sociosqu ad
litora torquent per
conubia nostra, per inceptos hymenaeos.
Los valores ms utilizados son normal, pre y pre-wrap. El valor normal se puede emplear por ejemplo en un
elemento <pre> que se quiere mostrar como si fuera un prrafo:
<pre>Lorem ipsum
dolor
sit amet,
elit.
Sed non sem
id ornare
pede, et blandit
sem pede suscipit
pede. Nulla cursus
porta sem. Donec mollis nunc in leo.</pre>
<pre style="white-space: normal">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Se
d non sem quis tellus vulputate lobortis. Vivamus fermentum, tortor id ornare ultrices, ligul
a ipsum tincidunt pede, et blandit sem pede suscipit pede. Nulla cursus porta sem. Donec molli
s nunc in leo.</pre>
De la misma forma, el valor pre se puede emplear en un prrafo de texto que se quiere mostrar como si fuera un
elemento <pre>:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputate lobortis.
Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit pede.
Nulla cursus porta sem. Donec mollis nunc in leo.</p>
<p style="white-space: pre">Lorem ipsum

dolor
sit amet,
Sed non sem
id ornare
pede, et blandit
sem pede suscipit
pede. Nulla cursus
porta sem. Donec mollis nunc in leo.</p>
elit.
Por ltimo, el valor pre-wrap es muy til cuando se quiere mostrar un texto de la forma ms fel posible a su
formato original (respetando espacios en blanco y saltos de lnea) pero sin que el contenido de texto se salga de su
elemento contenedor.
Compartir
Twitter
Facebook
Google+
clip
display
overfow
visibility
white-space
z-index

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad z-index
Propiedad z-index
Defnicin
Indica el nivel visual en el que se muestra el elemento

Valores permitidos

auto
Un nmero entero
inherit
Valor inicial
auto
Se aplica a
Elementos posicionados
Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS2/visuren.html#propdef-z-index
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
clip
display
overfow
visibility
white-space
z-index

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad bordercollapse
Propiedad border-collapse
Defnicin
Selecciona el modelo de bordes de las celdas de la tabla

Valores permitidos

collapse
separate
inherit
Valor inicial
separate
Se aplica a
Los elementos de tipo tabla

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/tables.html#propdef-border-collapse
Ejemplos de uso
El estndar de CSS 2.1 establece que existen dos modelos de bordes para las celdas de las tablas. El primer
modelo es el "separado" separate) y hace que todas las celdas de la tabla muestren sus cuatro bordes. El
segundo modelo es el "fusionado" collapse) y combina los bordes de las celdas adyacentes.
El modelo de bordes infuye en la esttica de los bordes de las celdas, pero es independiente de las propiedades
border, border-width, border-color y border-style. El modelo de bordes se establece mediante la propiedad
border-collapse .
Los navegadores utilizan por defecto el modelo de bordes separate, que hace que todas las celdas estn
separadas y muestren siempre sus cuatro bordes. La tabla del siguiente ejemplo emplea el modelo separate:
Celda 1 - 1
Celda 1 - 2
Celda 1 - 3
Celda 2 - 1
Celda 2 - 2
Celda 2 - 3
Celda 3 - 1
Celda 3 - 2
Celda 3 - 3
A continuacin se muestra el cdigo CSS correspondiente a la tabla anterior:

table {
border-collapse: separate;
}
Casi siempre que se utiliza la propiedad border-collapse: separate , tambin se emplea la propiedad borderspacing para controlar la separacin entre las celdas.
En el modelo de bordes separados, todas las celdas muestran siempre sus cuatro bordes, independientemente
de la separacin entre las celdas. En el siguiente ejemplo se utiliza el modelo de bordes separados y se reduce la
separacin a 0px:
Celda 1 - 1
Celda 1 - 2
Celda 1 - 3
Celda 2 - 1
Celda 2 - 2
Celda 2 - 3
Celda 3 - 1
Celda 3 - 2
Celda 3 - 3
El aspecto fnal de la tabla anterior puede que no sea el deseado, porque los bordes de las celdas adyacentes se
muestran como un borde de grosor doble, ya que en realidad son dos bordes iguales sin separacin entre ellos.
El otro modelo de bordes disponible se denomina collapse y consiste en la fusin automtica de todos los bordes
adyacentes. A continuacin se muestra la misma tabla del ejemplo anterior pero utilizando el modelo collapse:
Celda 1 - 1
Celda 1 - 2
Celda 1 - 3
Celda 2 - 1
Celda 2 - 2
Celda 2 - 3
Celda 3 - 1
Celda 3 - 2
Celda 3 - 3
La otra gran diferencia entre los dos modelos de bordes es que en el modeloseparate las flas, grupos de flas,
columnas y grupos de columnas no pueden establecer bordes.
A continuacin se muestran dos tablas idnticas que utilizan diferentes modelos de bordes:
Celda 1 - 1
Celda 1 - 2
Celda 1 - 3
Celda 2 - 1
Celda 2 - 2
Celda 2 - 3
Celda 3 - 1
Celda 3 - 2
Celda 3 - 3
Celda 1 - 1
Celda 1 - 2
Celda 1 - 3
Celda 2 - 1
Celda 2 - 2
Celda 2 - 3
Celda 3 - 1
Celda 3 - 2
Celda 3 - 3
Las dos tablas del ejemplo anterior establecen los mismos bordes en todas sus flas. Sin embargo, como la
primera tabla utiliza el modelo de bordes separate, los navegadores ignoran todos los bordes de sus flas.
Cuando todos los bordes son exactamente iguales, la fusin de los bordes adyacentes es trivial, ya que consiste
en mostrar nicamente uno de los dos bordes existentes en la interseccin de las dos celdas. Por lo tanto, en
realidad cada celda slo muestra medio borde.
Sin embargo, cuando los bordes adyacentes tienen diferentes estilos y grosores, el navegador debe determinar
cul de los dos bordes debe ser representado. El estndar de CSS 2.1 defne de forma precisa el algoritmo que
se sigue para determinar el borde ganador:
1. Los bordes defnidos con un estilo border-style: hidden tienen la mxima prioridad. Los bordes con este
estilo eliminan cualquier otro borde adyacente y por tanto, no se muestra ningn borde.
2. Los bordes defnidos con el estilo border-style: none tienen la mnima prioridad. Slo se oculta este borde si
todos los dems bordes adyacentes tambin tienen un estilo none.
3. Si ningn borde adyacente es hidden y al menos uno de ellos no es none, siempre gana el borde ms ancho.
4. Si en el caso anterior varios bordes son de la misma anchura, el ganador se determina mediante el estilo del
borde. La lista de estilos de bordes ordenados de ms a menos prioridad es la siguiente: double, solid,
dashed, dotted, ridge, outset, groove, inset.
5. Si los bordes adyacentes slo se diferencian en su color, la prioridad la determina el elemento que defne el
borde. Los bordes de las celdas son los ms prioritarios, seguidos por orden de prioridad por: flas, grupos de
flas, columnas, grupos de columnas y tabla.
6. Si se mantiene la igualdad entre los bordes adyacentes, gana el borde que se encuentre ms a la izquierda
(suponiendo que el valor de la propiedad direction de la tabla es ltr).
A continuacin se muestra un ejemplo complejo de resolucin de confictos al fusionar bordes muy diferentes:
Celda 1 - 1
Celda 1 - 2
Celda 1 - 3
Celda 2 - 1
Celda 2 - 2
Celda 2 - 3
Celda 3 - 1
Celda 3 - 2
Celda 3 - 3
Si el navegador que utilizas para ver esta pgina sigue correctamente los estndares, el aspecto de la tabla anterior
debe ser exactamente como el de la siguiente imagen:
A continuacin se muestra el cdigo HTML y CSS del ejemplo anterior:

<table style="border: thick solid red; border-collapse: collapse;" summary="Descripcin de la t
abla y su contenido">
<tbody>
<tr style="border: medium dashed black">
<td style="border: double blue">Celda 1 - 1</td>
<td style="border: solid green">Celda 1 - 2</td>
<td style="border: hidden">Celda 1 - 3</td>
</tr>
<tr>
<td style="border: medium solid blue">Celda 2 - 1</td>
<td style="border: medium solid green">Celda 2 - 2</td>
<td>Celda 2 - 3</td>
</tr>
<tr style="border: dashed black">
<td style="border: medium dotted">Celda 3 - 2</td>
</tr>
</tbody>
</table>
Por ltimo, existen tres estilos de borde que tienen un signifcado especial cuando se utilizan en las tablas:
hidden, visualmente es idntico a none, pero si se utiliza el modelo de bordescollapse, tiene la mxima
prioridad e impide que se vea cualquier otro borde adyacente.
inset, en el modelo de bordes collapse se visualiza igual que el estilo ridge.

outset, en el modelo de bordes collapse se visualiza igual que el estilo groove.
Compartir
Twitter
Facebook
Google+
border-collapse
border-spacing
caption-side
empty-cells
table-layout

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad borderspacing
Propiedad border-spacing
Defnicin
Establece la separacin de las celdas de la tabla

Valores permitidos
Existen dos opciones diferentes para establecer el valor o valores de esta propiedad:
Una medida, seguida opcionalmente por otra medida
inherit
Valor inicial
0
Se aplica a

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/tables.html#propdef-border-spacing
Ejemplos de uso
La propiedad border-spacing establece la separacin entre las celdas de la tabla. Por su propia defnicin, esta
propiedad slo tiene sentido cuando se utiliza el modelo de bordes separados (controlado mediante la propiedad
border-collapse).
Si slo se indica una medida, hace referencia a la separacin vertical y horizontal entre todas las celdas:
Celda 1 - 1
Celda 1 - 2
Celda 1 - 3
Celda 2 - 1
Celda 2 - 2
Celda 2 - 3
Celda 3 - 1
Celda 3 - 2
Celda 3 - 3
Las celdas de la tabla del ejemplo anterior estn separadas 5px entre s:
table {
}
Si se indican dos medidas, la primera hace referencia a la separacin horizontal y la segunda es la separacin
vertical entre las celdas:
Celda 1 - 1
Celda 1 - 2
Celda 1 - 3
Celda 2 - 1
Celda 2 - 2
Celda 2 - 3
Celda 3 - 1
Celda 3 - 2
Celda 3 - 3
En la tabla del ejemplo anterior, las celdas estn mucho ms separadas verticalmente que horizontalmente, ya que
la regla CSS utilizada es:
table {
border-spacing: 5px 15px;
}
Si la tabla tambin tiene un borde visible, las celdas adyacentes pueden mostrarse muy juntas, ya que su
separacin es la que establece la propiedad border-spacing:
Celda 1 - 1
Celda 1 - 2
Celda 1 - 3
Celda 2 - 1
Celda 2 - 2
Celda 2 - 3
Celda 3 - 1
Celda 3 - 2
Celda 3 - 3
Para aumentar la separacin entre los bordes de la tabla y las celdas adyacentes, se emplea la propiedadpadding
sobre la tabla para aadir espacio de relleno en el lado o lados deseados:
Celda 1 - 1
Celda 1 - 2
Celda 1 - 3
Celda 2 - 1
Celda 2 - 2
Celda 2 - 3
Celda 3 - 1
Celda 3 - 2
Celda 3 - 3
Compartir
Twitter
Facebook
Google+
border-collapse
border-spacing
caption-side
empty-cells
table-layout

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad caption-side
Propiedad caption-side
Defnicin
Establece la posicin vertical del ttulo o leyenda de una tabla

Valores permitidos

top
bottom
inherit
Valor inicial
top
Se aplica a
Los elementos de tipo tabla que tengan un ttulo o leyenda

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/tables.html#propdef-caption-side
Ejemplos de uso
La propiedad caption-side establece la posicin vertical del ttulo o leyenda de una tabla. Las tablas XHTML
indican su ttulo mediante la etiqueta <caption>, que siempre se incluye en el interior de la etiqueta <table>:
<table summary="Descripcin de la tabla y su contenido">

<caption>Ttulo de la tabla</caption>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
Por defecto, el ttulo siempre se muestra en la parte superior de la tabla:

Ttulo de la tabla
Celda 1 - 1
Celda 1 - 2
Celda 1 - 3
Celda 2 - 1
Celda 2 - 2
Celda 2 - 3
Celda 3 - 1
Celda 3 - 2
Celda 3 - 3
La propiedad caption-side dispone de dos valores para controlar la posicin vertical del ttulo de la tabla:top es
el valor por defecto y muestra el ttulo antes de la tabla, mientras que bottom muestra el ttulo despus de la tabla.
El siguiente ejemplo es el resultado de aplicar la propiedad caption-side: bottom a la tabla del ejemplo anterior:
Celda 1 - 1
Celda 1 - 2
Celda 1 - 3
Celda 2 - 1
Celda 2 - 2
Celda 2 - 3
Celda 3 - 1
Celda 3 - 2
Celda 3 - 3
Ttulo de la tabla
Si utilizas el navegador Internet Explorer 7 o alguna de sus versiones anteriores, el ttulo de la tabla sigue
apareciendo en la parte superior, ya que ese navegador no soporta la propiedad caption-side .
La posicin horizontal del ttulo se controla mediante la propiedadtext-align sobre el elemento <caption>. El
siguiente cdigo se emplea para mostrar el ttulo de la tabla centrado en su parte inferior:
<table style="caption-side: bottom" summary="Descripcin de la tabla y su contenido">

<caption style="text-align: center">Ttulo de la tabla</caption>
<thead>
...
...
</table>
A continuacin se muestra cmo visualizan los navegadores el ejemplo anterior:

Celda 1 - 1
Celda 1 - 2
Celda 1 - 3
Celda 2 - 1
Celda 2 - 2
Celda 2 - 3
Celda 3 - 1
Celda 3 - 2
Celda 3 - 3
Ttulo de la tabla
El estndar CSS 2.1 establece que los navegadores agrupan cada tabla y su ttulo mediante un elementoinvisible.
Por ello, cuando se establecen las propiedades position, foat, cualquier propiedad margin, top, right, bottom y
left sobre la tabla, el elemento <caption> tambin se ve afectado porque en realidad esas propiedades se
aplican sobre el elemento invisible que encierra a la tabla y su ttulo.

Adems, los navegadores fusionan de forma automtica los mrgenes verticales de la tabla y su ttulo. Si el ttulo se
encuentra en la parte superior de la tabla, se fusionan los margin-top de los elementos <table> y <caption>. Si el
ttulo se encuentra en la parte inferior de la tabla, se fusionan los margin-bottom de los elementos <table> y
<caption>.
Compartir
Twitter
Facebook
Google+
border-collapse
border-spacing
caption-side
empty-cells
table-layout

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad empty-cells
Propiedad empty-cells
Defnicin
Muestra u oculta las celdas vacas de una tabla

Valores permitidos

show
hide
inherit
Valor inicial
show
Se aplica a
Los elementos de tipo celda de tabla

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/tables.html#propdef-empty-cells
Ejemplos de uso
La propiedad empty-cells permite controlar la visualizacin de las celdas vacas de una tabla. Por defecto, los
navegadores muestran todas las celdas de las tablas, independientemente de su contenido:
Celda 1 - 1
Celda 1 - 2
Celda 2 - 1
Celda 2 - 2
Celda 1 - 3
Celda 3 - 2
El valor por defecto de la propiedad empty-cells es show, que hace que se muestren siempre todas las celdas.
No obstante, si accedes al ejemplo anterior con el navegador Internet Explorer 7 o sus versiones anteriores, no se
visualizan las celdas vacas, tal y como se muestra en la siguiente imagen:
Por otra parte, el valor hide hace que se oculten las celdas vacas. Si en la misma tabla del ejemplo anterior se
establece la propiedad empty-cells: hide, el resultado es el siguiente:
Celda 1 - 1
Celda 1 - 2
Celda 2 - 1
Celda 2 - 2
Celda 1 - 3
Celda 3 - 2
table {
empty-cells: hide;
}
Las celdas ocultas con empty-cells no muestran ningn borde, ni color de fondo ni contenido, pero siguen
ocupando sitio. De esta forma, la estructura de la tabla y la posicin del resto de las celdas no se ven afectadas
por ocultar las celdas vacas.
Para que se oculten las celdas vacas mediante la propiedad empty-cells: hide, la tabla debe utilizar
obligatoriamente el modelo de bordes separate. El siguiente ejemplo modifca el anterior para que la tabla utilice el
modelo de bordes collapse:
Celda 1 - 1
Celda 1 - 2
Celda 2 - 1
Celda 2 - 2
Celda 3 - 2
table {
empty-cells: hide;
Celda 1 - 3
border-collapse: collapse;
}
Aunque la tabla anterior utiliza la propiedad empty-cells: hide, todas las celdas vacas se visualizan igual que el
resto de celdas. El motivo es que la tabla utiliza el modelo de bordes collapse.
Segn el estndar CSS 2.1, una celda vaca es aquella que no tiene ningn contenido o que su contenido est
formado slo por espacios en blanco. En el siguiente ejemplo, la segunda celda de la primera fla slo tiene
espacios en blanco y la segunda celda de la segunda fla tiene los mismos espacios en blanco pero escritos
mediante la entidad HTML
Celda 1 - 1
Celda 2 - 1
Celda 1 - 3
Celda 2 - 3
A continuacin se muestra el cdigo HTML del ejemplo anterior:

<table style="empty-cells: hide; border-collapse: separate; border-spacing: 5px;" summary="Desc
ripcin de la tabla y su contenido">
<tbody>
<tr>
<td>
</td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
Si todas las celdas de una misma fla estn vacas y se indica la propiedadempty-cells: hide, la altura de la fla
es cero y por tanto, en su lugar slo se muestra uno de los dos border-spacing verticales de esa fla.
En la siguiente tabla, la segunda fla slo est formada por celdas vacas, por lo que su altura debe ser cero y el
navegador tambin debe ajustar la separacin vertical entre celdas:
Celda 1 - 1
Celda 1 - 2
Celda 1 - 3
Celda 3 - 1
Celda 3 - 2
Celda 3 - 3
Lamentablemente, la mayora de navegadores actuales no cumplen este comportamiento. Aunque algunos
navegadores asignan a la segunda fla una altura igual a cero, no ajustan la separacin vertical entre flas. Segn el
estndar CSS 2.1, el ejemplo anterior debe visualizarse como muestra la siguiente imagen:
Compartir
Twitter
Facebook
Google+
border-collapse
border-spacing
caption-side
empty-cells
table-layout

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad table-layout
Propiedad table-layout
Defnicin
Establece el algoritmo utilizado para mostrar la tabla

Valores permitidos

auto
fxed
inherit
Valor inicial
auto
Se aplica a

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS21/tables.html#propdef-table_layout
Ejemplos de uso
La propiedad table-layout indica el algoritmo que debe utilizar el navegador para mostrar la tabla. En el estndar
CSS 2.1 slo se defnen dos algoritmos: automtico y fjo.
En el modelo de tabla fjo (valor fxed) la anchura de la tabla y de cada columna es independiente de su contenido.
El navegador slo tiene en cuenta las propiedades width, padding, border y border-spacing para determinar la
anchura de cada columna y de la tabla completa.
En el modelo de tabla automtico (valor auto) la anchura de las columnas depende de su contenido. El navegador
debe disponer de todos los contenidos de la tabla entera para poder aplicar un clculo complejo que determina la
anchura de cada columna.
El siguiente ejemplo muestra dos tablas idnticas que utilizan algoritmos diferentes:
Celda 1 - 1
Celda 1 - 2
Celda 1 - 3
Celda 2 - 1
Celda 2 - 2 - Esta celda tiene un contenido mucho ms largo que las dems
Celda 2 - 3
Celda 3 - 1
Celda 3 - 2
Celda 3 - 3
Celda 1 - 1
Celda 1 - 2
Celda 1 - 3
Celda 2 - 1
Celda 2 - 2 - Esta celda tiene un contenido mucho ms largo que las dems
Celda 2 - 3
Celda 3 - 1
Celda 3 - 2
Celda 3 - 3
La primera tabla del ejemplo anterior sigue el algoritmo auto. Como el contenido de una celda de datos es mucho
ms largo que el resto, la anchura de esa columna es ms grande que el resto de columnas.
Por su parte, la segunda tabla del ejemplo anterior sigue el algoritmofxed. Como la anchura de las columnas es
independiente de su contenido y como ninguna columna ha establecido explcitamente su anchura, el navegador
reparte la anchura de la tabla a partes iguales entre las tres columnas. Por ese motivo, la segunda tabla presenta
una estructura de rejilla mucho ms regular que la primera.
El modelo fxed requiere muchos menos clculos que el modelo auto. Adems, como tampoco es necesario
descargar todos los contenidos de la tabla antes de mostrarla, el modelo fxed es ms rpido que el modelo auto,
sobre todo en las tablas muy complejas.
En el modelo fxed, la estructura de la tabla est determinada por la estructura de su primera fla. Si las siguientes
flas tienen ms columnas que la primera, los navegadores ignoran todas las columnas sobrantes y no las
muestran.
En el estndar CSS 2.1 se detallan los clculos completos de cada algoritmo:
Algoritmo para el diseo fjo de las tablas
Algoritmo para el diseo automtico de las tablas
Compartir
Twitter
Facebook
Google+
border-collapse
border-spacing
caption-side
empty-cells
table-layout

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad list-style-image
Propiedad list-style-image
Defnicin
Establece la imagen que hace de marcador de los elementos de la lista

Valores permitidos

URL
none
inherit
Valor inicial
none
Se aplica a
Todos los elementos de tipo elemento de lista

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/generate.html#propdef-list-style-image
Ejemplos de uso
Por defecto, los navegadores muestran unos pequeos crculos rellenos para cada elemento de las listas no
ordenadas <ul> y una numeracin decimal para los elementos de las listas ordenadas <ol>. Utilizando la
propiedad list-style-type es posible seleccionar otros marcadores entre una serie de marcadores predefnidos.
La mayor limitacin de la propiedad list-style-type es que slo se pueden elegir los marcadores entre 14 valores
predefnidos. De ellos, slo tres marcadores son de tipo grfco, lo que limita el diseo grfco de las listas de
elementos.
Afortunadamente, la propiedad list-style-type permite mostrar cualquier imagen como marcador de los
elementos de cualquier lista. Para ello, slo es necesario indicar la URL de la imagen que se quiere mostrar.
El siguiente ejemplo muestra tres listas de elementos con marcadores grfcos personalizados:
Nullam quis felis
Nullam quis felis
Nullam quis felis
Aliquam erat volutpat
Aenean non mauris
Aenean non mauris
Aenean non mauris
A continuacin se muestra el cdigo CSS del ejemplo anterior:

ul#primera li {
list-style-image: url("imagenes/circulo_verde.png");
}
ul#segunda li {
list-style-image: url("imagenes/fecha_gris.png");
}
ul#tercera li {
list-style-image: url("imagenes/estrella.png");
}
La imagen utilizada como marcador puede ser de cualquier formato reconocido por los navegadores (normalmente
jpeg, gif o png) y puede ser de cualquier tamao. No obstante, si se utiliza una imagen muy grande, los
elementos de la lista se muestran demasiado separados entre s.
Por otra parte, la principal limitacin de la propiedad list-style-image es que no se puede modifcar la posicin
en la que se muestra la imagen del marcador. Adems, tampoco se pueden indicar de forma global diferentes
imgenes para cada elemento de la lista, por lo que normalmente no se utiliza en las listas ordenadas <ol>.
Si se utilizan de forma simultnea las propiedadeslist-style-type y list-style-image, esta ltima tiene prioridad. Si
se considera el siguiente ejemplo:
ul li {
list-style-type: square;
list-style-image: url("imagenes/imagen.png");
}
En el ejemplo anterior, si el navegador puede descargar correctamente la imagen indicada, los elementos de la lista
muestran esa imagen como marcador. En cualquier otro caso, los elementos de la lista muestran el cuadrado
establecido mediante la propiedad list-style-type.
Emplear simultneamente las propiedades list-style-type y list-style-image no slo no es redundante, sino que
es una buena prctica que protege el diseo de la pgina frente a los innumerables errores que pueden provocar
que la imagen del marcador no se pueda descargar.
Compartir
Twitter
Facebook
Google+
list-style-image
list-style-position
list-style-type
list-style

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad list-style-position
Propiedad list-style-position
Defnicin
Establece la posicin del marcador de los elementos de la lista

Valores permitidos

inside
outside
inherit
Valor inicial
outside
Se aplica a

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/generate.html#propdef-list-style-position
Ejemplos de uso
La propiedad list-style-position establece la posicin del marcador de un elemento de lista respecto al
contenido de ese mismo elemento.
El valor por defecto que aplican los navegadores es outside, que hace que el marcador se muestre fuera de la
caja invisible que encierra al contenido del elemento. El otro valor disponible es inside, que hace que el marcador
se muestre dentro de la caja invisible que encierra al contenido del elemento.
Si el contenido de los elementos de la lista ocupa menos de una lnea, no se aprecian las diferencias visuales entre
inside y outside, tal y como se muestra en el siguiente ejemplo:
list-style-position: outside
list-style-position: inside
Nullam quis felis
Nullam quis felis
Aenean non mauris
Aenean non mauris
Sin embargo, cuando el contenido de un elemento de la lista ocupa ms de una lnea, se aprecian claramente las
diferencias visuales entre un marcador externo (outside) y un marcador interno (inside):
list-style-position: outside
list-style-position: inside

elit. Nullam ultrices nibh a neque.

elit. Nullam ultrices nibh a neque.
Integer ac est quis turpis placerat varius. Sed

tempor viverra quam. Praesent in lacus ac lorem
scelerisque consectetuer.
Integer ac est quis turpis placerat varius. Sed

tempor viverra quam. Praesent in lacus ac lorem
scelerisque consectetuer.
Vestibulum pellentesque pretium ligula. Pellentesque

tincidunt. Sed sit amet dui.
Vestibulum pellentesque pretium ligula.

Pellentesque tincidunt. Sed sit amet dui.
El estndar de CSS 2.1 no especifca la posicin exacta de un marcador externo o interno, por lo que si visualizas
esta pgina en diferentes navegadores, se pueden apreciar diferencias visuales en los ejemplos anteriores.
Compartir
Twitter
Facebook
Google+
list-style-image
list-style-position
list-style-type
list-style

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad list-style-type
Propiedad list-style-type
Defnicin
Establece el marcador de los elementos de la lista

Valores permitidos

disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-greek
lower-latin
upper-latin
armenian
georgian
lower-alpha
upper-alpha
none
inherit
Valor inicial
disc
Se aplica a

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/generate.html#propdef-list-style-type
Ejemplos de uso
La propiedad list-style-type establece el marcador que muestra cada elemento de las listas HTML. Por
defecto, los navegadores muestran unos pequeos crculos rellenos para cada elemento de las listas no
ordenadas <ul> y una numeracin decimal para los elementos de las listas ordenadas <ol>:
1. Lorem ipsum dolor sit amet
2. Consectetuer adipiscing elit
Nullam quis felis
3. Nullam quis felis
4. Aliquam erat volutpat
Aenean non mauris
5. Aenean non mauris
La propiedad list-style-type permite modifcar este comportamiento por defecto y elegir el marcador de los
elementos de la lista entre los 14 valores disponibles. Los valores se clasifcan en tres grupos segn sus
caractersticas: grfcos, numricos y alfabticos.
El primer grupo es el de los marcadores grfcos, que muestran pequeos dibujos o iconos en cada elemento de
la lista: * disc: crculo relleno. * circle: crculo vaco. * square: cuadrado.
El aspecto grfco de cada uno de estos marcadores depende del navegador. Por lo tanto, si visualizas esta
pgina con diferentes navegadores, es posible que observes diferencias grfcas en las listas del siguiente ejemplo:
list-style-type: disc
list-style-type: circle
list-style-type: square
Nullam quis felis
Nullam quis felis
Nullam quis felis
Aenean non mauris
Aenean non mauris
Aenean non mauris
A continuacin se muestra como ejemplo la regla CSS necesaria para mostrar los cuadrados como marcador de
los elementos de la lista:
ul li {
}
La principal limitacin de los marcadores grfcos es que slo se pueden utilizar los tres dibujos predefnidos y no
se puede modifcar ni su tamao ni su color. De hecho, los marcadores grfcos siempre se muestran del mismo
color y tamao que el texto de cada elemento de la lista:

Nullam quis felis

Aenean non mauris

Si se quieren utilizar imgenes propias en los marcadores de una lista, se debe utilizar la propiedadlist-style o liststyle-image. No obstante, si no se puede visualizar la imagen establecida, siempre se muestra alguno de los
marcadores predefnidos.
El segundo grupo de marcadores es el numrico, compuesto por los siguientes valores: *decimal: nmeros
decimales empezando por el nmero 1. * decimal-leading-zero : nmeros decimales con tantos ceros a la
izquierda como sean necesarios para que todos los nmeros ocupen el mismo espacio (01, 02,, 03, ..., 98, 99). *
lower-roman: nmeros romanos en minsculas (i, ii, iii, iv, ...) * upper-roman: nmeros romanos en
maysculas (I, II, III, IV, ...) * georgian: nmeros georgianos. * armenian: nmeros armenios.
A continuacin se muestran ejemplos de todos los marcadores de tipo numrico:
1. list-style-type: decimal
01. list-style-type: decimal-leading-zero
i. list-style-type: lower-roman
i. Lorem ipsum dolor sit amet
i. Consectetuer adipiscing elit
v. Nullam quis felis
v. Aliquam erat volutpat
i. Aenean non mauris
I. list-style-type: upper-roman
II. Lorem ipsum dolor sit amet
III. Consectetuer adipiscing elit
IV. Nullam quis felis
V. Aliquam erat volutpat
VI. Aenean non mauris
. list-style-type: georgian
. list-style-type: armenian
. Lorem ipsum dolor sit amet
. Consectetuer adipiscing elit
. Nullam quis felis
. Nullam quis felis
. Aliquam erat volutpat
. Aenean non mauris
. Aenean non mauris
A continuacin se muestra como ejemplo la regla CSS necesaria para mostrar los nmeros romanos en mayscula
como marcador de los elementos de la lista:
ol li {
list-style-type: upper-roman;
}
El navegador Internet Explorer 7 y sus versiones anteriores no soportan los valoresgeorgian y armenian y los
sustituyen por los marcadores por defecto de las listas.
El ltimo grupo de marcadores predefnidos es el de los marcadores alfabticos: *lower-latin y lower-alpha:
letras minsculas del alfabeto occidental (a, b, ... z, aa, ab, ..., az). * upper-latin y upper-alpha: letras
maysculas del alfabeto occidental (A, B, ... Z, AA, AB, ..., AZ). * lower-greek: letras minsculas del alfabeto griego.
A continuacin se muestran ejemplos de todos los marcadores de tipo alfabtico:
a. list-style-type: lower-latin
A. list-style-type: upper-latin
. list-style-type: lower-greek
b. Lorem ipsum dolor sit amet
B. Lorem ipsum dolor sit amet
c. Consectetuer adipiscing elit
C. Consectetuer adipiscing elit
d. Nullam quis felis
D. Nullam quis felis
. Nullam quis felis
e. Aliquam erat volutpat
E. Aliquam erat volutpat
f. Aenean non mauris
F. Aenean non mauris
. Aenean non mauris
A continuacin se muestra como ejemplo la regla CSS necesaria para mostrar las letras griegas como marcador
de los elementos de la lista:
ol li {
list-style-type: lower-greek;
}
Los marcadores de cualquier tipo se visualizan correctamente tanto en las listas ordenadas <ol>
(
) como en las
listas no ordenadas (<ul>). No obstante, por la propia defnicin de cada tipo de lista, lo ms correcto es utilizar
marcadores grfcos slo en las listas no ordenadas y los marcadores numricos y alfabticos slo en las listas
ordenadas.
Para no mostrar ningn marcador en una lista de elementos, se utiliza el valornone tanto en las listas ordenadas
como en las no ordenadas:
Lista <ul>, list-style-type: none
Lista <ol>, list-style-type: none
Nullam quis felis
Nullam quis felis
Aenean non mauris
Aenean non mauris
Por ltimo, los marcadores de las listas tambin forman parte de uno de los errores ms conocidos y molestos del
navegador Internet Explorer 7 y sus versiones anteriores. Si se posicionan de forma fotante los elementos de una
lista mediante la propiedad foat, los marcadores de los elementos desaparecen en los navegadores Internet
Explorer 7 y versiones anteriores.
La lista del siguiente ejemplo utiliza el valor square como marcador de todos sus elementos. No obstante, como
los elementos de la lista estn posicionados de forma fotante, en el navegador Internet Explorer 7 no se visualizan
los marcadores:
Nullam quis felis
Aenean non mauris
Compartir
Twitter
Facebook
Google+
list-style-image
list-style-position
list-style-type
list-style

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad list-style
Propiedad list-style
Defnicin
Establece algunas o todas las propiedades del marcador de los elementos de la lista
Valores permitidos

list-style-type
list-style-position
list-style-image
inherit
Valor inicial

Se aplica a

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/generate.html#propdef-list-style
Ejemplos de uso
La propiedad list-style es una de las "propiedades shorthand" que defne CSS y que se utilizan para establecer
de forma abreviada el valor de una o ms propiedades individuales. En concreto, list-style permite establecer
simultneamente las tres propiedades relacionadas con los marcadores de los elementos de una lista.
Como la mayora de propiedades shorthand, es posible indicar alguno o todos los valores permitidos y en cualquier
orden. De esta forma, todas las reglas CSS siguientes son correctas:
ul
ul
ul
ol
ol
{
{
{
{
{
list-style:
list-style:
list-style:
list-style:
list-style:
square inside; }
outside circle url("imagenes/cuadrado.png"); }
disc url("imagenes/circulo.png"); }
inside lower-roman; }
upper-alpha outside; }
El uso de la propiedad list-style es muy comn porque una de las buenas prcticas con los marcadores de las
listas consiste en establecer de forma simultnea un marcador por defecto y un marcador propio:
ul li {
list-style-image: url("imagenes/imagen.png");
}
De esta forma, si en el ejemplo anterior el navegador puede descargar correctamente la imagen establecida
mediante la propiedad list-style-image, los elementos de la lista muestran esa imagen como marcador. En cualquier
otro caso, los elementos de la lista muestran el cuadrado establecido mediante la propiedad list-style-type.
Utilizando la propiedad list-style se puede escribir la regla CSS anterior de forma mucho ms compacta:
ul li {
list-style: square url("imagenes/imagen.png");
}
La propiedad list-style tambin se utiliza habitualmente cuando no se quiere mostrar ningn marcador en los
elementos de una lista:
ul {
list-style: none;
}
Por ltimo, el estndar de CSS 2.1 recomienda establecer las propiedades de los marcadores directamente sobre
las listas (etiquetas <ul> y <ol>) y no sobre los elementos individuales (etiqueta <li>).
Compartir
Twitter
Facebook
Google+
list-style-image
list-style-position
list-style-type
list-style

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad content
Propiedad content
Defnicin
Genera contenido de forma dinmica

Valores permitidos
Existen cuatro opciones diferentes para establecer el valor o valores de esta propiedad:
1. Uno o ms de los siguientes valores:
cadena de texto
URL
contador
valor de un atributo
open-quote
close-quote
no-open-quote
no-close-quote
normal
3. none
4. inherit
Valor inicial
normal
Se aplica a
Solamente a los pseudo-elementos :before y :after

Vlida en
todos los medios

Se hereda
no
2.
w3.org/TR/CSS21/generate.html#propdef-content
Ejemplos de uso
La propiedad content es una de las propiedades CSS ms poderosas y a la vez ms controvertidas. La
propiedad content se emplea para generar nuevo contenido de forma dinmica e insertarlo en la pgina HTML.
Como CSS es un lenguaje de hojas de estilos cuyo nico propsito es controlar el aspecto o presentacin de los
contenidos, algunos diseadores defenden que no es correcto generar nuevos contenidos mediante CSS.
En primer lugar, el estndar CSS 2.1 indica que la propiedad content slo puede utilizarse en los pseudoelementos :before y :after. Como su propio nombre indica, estospseudo-elementos permiten seleccionar (y por
tanto modifcar) la parte anterior o posterior de un elemento de la pgina.
El siguiente ejemplo muestra cmo aadir la palabra Captulo delante del contenido de cada ttulo de seccin
<h1>:
h1:before {
content: "Captulo ";
}
Los pseudo-elementos :before y :after se pueden utilizar sobre cualquier elemento de la pgina. El siguiente
ejemplo aade la palabra Nota: delante de cada prrafo cuya clase CSS sea nota:
p.nota:before {
content: "Nota: ";
}
Combinando las propiedades content y quotes con los pseudo-elementos :before y :after, se pueden aadir
de forma dinmica comillas de apertura y de cierre a todos los elementos <blockquote> de la pgina:
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
blockquote {
quotes: "" "";
}
Los contenidos insertados dinmicamente en un elemento son a todos los efectos parte de ese mismo elemento,
por lo que heredan el valor de todas sus propiedades CSS.
Los dos valores ms sencillos de la propiedad content son none y normal. En la prctica, estos dos valores tienen
el mismo efecto ya que hacen que el pseudo-elemento no se genere.
El siguiente valor que se puede indicar en la propiedad content es una cadena de texto. En el estndar CSS 2.1,
una cadena de texto es un conjunto de uno o ms caracteres encerrados por las comillas dobles (") o las comillas
simples ('). Si la cadena contiene comillas dobles, se encierra con las comillas simples y viceversa. Si una cadena
de texto tiene tanto comillas simples como dobles, las comillas problemticas se modifcan y se les aade la barra
invertida \ por delante:
p:before {
content: "Contenido generado \"dinmicamente\" mediante CSS. ";
}
#ultimo:after {
content: " Fin de los 'contenidos' de la pgina.";
}
Las cadenas de texto slo permiten incluir texto bsico. Si se incluye alguna etiqueta HTML en la cadena de texto,
el navegador muestra la etiqueta tal y como est escrita, ya que no las interpreta. Para incluir un salto de lnea en el
contenido generado, se utiliza el caracter especial \A
El siguiente valor aceptado por la propiedad content es una URL, que suele utilizarse para indicar la URL de una
imagen que se quiere aadir de forma dinmica al contenido. La sintaxis es idntica al resto de URL que se
pueden indicar en otras propiedades CSS:
span.especial:after {
content: url("imagenes/imagen.png");
}
Otros valores que se pueden indicar en la propiedad content son open-quote, close-quote, no-open-quote y
no-close-quote. Los dos primeros indican que se debe mostar una comilla de apertura o de cierre
respectivamente. Las comillas utilizadas se establecen mediante la propiedad quotes:

blockquote { quotes: "" "" '"' '"' }
blockquote:before {
}
blockquote:after {
}
Los valores no-open-quote y no-close-quote se utilizan para no mostrar ninguna comilla en ese elemento, pero
incrementando el nivel de anidamiento de las comillas. De esta forma se puede evitar mostrar una comilla en un
determinado elemento mientras se mantiene la jerarqua de comillas establecida por la propiedad quotes.
Uno de los valores ms avanzados de la propiedad content es attr(), que permite obtener el valor de un atributo
del elemento sobre el que se utiliza la propiedad content. En el siguiente ejemplo, se modifcan los elementos
<abbr> y <acronym> para que muestren entre parntesis el valor de sus atributos title:
abbr:after, acronym:after {
content: " (" attr(title) ")"
}
El valor de la propiedad content anterior en realidad es la combinacin de tres valores: * Cadena de texto" (",
que es el parntesis de apertura tras el cual se muestra el valor del atributo title. * Atributo title del elemento
obtenido mediante attr(title) * Cadena de texto ")", que es el parntesis de cierre que se muestra detrs del
valor del atributo title.
Si el elemento no dispone del atributo solicitado, la funcin attr(nombre_del_atributo) devuelve una cadena de
texto vaca. Utilizando attr() solamente se puede obtener el valor de los atributos del elemento al que se aplica la
propiedad content.
La funcin attr() es muy til por ejemplo para mostrar la direccin a la que apuntan los enlaces de la pgina:
a:after {
content: " (" attr(href) ")";
}
Los ltimos valores que se pueden indicar en la propiedadcontent son los contadores creados con las
propiedades counter-increment y counter-reset. Los contadores ms sencillos se muestran con la funcin
counter(nombre_del_contador). El siguiente ejemplo crea dos contadores llamado capitulo y seccion para
utilizarlos con los elementos <h1> y <h2>:
body {
counter-reset: capitulo;
}
h1 {
counter-reset: seccion;
}
h1:before {
content: "Captulo " counter(capitulo) ". ";
counter-increment: capitulo;
}
h2:before {
content: counter(capitulo) "." counter(seccion) " ";
counter-increment: seccion;
}
En el ejemplo anterior, se crea e inicializa su valor a 0 un contador llamado capitulo cuando se encuentre el
elemento <body>, es decir, al comienzo de la pgina. Adems, se crea e inicializa su valor a0 otro contador
llamado seccion cada vez que se encuentra un elemento <h1> en la pgina.
Posteriormente, se aade de forma dinmica a los elementos <h1> y <h2> el contenido generado mediante los
contadores. Los elementos <h1> utilizan el contador capitulo y lo incrementan en una unidad cada vez que lo
utilizan. Los elementos <h2> utilizan los dos contadores para generar un contenido que muestra su numeracin
completa. Adems, los elementos <h2> actualizan el valor del contador seccion.
Cuando un mismo elemento inicializa/actualiza un contador y lo utiliza en la propiedadcontent, en primer lugar se
inicializa/actualiza y despus, el valor actualizado es el que se utiliza mediante counter().
Adems de mostrar el valor de un contador bsico, la funcin counter() permite indicar el estilo con el que se
muestra el valor del contador. La lista de estilos permitidos son los mismos que los de la propiedad list-style-type.
El siguiente ejemplo modifca el anterior para mostrar el valor de los contadores en nmeros romanos:
body {
counter-reset: capitulo;
}
h1 {
counter-reset: seccion;
}
h1:before {
content: "Captulo " counter(capitulo, upper-roman) ". ";
counter-increment: capitulo;
}
h2:before {
content: counter(capitulo, upper-roman) "." counter(seccion, upper-roman) " ";
}
Los estilos de los contadores tambin se pueden emplear para no mostrar el valor de los contadores en algunos
elementos:
p {
counter-increment: parrafos;
}
p:before {
content: counter(parrafos);
}
#especial p:before {
content: counter(parrafos, none);
}
Aunque el valor de los contadores siempre es nmerico, tambin es pueden emplear estilos grfcos como
square, disc o circle:
h2 {
}
h2:before {
content: counter(seccion, disc);
}
La funcin counter() solamente muestra el valor de un contador. Por su parte, la funcin counters() se utiliza
para mostrar de forma simultnea el valor de todos los contadores asociados con el elemento. Como se explica en
la descripcin de las propiedades counter-increment y counter-reset, los contadores se pueden anidar y un mismo
elemento puede tener asociados varios contadores diferentes con el mismo nombre.
El siguiente ejemplo muestra unas reglas CSS que crean un contador para los elementos de una lista<ol>:
ol {
counter-reset: elemento;
list-style-type: none;
}
li:before {
content: counter(elemento) ". ";
counter-increment: elemento;
}
Si se considera el siguiente cdigo HTML:

<ol>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento
<ol>
<li>Elemento</li>
<li>Elemento
<ol>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
</li>
<li>Elemento</li>
</ol>
</li>
<li>Elemento</li>
</ol>
Si se aplican las reglas CSS al cdigo HTML anterior, se crean tres contadores diferentes con el mismo nombre
(elemento) y el resultado es el que muestra la siguiente imagen:
Sin embargo, si se utiliza la funcin counters() en las reglas CSS anteriores:

ol {
}
li:before {
content: counters(elemento, '. ') ". ";
}
Ahora, el aspecto que muestra la lista de elementos es el de la siguiente imagen:
En el ejemplo anterior, cada vez que se encuentra un elemento <ol> se crea un contador llamado elemento. Por
este motivo, los elementos <li> anidados se ven afectados por varios contadores llamadoselemento. La funcin
counter() slo muestra el valor del contador que afecta ms directamente al elemento, mientras que la funcin
counters() muestra todos los contadores empezando desde el ms externo hasta llegar al ms interno.
El segundo argumento de la funcin counters() es una cadena de texto que se emplea para separar los valores
de los diferentes contadores. CSS 2.1 no permite utilizar diferentes separadores para cada nivel jerrquico.
Por ltimo, la funcin counters() tambin permite indicar el estilo con el que se muestra el valor de los
contadores. De esta forma, el siguiente ejemplo modifca el anterior para mostrar el valor de todos los contadores
en nmeros romanos:
ol {
}
li:before {
content: counters(elemento, '. ', upper-roman) ". ";
}
Compartir
Twitter
Facebook
Google+
content
counter-increment
counter-reset
quotes

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad counter-increment
Propiedad counter-increment
Defnicin
Actualiza el valor de uno o ms contadores

Valores permitidos

Uno o ms nombres de contadores seguidos opcionalmente por un nmero entero cada uno
none
inherit
Valor inicial
none
Se aplica a
Todos los elementos

Vlida en
todos los medios

Se hereda
no
w3.org/TR/CSS21/generate.html#propdef-counter-increment
Ejemplos de uso
La propiedad counter-increment se emplea para controlar la numeracin automtica de CSS 2.1 que se utiliza
en las funciones counter() y counters() de la propiedad content.
El funcionamiento bsico de la propiedad counter-increment es sencillo, pero su fexibilidad y la combinacin con

otras propiedades y funciones de CSS pueden complicar mucho su interpretacin.
En el caso ms sencillo, la propiedad counter-increment indica el nombre de un contador seguido
opcionalmente por un nmero entero que indica la cantidad en la que se incrementa:
h1 {
counter-increment: numero_capitulo 1;
}
La regla CSS anterior hace que se incremente en una unidad el valor de un contador llamadonumero_capitulo
cada vez que la pgina incluya un elemento <h1>. Si el contador no exista, el estndar CSS 2.1 indica que cuando
se encuentre el primer elemento <h1>, se crea el contador, se inicializa al valor0 y posteriormente se actualiza su
valor segn la propiedad counter-increment indicada.
Este contador bsico se puede emplear para aadir una numeracin automtica a los elementos<h1> de la
pgina:
h1:before {
content: "Captulo " counter(numero_capitulo);
}
Cuando se actualiza y se utiliza el valor de un contador en un mismo elemento, primero se actualiza su valor y
despus se utiliza en la propiedad content.
Si no se indica el nmero entero opcional, los navegadores suponen que vale1, por lo que la siguiente regla CSS
es equivalente a la anterior:
h1:before {
counter-increment: numero_capitulo;
}
Adems de incrementar el valor de los contadores, tambin es posible decrementarlo o no modifcarlo. El siguiente
ejemplo ampla el anterior para no incrementar el valor del contador en algunos elementos <h1> especiales:
h1:before {
}
h1.especial {
}
No obstante, si se quiere inicializar un contador para que vuelva a valer0 o cualquier otro valor numrico, es preciso
utilizar la propiedad counter-reset.
La propiedad counter-increment tambin permite indicar varios contadores para actualizarlos de forma
simultnea:
p {
counter-increment: elementos parrafos especial 2;
}
La regla CSS anterior incrementa en una unidad el valor de los contadoreselementos y parrafos cada vez que se
encuentra un elemento <p> en la pgina. Adems, incrementa en 2 unidades el valor de otro contador llamado
especial cada vez que encuentra un elemento <p>.
Tambin es posible indicar el mismo contador ms de una vez en la propiedad counter-increment:

p {
counter-increment: elementos parrafos especial 2 parrafos elementos 3;
}
En el ejemplo anterior, cada vez que se encuentra un elemento <p> en la pgina se incrementa 4 unidades el valor
del contador elementos, 2 unidades el valor del contador parrafos y 2 unidades el valor del contador especial.
Los contadores tienen en cuenta el anidamiento de los elementos HTML. Si se consideran las siguientes reglas
CSS:
div {
counter-reset: numero_parrafo;
}
div p:before {
content: "Parrafo " counter(numero_parrafo) " ";
counter-increment: numero_parrafo;
}
La propiedad counter-reset crea o inicializa el valor del contador numero_parrafo cada vez que encuentra un
elemento <div>. De esta forma, si la regla CSS anterior se aplica al siguiente cdigo HTML:
<div>
<p>Lorem ipsum dolor sit amet</p>
<div>
<div>
</div>
</div>
</div>
En el ejemplo anterior, el navegador crea automticamente tres contadores diferentes pero con el mismo nombre
(numero_parrafo). Cada vez que se encuentra un elemento <div>, el navegador crea o inicializa un contador
llamado numero_parrafo, por lo que todos los prrafos del ejemplo anterior disponen de la misma numeracin 1( ,
2 y 3).
Si se visualiza el ejemplo anterior con un navegador que soporte completamente las propiedadescounterincrement, counter-reset y content, el resultado es el que muestra la siguiente imagen:
Los elementos ocultos mediante la propiedad display (display: none ) no modifcan el valor de los contadores,
mientras que los elementos ocultos mediante la propiedad visibility (visibility: hidden) si que los actualizan:
p.oculto {
display: none;
}
p.invisible {
visibility: hidden;
}
Compartir
Twitter
Facebook
Google+
/* No se actualiza porque el elemento

se ha ocultado mediante display: none */
/* Se actualiza porque el elemento

se ha hecho invisible con visibility: hidden */
content
counter-increment
counter-reset
quotes

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad counter-reset
Propiedad counter-reset
Defnicin
Inicializa el valor de uno o ms contadores

Valores permitidos

Uno o ms nombres de contadores seguidos opcionalmente por un nmero entero cada uno
none
inherit
Valor inicial
none
Se aplica a
Todos los elementos

Vlida en
todos los medios

Se hereda
no
w3.org/TR/CSS21/generate.html#propdef-counter-reset
Ejemplos de uso
La propiedad counter-reset se emplea para controlar la numeracin automtica de CSS 2.1 que se utiliza en las
funciones counter() y counters() de la propiedad content.
El funcionamiento bsico de la propiedad counter-reset es sencillo, pero su fexibilidad y la combinacin con otras
propiedades y funciones de CSS pueden complicar mucho su interpretacin.
En el caso ms sencillo, la propiedad counter-reset indica el nombre de un contador seguido opcionalmente por
un nmero entero que indica el valor al que se inicializa el contador:
body {
counter-reset: numero_capitulo 0;
}
La regla CSS anterior hace que se inicialice a 0 un contador llamado numero_capitulo cuando el navegador
encuentre el elemento <body>. Si el contador no exista, el estndar CSS 2.1 indica que se crea cuando se
encuentre el primer elemento <body>, es decir, al principio de la pgina.
La regla CSS anterior se puede emplear para crear el contador que se utiliza posteriormente en las propiedades
counter-increment y content:
body {
counter-reset: numero_capitulo 0;
}
h1:before {
}
Cuando se inicializa y se actualiza el valor de un contador en un mismo elemento, primero se inicializa su valor y
despus se actualiza segn la propiedad counter-increment .
Si no se indica el nmero entero opcional, los navegadores suponen que vale0, por lo que las siguientes reglas
CSS son equivalentes a las anteriores:
body {
counter-reset: numero_capitulo;
}
h1:before {
}
La propiedad counter-reset tambin cumple con el comportamiento en cascada de las propiedades CSS, por lo
que en el siguiente ejemplo:
p {
counter-reset: parrafos;
}
...
p {
counter-reset: elementos;
}
Las reglas CSS anteriores provocan un colisin en el valor de la propiedad counter-reset. Segn las normas de
resolucin de colisiones, en este caso gana la ltima regla y los elementos de tipo <p> slo inicializan el valor del
contador elementos.
Adems de inicializar el valor de los contadores a 0, tambin es posible inicializarlos a cualquier otro valor entero
positivo o negativo, tal y como muestra el siguiente ejemplo:
body {
counter-reset: numero_capitulo -1;
}
h1:before {
counter-reset: numero_seccion -1;
}
La propiedad counter-reset tambin permite indicar varios contadores para inicializarlos de forma simultnea:
h1 {
counter-reset: numero_seccion numero_tabla numero_imagen;
}
La regla CSS anterior inicializa a 0 los contadores numero_seccion, numero_tabla y numero_imagen cada vez que
se encuentra un elemento <h1> en la pgina. Tambin es posible indicar diferentes valores iniciales para cada
contador:
h1 {
counter-reset: numero_seccion 0 numero_tabla -1 numero_imagen -1;
}
Adems, tambin es posible indicar el mismo contador ms de una vez en la propiedadcounter-reset. En este
caso, se realizan todas las inicializaciones en el orden indicado:
p {
counter-reset: parrafos parrafos -1 parrafos 3;
}
p {
counter-reset: parrafos parrafos -1 parrafos 3 parrafos;
}
La primera regla del ejemplo anterior inicializa el valor del contadorparrafos a 3, mientras que la segunda regla
inicializa el contador parrafos a 0. Como el navegador procesa las inicializaciones en el mismo orden indicado, la
nica que se tiene en cuenta es la ltima.
Los contadores tienen en cuenta el anidamiento de los elementos HTML. Si se consideran las siguientes reglas
CSS:
div {
counter-reset: numero_parrafo;
}
div p:before {
content: "Parrafo " counter(numero_parrafo) " ";
counter-increment: numero_parrafo;
}
La propiedad counter-reset crea o inicializa el valor del contador numero_parrafo cada vez que encuentra un
elemento <div>. De esta forma, si la regla CSS anterior se aplica al siguiente cdigo HTML:
<div>
<div>
<div>
</div>
</div>
</div>
En el ejemplo anterior, el navegador crea automticamente tres contadores diferentes pero con el mismo nombre
(numero_parrafo). Cada vez que se encuentra un elemento <div>, el navegador crea o inicializa un contador
llamado numero_parrafo, por lo que todos los prrafos del ejemplo anterior disponen de la misma numeracin 1( ,
2 y 3).
Si se visualiza el ejemplo anterior con un navegador que soporte completamente las propiedadescounter-reset,
counter-increment y content, el resultado es el que muestra la siguiente imagen:
Los elementos ocultos mediante la propiedad display (display: none ) no pueden modifcar el valor de los
contadores, mientras que los elementos ocultos mediante la propiedad visibility (visibility: hidden) si que los
actualizan:
p.oculto {
display: none;
}
p.invisible {
visibility: hidden;
}
Compartir
Twitter
Facebook
Google+
content
counter-increment
counter-reset
quotes
/* No se inicializa porque el elemento

se ha ocultado mediante display: none */
/* Se inicializa a 0 porque el elemento

se ha hecho invisible con visibility: hidden */

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad quotes
Propiedad quotes
Defnicin
Establece los caracteres utilizados para mostrar las comillas

Valores permitidos

Un nmero par de cadenas de texto
none
inherit
Valor inicial
Depende de cada navegador

Se aplica a
Todos los elementos

Vlida en
medios visuales
Se hereda
si
w3.org/TR/CSS21/generate.html#propdef-quotes
Ejemplos de uso
La propiedad quotes slo tiene sentido cuando se utiliza junto con la propiedadcontent y los pseudo-elementos
:after y :before. La propiedad quote se puede emplear para establecer los caracteres que se utilizan al mostrar
las comillas en un elemento.

Por defecto, cuando se utiliza la propiedad content junto con los valores open-quote y close-quote, el navegador
muestra unas determinadas comillas. Por tanto, si se considera el siguiente cdigo HTML y CSS:
blockquote:before { content: open-quote; }
blockquote:after { content: close-quote; }
<blockquote>Lorem ipsum dolor sit amet...</blockquote>
El navegador muestra el ejemplo anterior de la siguiente forma:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis
tellus vulputate lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula
ipsum tincidunt pede, et blandit sem pede suscipit pede. Nulla cursus porta sem.
Donec mollis nunc in leo.
Si utilizas un navegador moderno con soporte de la propiedad quotes, el ejemplo anterior se visualiza como
muestra la siguiente imagen:
La imagen anterior corresponde al navegador Firefox. Como el estndar CSS 2.1 no indica las comillas que se
deben utilizar por defecto, se pueden producir diferencias visuales en cada navegador.
La propiedad quotes se utiliza para establecer de forma explcita las comillas que debe utilizar el navegador y por
tanto, neutraliza las posibles diferencias entre navegadores. Las comillas siempre se indican por pares, siendo la
primera la comilla de apertura y la segunda la comilla de cierre.
El siguiente ejemplo modifca el anterior para utilizar las comillas y :
blockquote {
quotes: "" "";
}
blockquote:before { content: open-quote; }
blockquote:after { content: close-quote; }
<blockquote>Lorem ipsum dolor sit amet...</blockquote>
Ahora, el navegador muestra el ejemplo anterior de la siguiente forma:

Si se visualiza esta pgina con un navegador que soporte la propiedadquotes, el ejemplo anterior se visualiza
como muestra la siguiente imagen:
La propiedad quotes permite indicar un nmero ilimitado de pares de comillas. Cuando slo se defne un par, se
muestran siempre que se utilice open-quote y close-quote. Cuando se defnen varios pares, se van alternando
cada vez que se muestran unas comillas dentro de otro elemento que ya tiene comillas. Cada comilla se separa de
las dems mediante un espacio en blanco, por lo que no debe utilizarse una coma o cualquier otro caracter de
separacin.
El siguiente ejemplo defne dos pares de comillas en cada elemento de modo que se alternan las comillas cada vez
que un elemento se encuentra dentro de otro elemento que tambin muestra comillas:
blockquote, span {
quotes: "" "" '"' '"';
}
blockquote:before, span:before {
}
blockquote:after, span:after {
}
<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus v
ulputate lobortis. <span>Vivamus fermentum</span>, tortor id ornare ultrices, ligula ipsum tinc
idunt pede, et blandit <span>sem pede suscipit pede.</span> Nulla cursus porta sem. Donec molli
s nunc in leo.</blockquote>
Las reglas CSS anteriores indican que el navegador debe utilizar diferentes comillas cuando el nivel de anidamiento
sea diferente:
En el ejemplo anterior, tanto <blockquote> como <abbr> establecen dos pares de comillas. Cuando uno de estos
dos elementos se encuentre dentro de otro elemento que ya muestra comillas, la propiedad quotes indica que se
debe utilizar el segundo par de comillas en vez del primero. Por lo tanto, si utilizas un navegador que soporta la
propiedad quotes, el ejemplo anterior se visualiza de la siguiente forma:
Los valores de la propiedad quotes se indican mediante cadenas de texto. Una cadena de texto es un conjunto de
uno o ms caracteres encerrados por las comillas dobles (") o las comillas simples (``'). Si la cadena contiene
comillas dobles, se encierra con las comillas simples y viceversa. Si una cadena de texto tiene tanto comillas
simples como dobles, las comillas problemticas se modifcan y se les aade la barra invertida \ por delante:
/* Comillas
.selector {
/* Comillas
.selector {
/* Comillas
.selector {
/* Comillas
.selector {
simples encerradas por comillas dobles */

quotes: "'" "'"; }
dobles encerradas por comillas simples */
quotes: '"' '"'; }
simples y dobles encerradas por comillas dobles */
quotes: "\"" "\"" "'" "'"; }
simples y dobles encerradas por comillas simples */
quotes: '"' '"' '\` '\`; }
Como las comillas se indican mediante cadenas de texto, no estn limitadas a un solo carcter. En el siguiente
ejemplo se utilizan unas comillas poco habituales formadas por varios caracteres:
blockquote, span {
quotes: "" "" "--" "--";
}
blockquote:before, span:before {
}
blockquote:after, span:after {
}
<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus v
ulputate lobortis. <span>Vivamus fermentum</span>, tortor id ornare ultrices, ligula ipsum tinc
idunt pede, et blandit <span>sem pede suscipit pede.</span> Nulla cursus porta sem. Donec molli
s nunc in leo.</blockquote>
Las reglas CSS anteriores producen el siguiente resultado en el navegador:

En un navegador con soporte de la propiedad quotes, el ejemplo anterior se visualiza de la siguiente forma:
Utilizando el pseudo-selector :lang() es posible incluso defnir diferentes tipos de comillas en funcin del idioma
del contenido:
blockquote:lang(en) { quotes: '"' '"' "'" "'" } /* comillas para ingls */
blockquote:lang(es) { quotes: "" "" '"' '"' } /* comillas para espaol */
La propiedad quotes defne otro valor llamado none que hace que no se muestre ninguna comilla cuando se utiliza
el valor open-quote y close-quote de la propiedad content.
Por ltimo, el estndar de CSS 2.1 recomienda utilizar directamente los cdigos defnidos en el estndar ISO
10646 para indicar la comilla que se quiere utilizar.
De esta forma, las dos siguientes reglas CSS son equivalentes:
blockquote, abbr {
quotes: "" "" "'" "'";
}
blockquote, abbr {
quotes: "\00AB" "\00BB" "\0027" "\0027";
}
La siguiente tabla recoge las comillas ms utilizadas y sus cdigos correspondientes:

Carcter tipogrfco de la
comilla
Cmo la muestran los

navegadores
Cdigo ISO
10646
"
"
0022
'
'
0027
<
2039
>
203A
00AB
00BB
'
2018
'
2019
"
201C
"
201D
,,
201E
Compartir
Twitter
Facebook
Google+
content
counter-increment
counter-reset
quotes

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad orphans
Propiedad orphans
Defnicin
Establece el mnimo nmero de lneas del prrafo que se muestra al fnal de la pgina
Valores permitidos

Un nmero entero
inherit
Valor inicial
2
Se aplica a
Elementos de bloque
Vlida en
medios visuales, medios paginados

Se hereda
yes
w3.org/TR/CSS2/page.html#propdef-orphans
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
orphans
page-break-after
page-break-before
page-break-inside
widows

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad page-break-after
Propiedad page-break-after
Defnicin
Indica el tipo de salto de pgina que se incluye despus del elemento

Valores permitidos

auto
always
avoid
left
right
inherit
Valor inicial
auto
Se aplica a
Elementos de bloque
Vlida en

Se hereda
no
w3.org/TR/CSS2/page.html#propdef-page-break-after
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
orphans
page-break-after
page-break-before
page-break-inside
widows

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad page-break-before
Propiedad page-break-before
Defnicin
Indica el tipo de salto de pgina que se incluye antes del elemento

Valores permitidos

auto
always
avoid
left
right
inherit
Valor inicial
auto
Se aplica a
Elementos de bloque
Vlida en

Se hereda
no
w3.org/TR/CSS2/page.html#propdef-page-break-before
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
orphans
page-break-after
page-break-before
page-break-inside
widows

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad page-break-inside
Propiedad page-break-inside
Defnicin
Indica el tipo de salto de pgina que se incluye dentro del elemento

Valores permitidos

avoid
auto
inherit
Valor inicial
auto
Se aplica a
Elementos de bloque
Vlida en

Se hereda
yes
w3.org/TR/CSS2/page.html#propdef-page-break-inside
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
orphans
page-break-after
page-break-before
page-break-inside
widows

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad widows
Propiedad widows
Defnicin
Establece el mnimo nmero de lneas del prrafo que se muestra al principio de la pgina
Valores permitidos

Un nmero entero
inherit
Valor inicial
2
Se aplica a
Elementos de bloque
Vlida en

Se hereda
yes
w3.org/TR/CSS2/page.html#propdef-widows
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
orphans
page-break-after
page-break-before
page-break-inside
widows

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad azimuth
Propiedad azimuth
Defnicin
ngulo donde se encuentra la fuente sonora

Valores permitidos
Existen seis opciones diferentes para establecer el valor o valores de esta propiedad:
1. ngulo
left-side
far-left
left
center-left
center
center-right
right
far-right
right-side
Seguido o precedido opcionalmente por el siguiente valor:

behind
3. behind
4. leftwards
5. rightwards
6. inherit
Valor inicial
center
Se aplica a
Todos los elementos

Vlida en
medios auditivos
Se hereda
yes
w3.org/TR/CSS21/aural.html#propdef-azimuth
Ejemplos de uso
La propiedad azimuth indica el ngulo en el que se encuentra la fuente sonora, por lo que slo tiene sentido para
pginas HTML que reproduzcan sonidos.
La forma exacta en la que se consigue que un sonido parezca que proviene de una determinada posicin
depende de cada navegador, ya que el estndar no indica cmo conseguirlo. El siguiente ejemplo muestra cmo
conseguir que los elementos <h1> de la pgina se reproduzcan desde un ngulo de 45 grados respecto a la
posicin del usuario que est viendo la pgina. Adems, los prrafos cuyo atributo class sea comment parecer
que se encuentran por detrs de la posicin del usuario:
h1 { azimuth: 45deg; }
p.comment { azimuth: behind; }
Si el dispositivo en el que se est viendo la pgina no es capaz de reproducir sonidos por detrs de la posicin del
usuario, el navegador transforma valores como behind a posiciones en la parte delantera del usuario. El estndar
recomienda la siguiente frmula para hacer la transformacin:
Si el ngulo x se encuentra entre 90 grados y 180 grados, la nueva posicin es 180 - x grados.
Si el ngulo x se encuentra entre 180 grados y 270 grados, la nueva posicin es 540 - x grados.
La siguiente tabla muestra la conversin entre las palabras clave de la propiedad y los grados utilizados como
ngulo por el navegador:
Grados si se usa
Palabra clave
Grados
left-side
270
270
far-left
300
240
left
320
220
center-left
340
200
center
180
behind
center-right
20
160
right
40
140
far-right
60
120
right-side
90
90
leftwards
Resta 20 grados
Resta 20 grados
rightwards
Suma 20 grados
Suma 20 grados
Compartir
Twitter
Facebook
Google+
azimuth
cue-after
cue-before
cue
elevation
pause-after
pause-before
pause
pitch-range
pitch
play-during
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
voice-family
volume

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad cueafter
Propiedad cue-after
Defnicin
Indica el sonido que se reproduce despus de un elemento

Valores permitidos

URL
none
inherit
Valor inicial
none
Se aplica a
Todos los elementos

Vlida en
medios auditivos
Se hereda
no
w3.org/TR/CSS21/aural.html#propdef-cue-after
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
azimuth
cue-after
cue-before
cue
elevation
pause-after
pause-before
pause
pitch-range
pitch
play-during
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
voice-family
volume

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad cuebefore
Propiedad cue-before
Defnicin
Indica el sonido que se reproduce antes de un elemento

Valores permitidos

URL
none
inherit
Valor inicial
none
Se aplica a
Todos los elementos

Vlida en
medios auditivos
Se hereda
no
w3.org/TR/CSS21/aural.html#propdef-cue-before
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
azimuth
cue-after
cue-before
cue
elevation
pause-after
pause-before
pause
pitch-range
pitch
play-during
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
voice-family
volume

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad cue
Propiedad cue
Defnicin
Indica el sonido que se reproduce antes y/o despus de un elemento

Valores permitidos

cue-before
cue-after
Valor inicial

Se aplica a
Todos los elementos

Vlida en
medios auditivos
Se hereda
no
w3.org/TR/CSS21/aural.html#propdef-cue
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
azimuth
cue-after
cue-before
cue
elevation
pause-after
pause-before
pause
pitch-range
pitch
play-during
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
voice-family
volume

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad elevation
Propiedad elevation
Defnicin
ngulo de elevacin de la posicin en la que se encuentra la fuente sonora

Valores permitidos

ngulo
bellow
level
above
higher
lower
inherit
Valor inicial
level
Se aplica a
Todos los elementos

Vlida en
medios auditivos
Se hereda
yes
w3.org/TR/CSS21/aural.html#propdef-elevation
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
azimuth
cue-after
cue-before
cue
elevation
pause-after
pause-before
pause
pitch-range
pitch
play-during
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
voice-family
volume

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad pause-after
Propiedad pause-after
Defnicin
Duracin de la pausa realizada despus de leer los contenidos de un elemento

Valores permitidos
Uno o dos de los siguientes valores:

time
porcentaje
inherit
Si se utilizan porcentajes, hace referencia al inverso del valor de la propiedad speech-rate
Valor inicial
0
Se aplica a
Todos los elementos

Vlida en
medios auditivos
Se hereda
no
w3.org/TR/CSS21/aural.html#propdef-pause-after
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
azimuth
cue-after
cue-before
cue
elevation
pause-after
pause-before
pause
pitch-range
pitch
play-during
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
voice-family
volume

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad pause-before
Propiedad pause-before
Defnicin
Duracin de la pausa realizada antes de leer los contenidos de un elemento

Valores permitidos

time
porcentaje
inherit
Si se utilizan porcentajes, hace referencia al inverso del valor de la propiedad speech-rate
Valor inicial
0
Se aplica a
Todos los elementos

Vlida en
medios auditivos
Se hereda
no
w3.org/TR/CSS21/aural.html#propdef-pause-before
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
azimuth
cue-after
cue-before
cue
elevation
pause-after
pause-before
pause
pitch-range
pitch
play-during
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
voice-family
volume

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad pause
Propiedad pause
Defnicin
Duracin de la pausa realizada antes y/o despus de leer los contenidos de un elemento
Valores permitidos

time
porcentaje
inherit
Valor inicial

Se aplica a
Todos los elementos

Vlida en
medios auditivos
Se hereda
no
w3.org/TR/CSS21/aural.html#propdef-pause
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
azimuth
cue-after
cue-before
cue
elevation
pause-after
pause-before
pause
pitch-range
pitch
play-during
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
voice-family
volume

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad pitch-range
Propiedad pitch-range
Defnicin
Establece el rango de frecuencias de la voz utilizada en las locuciones

Valores permitidos

nmero
inherit
Valor inicial
50
Se aplica a
Todos los elementos

Vlida en
medios auditivos
Se hereda
yes
w3.org/TR/CSS21/aural.html#propdef-pitch-range
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
azimuth
cue-after
cue-before
cue
elevation
pause-after
pause-before
pause
pitch-range
pitch
play-during
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
voice-family
volume

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad pitch
Propiedad pitch
Defnicin
Establece la frecuencia de la voz utilizada en las locuciones

Valores permitidos

frequency
x-low
low
medium
high
x-high
inherit
Valor inicial
medium
Se aplica a
Todos los elementos

Vlida en
medios auditivos
Se hereda
yes
w3.org/TR/CSS21/aural.html#propdef-pitch
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
azimuth
cue-after
cue-before
cue
elevation
pause-after
pause-before
pause
pitch-range
pitch
play-during
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
voice-family
volume

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad playduring
Propiedad play-during
Defnicin
Indica el sonido que se reproduce mientras se leen los contenidos de un elemento

Valores permitidos
Existen cuatro opciones diferentes para establecer el valor o valores de esta propiedad:
1. Una URL seguida opcionalmente por uno o los dos valores siguientes y en cualquier orden:
mix
repeat
auto
3. none
4. inherit
Valor inicial
auto
Se aplica a
Todos los elementos

Vlida en
medios auditivos
Se hereda
si
w3.org/TR/CSS21/aural.html#propdef-play-during
2.
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
azimuth
cue-after
cue-before
cue
elevation
pause-after
pause-before
pause
pitch-range
pitch
play-during
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
voice-family
volume

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad richness
Propiedad richness
Defnicin
Establece la potencia de la voz utilizada en las locuciones

Valores permitidos

nmero
inherit
Valor inicial
50
Se aplica a
Todos los elementos

Vlida en
medios auditivos
Se hereda
yes
w3.org/TR/CSS21/aural.html#propdef-richness
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
azimuth
cue-after
cue-before
cue
elevation
pause-after
pause-before
pause
pitch-range
pitch
play-during
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
voice-family
volume

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad speakheader
Propiedad speak-header
Defnicin
Indica si se lee el contenido de la cabecera de una tabla para cada celda o slo cuando la celda est asociada
a una cabecera diferente
Valores permitidos

once
always
inherit
Valor inicial
once
Se aplica a
Tablas con cabecera

Vlida en
medios auditivos
Se hereda
si
w3.org/TR/CSS21/aural.html#propdef-speak-header
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
azimuth
cue-after
cue-before
cue
elevation
pause-after
pause-before
pause
pitch-range
pitch
play-during
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
voice-family
volume

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad speaknumeral
Propiedad speak-numeral
Defnicin
Establece la forma en la que se leen los nmeros

Valores permitidos

digits
continuous
inherit
Valor inicial
continuous
Se aplica a
Todos los elementos

Vlida en
medios auditivos
Se hereda
yes
w3.org/TR/CSS21/aural.html#propdef-speak-numeral
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
azimuth
cue-after
cue-before
cue
elevation
pause-after
pause-before
pause
pitch-range
pitch
play-during
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
voice-family
volume

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad speakpunctuation
Propiedad speak-punctuation
Defnicin
Establece la forma en la que se leen los signos de puntuacin

Valores permitidos

code
none
inherit
Valor inicial
none
Se aplica a
Todos los elementos

Vlida en
medios auditivos
Se hereda
yes
w3.org/TR/CSS21/aural.html#propdef-speak-punctuation
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
azimuth
cue-after
cue-before
cue
elevation
pause-after
pause-before
pause
pitch-range
pitch
play-during
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
voice-family
volume

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad speak
Propiedad speak
Defnicin
Indica si el texto de los elementos debe ser ledo

Valores permitidos

normal
none
spell-out
inherit
Valor inicial
normal
Se aplica a
Todos los elementos

Vlida en
medios auditivos
Se hereda
yes
w3.org/TR/CSS21/aural.html#propdef-speak
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
azimuth
cue-after
cue-before
cue
elevation
pause-after
pause-before
pause
pitch-range
pitch
play-during
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
voice-family
volume

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad speechrate
Propiedad speech-rate
Defnicin
Establece la velocidad de lectura utilizada en las locuciones

Valores permitidos

nmero
x-slow
slow
medium
fast
x-fast
faster
slower
inherit
Valor inicial
medium
Se aplica a
Todos los elementos

Vlida en
medios auditivos
Se hereda
si
w3.org/TR/CSS21/aural.html#propdef-speech-rate
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
azimuth
cue-after
cue-before
cue
elevation
pause-after
pause-before
pause
pitch-range
pitch
play-during
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
voice-family
volume

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad stress
Propiedad stress
Defnicin
Establece la potencia de la voz utilizada en las locuciones

Valores permitidos

nmero
inherit
Valor inicial
50
Se aplica a
Todos los elementos

Vlida en
medios auditivos
Se hereda
yes
w3.org/TR/CSS21/aural.html#propdef-stress
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
azimuth
cue-after
cue-before
cue
elevation
pause-after
pause-before
pause
pitch-range
pitch
play-during
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
voice-family
volume

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad voicefamily
Propiedad voice-family
Defnicin
Establece la voz utilizada en las locuciones

Valores permitidos

Nombre de una voz especfca
Nombre de una voz genrica
Seguido opcionalmente por uno o ms de los siguientes valores:
Nombre de una voz especfca
Nombre de una voz genrica
2. inherit
Valor inicial
Depende del navegador

Se aplica a
Todos los elementos

Vlida en
medios auditivos
Se hereda
yes
w3.org/TR/CSS21/aural.html#propdef-voice-family
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
azimuth
cue-after
cue-before
cue
elevation
pause-after
pause-before
pause
pitch-range
pitch
play-during
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
voice-family
volume

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad volume
Propiedad volume
Defnicin
Establece el volumen medio de la voz utilizada en las locuciones

Valores permitidos

nmero
porcentaje
silent
x-soft
soft
medium
loud
x-loud
inherit
Valor inicial
medium
Se aplica a
Todos los elementos

Vlida en
medios auditivos
Se hereda
yes
w3.org/TR/CSS21/aural.html#propdef-volume
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
azimuth
cue-after
cue-before
cue
elevation
pause-after
pause-before
pause
pitch-range
pitch
play-during
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
voice-family
volume

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad cursor
Propiedad cursor
Defnicin
Establece el cursor que muestra el puntero del ratn

Valores permitidos
1. Opcionalmente una o ms URL separadas por comas

Seguidas opcionalmente por uno de los siguientes valores:
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
progress
2. inherit
Valor inicial
auto
Se aplica a
Todos los elementos

Vlida en

Se hereda
yes
w3.org/TR/CSS2/ui.html#propdef-cursor
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
cursor
vertical-align

2.969 das online
Novedades
Condiciones
Privacidad
/ Referencia de CSS
Inicio 2.1
/ Propiedad vertical-align
Propiedad vertical-align
Defnicin
Controla el posicionamiento vertical de los elementos en lnea contenidos en otro elemento

Valores permitidos

baseline
sub
super
top
text-top
middle
bottom
text-bottom
porcentaje
medida
inherit
Si se utilizan porcentajes, hace referencia a la altura de lnea del propio elemento

Valor inicial
baseline
Se aplica a
Elementos en lnea y celdas de tabla

Vlida en
medios visuales
Se hereda
no
w3.org/TR/CSS2/visudet.html#propdef-vertical-align
Ejemplos de uso
(prximamente...)
Compartir
Twitter
Facebook
Google+
cursor
vertical-align

2.969 das online
Novedades
Condiciones
Privacidad

Referencia de CSS 2.1

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Referencia de CSS 2.1

Transféré par

Droits d'auteur :

Formats disponibles

Referencia de CSS 2.

2015 LibrosWeb.es Contacto

Establece la altura de los elementos de bloque

Uno y slo uno de los siguientes valores:

div { height: auto; }

div { height: 50%; }

div { height: 50%; }

2015 LibrosWeb.es Contacto

Limita la altura mxima de los elementos de bloque

Uno y slo uno de los siguientes valores:

height: expression(this.scrollHeight > 301? "300px": "auto");

2015 LibrosWeb.es Contacto

Limita la anchura mxima de los elementos de bloque

Uno y slo uno de los siguientes valores:

(max-width: 400px) Lorem ipsum dolor sit amet,

2015 LibrosWeb.es Contacto

Establece la altura mnima de los elementos de bloque

Uno y slo uno de los siguientes valores:

2015 LibrosWeb.es Contacto

Establece la anchura mnima de los elementos de bloque

Uno y slo uno de los siguientes valores:

2015 LibrosWeb.es Contacto

Establece la anchura de los elementos de bloque

Uno y slo uno de los siguientes valores:

div { width: 50%; }

div { width: 20em; font-size: 1em;

div { width: 20em; font-size: 2em;

div { width: 350px; padding: 30px; border:

2015 LibrosWeb.es Contacto

Establece la anchura del margen derecho de los elementos

Uno y slo uno de los siguientes valores:

Todos los elementos

div { margin-right: -20px; }

Si se utilizan porcentajes, su referencia es la anchura del elemento contenedor. Si no se ha establecido de forma

div { margin-left: 20px; }

2015 LibrosWeb.es Contacto

Establece la anchura del margen izquierdo de los elementos

Uno y slo uno de los siguientes valores:

Todos los elementos

Si se utilizan porcentajes, su referencia es la anchura del elemento contenedor. Si no se ha establecido de forma

div { margin-left: 20px; }

2015 LibrosWeb.es Contacto

Establece la anchura del margen superior de los elementos de bloque

Uno y slo uno de los siguientes valores:

div { margin-top: 20px; }

Si se utilizan porcentajes, su referencia es la anchura del elemento contenedor. Si no se ha establecido de forma

div { margin-top: 20px; }

2015 LibrosWeb.es Contacto

Establece la anchura del margen inferior de los elementos de bloque

Uno y slo uno de los siguientes valores:

Si se utilizan porcentajes, su referencia es la anchura del elemento contenedor. Si no se ha establecido de forma

div { margin-top: 20px; }

2015 LibrosWeb.es Contacto

Establece la anchura de algunos o todos los mrgenes de los elementos

Uno, dos, tres o cuatro de los siguientes valores:

Cada margen defne su propio valor por defecto

Todos los elementos

2015 LibrosWeb.es Contacto

Establece la anchura de la zona de relleno superior de los elementos

Uno y slo uno de los siguientes valores:

Todos los elementos

div { padding-top: 50px; }

div { width: 250px; }

div { padding-top: 20%; }