Post on 16-Sep-2015
description
Referencia de CSS 2.1
Ordenadas por tipo
Anchura y alturaheight
max-height
max-width
min-height
min-width
width
Margenmargin-right
margin-left
margin-top
margin-bottom
margin
Rellenopadding-top
padding-right
padding-bottom
padding-left
padding
Bordeborder-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
Perfl
outline-color
outline-style
outline-width
outline
Fondobackground-attachment
background-color
background-image
background-position
background-repeat
background
Tipografa
color
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing
Textodirection
line-height
text-align
text-decoration
text-indent
text-transform
unicode-bidi
word-spacing
Posicionamientobottom
clear
foat
left
position
right
top
Visualizacionclip
display
overfow
visibility
white-space
z-index
Tablasborder-collapse
border-spacing
caption-side
empty-cells
table-layout
Listaslist-style-image
list-style-position
list-style-type
list-style
Contenido generadocontent
counter-increment
counter-reset
quotes
Medios impresosorphans
page-break-after
page-break-before
page-break-inside
widows
Medios auditivosazimuth
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
Otrascursor vertical-align
Ordenadas alfabticamente
Aazimuth
Bbackground
background-attachment
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
Ccaption-side
clear
clip
color
content
counter-increment
counter-reset
cue
cue-after
cue-before
cursor
Ddirection display
Eelevation empty-cells
Ffoat
font
font-family
font-size
font-style
font-variant
font-weight
Hheight
Lleft
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
M
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
Oorphans
outline
outline-color
outline-style
outline-width
overfow
Ppadding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
pause
pause-after
pause-before
pitch
pitch-range
play-during
position
Qquotes
Rrichness right
Sspeak
speak-header
speak-numeral
speak-punctuation
speech-rate
stress
Ttable-layout
text-align
text-decoration
text-indent
text-transform
top
U
unicode-bidi
Vvertical-align
visibility
voice-family
volume
Wwhite-space
widows
width
word-spacing
Zz-index
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
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 elementocontenedor no tiene establecida una altura de forma explcita y el elemento para el que se defne la altura noest 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 gruposde columnas de tabla.
Vlida en
medios visuales
Se hereda
no
Defnicin enel estndar
w3.org/TR/CSS21/visudet.html#propdef-height
Ejemplos de usoPara los elementos de bloque y las imgenes, la propiedad height permite establecer su altura directamentemediante una unidad de medida. El siguiente ejemplo establece la altura a un para que no se muestre con laaltura por defecto calculada por el navegador:
Las imgenes son el nico elemento en lnea para el que se tiene en cuenta la propiedad height. 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 laimagen:
La propiedad height no funciona con los elementos en lnea que no son imgenes. En el siguiente ejemplo, apesar de que a cada enlace se le asigna una altura diferente, el navegador los muestra todos con la misma altura:
Si se utilizan unidades de medida, los valores indicados no pueden ser negativos. El uso de porcentajes paradefnir 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 suelemento 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 interiores tienen la misma altura del 50%. Sin embargo, slo elprimer se ve correctamente, ya que slo el primer elemento contenedor tiene establecida su altura de formaexplcita. La altura del segundo se ignora y se sustituye por el valor auto:
div { height: 100px; }
(height: 20px) Lorem ipsum dolor sit amet
(height: 40px) Lorem ipsum dolor sit amet
(height: 60px) Lorem ipsum dolor sit amet
div { height: 150px; } div { height: auto; }
Si se establece la altura de un elemento con la unidad de medida em, la referencia que se toma es el tamao deletra del propio elemento. En el siguiente ejemplo, los dos tienen el mismo valor en la propiedad height, perocomo su tamao de letra es muy diferente, su altura tambin es muy diferente:
El valor auto es el valor por defecto de la altura de todos los elementos. En este caso, el navegador determina laaltura de cada elemento teniendo en cuenta, entre otros, el tipo de elemento que se trata (de bloque o en lnea), elsitio 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 cadaelemento. Si se aaden mrgenes, bordes y rellenos, la altura total con la que se muestra el elemento ser mayorque el valor de la propiedad height:
div { height: 5em; font-size: 1em;}
div { height: 5em; font-size: 2em;}
div { height: 50%; } div { height: 50%; }
div { height: 100px;}
div { height: 100px; padding-top: 30px; border: 5px solid #000;}
Compartir
Twitter Facebook Google+
Propiedades relacionadas
heightmax-heightmax-widthmin-heightmin-widthwidth
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad max-height
Propiedad max-height
Defnicin
Limita la altura mxima de los elementos de bloque
Valores permitidos
Uno y slo uno de los siguientes valores:
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 flasde tabla.
Vlida en
medios visuales
Se hereda
no
Defnicin enel estndar
w3.org/TR/CSS21/visudet.html#propdef-max-height
Ejemplos de usoLa propiedad max-height es una de las propiedades CSS menos utilizadas, ya que normalmente se fjan lasanchuras de los elementos y se deja que el navegador calcule automticamente la altura de cada elemento deforma que quepan sus contenidos.
En el siguiente ejemplo, los dos tienen establecida una anchura fja. Adems, el segundo tieneestablecida una altura mxima mediante la propiedad max-height: 100px:
Como su anchura es fja, el navegador ajusta la altura de cada hasta que quepan todos sus contenidos. Elprimer no tiene ninguna restriccin en su altura, por lo que el navegador muestra correctamente loscontenidos en su interior.
Sin embargo, la altura necesaria para el segundo es mayor que la altura mxima permitida, por lo que suscontenidos 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 alturamxima de un elemento. Si se utilizan porcentajes, su referencia es la altura del elemento contenedor. Si esteelemento contendor no tiene establecida su altura de forma explcita y el elemento no est posicionado de formaabsoluta, 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 deCSS y JavaScript para simular el comportamiento de la propiedad max-height:
Lorem ipsum dolor sit amet,consectetuer adipiscingelit. Ut dictum justo utpede. Quisque velit.Curabitur commodo blanditnunc. Ut scelerisque enimblandit arcu. Morbi sedneque. Duis pellentesqueornare eros. Donec bibendumeros lacinia urna.
(max-height: 100px) Loremipsum dolor sit amet,consectetuer adipiscingelit. Ut dictum justo utpede. Quisque velit.Curabitur commodo blanditnunc. Ut scelerisque enimblandit arcu. Morbi sedneque. Duis pellentesque
#contenedor { max-height: 300px; overfow: hidden;
El ejemplo anterior hace uso de una funcin llamada expression() que slo funciona en los navegadores de tipoInternet Explorer (desde su versin 5). Esta funcin permite establecer una medida utilizando expresionesmatemticas o mediante cdigo JavaScript.
En este caso, se utiliza JavaScript para establecer de forma dinmica la altura del elemento #contenedor. Si laaltura de este elemento (obtenida mediante this.scrollHeight) es mayor que 301px, se establece su altura a300px. En cualquier otro caso, se deja que el navegador calcule automticamente la altura necesaria mediante elvalor auto.
El principal inconveniente de utilizar la funcin expression() es que el cdigo CSS resultante no es vlido segn elestndar ofcial y por tanto, no supera satisfatoriamente el proceso de validacin de herramientas como el validadorde CSS del W3C
Por otra parte, establecer medidas mediante operaciones matemticas puede resultar muy til para tener un controlpreciso cuando se utilizan unidades como em y porcentajes. Por este motivo, la futura versin CSS 3 incluir unafuncin 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 operacinmatemtica compleja:
La anchura del elemento #contenedor anterior se establece a una tercera parte del sitio disponible (100%/3) ydespus se le resta el sitio que ocupan los dos mrgenes laterales de 1em de anchura cada uno (2*1em) y elespacio ocupado por los dos bordes laterales de 1px de anchura cada uno (2*1px).
height: expression(this.scrollHeight > 301? "300px": "auto");}
#contenedor { foat: left; margin: 1em; border: solid 1px; width: calc(100%/3 - 2*1em - 2*1px);}
Compartir
Twitter Facebook Google+
Propiedades relacionadas
heightmax-heightmax-widthmin-heightmin-width
width
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio/ Referencia de CSS
2.1 / Propiedad max-width
Propiedad max-width
Defnicin
Limita la anchura mxima de los elementos de bloque
Valores permitidos
Uno y slo uno de los siguientes valores:
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
Todos los elementos, salvo los elementos en lnea que no sean imgenes, las flas de tabla y los grupos de flasde tabla.
Vlida en
medios visuales
Se hereda
no
Defnicin enel estndar
w3.org/TR/CSS21/visudet.html#propdef-max-width
Ejemplos de usoEn ocasiones, puede ser til no establecer de forma explcita la anchura de los elementos pero s fjar una anchuramxima. En el siguiente ejemplo, el primer no tiene establecida la propiedad max-width por lo que suanchura ocupa todo el espacio disponible en el elemento que lo contiene.
Sin embargo, el segundo tiene establecida una anchura mxima mediante max-width: 400px. Si se reduceel tamao de la ventana del navegador, los dos reducen su tamao para adaptarse al nuevo sitio disponible.Sin embargo, al aumentar el tamao de la ventana del navegador, el primer ocupa todo el sitio disponible y elsegundo no crece ms all de los 400px establecidos.
La propiedad max-width no admite valores negativos, los valores en porcentaje toman como referencia la anchuradel 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 depantallas y resoluciones cada vez mayores, se complica la creacin de pginas web cuya anchura se adaptadinmicamente. El siguiente ejemplo establece la anchura de la pgina al 95% del tamao de la ventana delnavegador:
Si se visualiza la pgina anterior en una pantalla con una resolucin muy grande, seguramente su aspecto serdemasiado diferente al diseo original de la pgina. En estos casos, se suele mantener la anchura adaptable a laventana del navegador, pero se limita su anchura mxima:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
(max-width: 400px) Lorem ipsum dolor sit amet,consectetuer adipiscing elit
#contenedor { width: 95%;}
...
#contenedor { width: 95%; max-width: 1200px;}
...
El navegador Internet Explorer 6 no incluye esta propiedad, por lo que se debe utilizar un truco que hace uso deCSS y JavaScript para simular el comportamiento de la propiedad max-width:
El ejemplo anterior hace uso de una funcin llamada expression() que slo funciona en los navegadores de tipoInternet Explorer (desde su versin 5). Esta funcin permite establecer una medida utilizando expresionesmatemticas o mediante cdigo JavaScript.
En este caso, se utiliza JavaScript para establecer de forma dinmica la anchura del elemento #contenedor. Si laanchura de la pgina (obtenida mediante document.body.clientWidth) es mayor que 1201px, se establece suanchura a 1200px. En cualquier otro caso, se deja que el navegador calcule automticamente la anchura necesariamediante el valor auto.
El principal inconveniente de utilizar la funcin expression() es que el cdigo CSS resultante no es vlido segn elestndar ofcial y por tanto, no supera satisfatoriamente el proceso de validacin de herramientas como el validadorde CSS del W3C
Por otra parte, establecer medidas mediante operaciones matemticas puede resultar muy til para tener un controlpreciso cuando se utilizan unidades como em y porcentajes. Por este motivo, la futura versin CSS 3 incluir unafuncin 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 operacinmatemtica compleja:
La anchura del elemento #contenedor anterior se establece a una tercera parte del sitio disponible (100%/3) ydespus se le resta el sitio que ocupan los dos mrgenes laterales de 1em de anchura cada uno (2*1em) y elespacio ocupado por los dos bordes laterales de 1px de anchura cada uno (2*1px).
#contenedor { max-width: 1200px; width: expression(document.body.clientWidth > 1201? "1200px": "auto");}
#contenedor { foat: left; margin: 1em; border: solid 1px; width: calc(100%/3 - 2*1em - 2*1px);}
Compartir
Twitter Facebook Google+
Propiedades relacionadas
heightmax-heightmax-widthmin-heightmin-widthwidth
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio/ Referencia de CSS
2.1 / Propiedad min-height
Propiedad min-height
Defnicin
Establece la altura mnima de los elementos de bloque
Valores permitidos
Uno y slo uno de los siguientes valores:
medida
porcentaje
inherit
Si se utilizan porcentajes, hace referencia a la altura del elemento en el que se encuentra
Valor inicial
0
Se aplica a
Todos los elementos, salvo los elementos en lnea que no sean imgenes, las flas de tabla y los grupos de flasde tabla.
Vlida en
medios visuales
Se hereda
no
Defnicin enel estndar
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 propiedad height o se deja alnavegador que calcule automticamente la altura necesaria de modo que quepan los contenidos en el interior decada elemento.
La propiedad min-height presenta un comportamiento intermedio. En primer lugar, el navegador calcula la alturanecesaria para mostrar los contenidos. Si la altura necesaria es mayor que la altura mnima, el elemento se muestracon esa altura necesaria.
Si la altura necesaria para mostrar los contenidos es inferior a la altura mnima, se fuerza a que la altura del elementosea igual que la altura mnima.
En el siguiente ejemplo, el segundo tiene una altura mnima de min-height: 150px, por lo que el navegadorlo muestra con esa altura a pesar de que sus contenidos no ocupan tanto sitio:
El navegador Internet Explorer 6 no incluye esta propiedad, por lo que se debe utilizar un truco que hace uso deCSS y JavaScript para simular el comportamiento de la propiedad min-height:
El ejemplo anterior hace uso de una funcin llamada expression() que slo funciona en los navegadores de tipoInternet Explorer (desde su versin 5). Esta funcin permite establecer una medida utilizando expresionesmatemticas o mediante cdigo JavaScript.
En este caso, se utiliza JavaScript para establecer de forma dinmica la altura del elemento #contenedor. Si laaltura de este elemento (obtenida mediante this.scrollHeight) es menor que 301px, se establece su altura a300px. En cualquier otro caso, se deja que el navegador calcule automticamente la altura necesaria mediante elvalor auto.
El principal inconveniente de utilizar la funcin expression() es que el cdigo CSS resultante no es vlido segn elestndar ofcial y por tanto, no supera satisfatoriamente el proceso de validacin de herramientas como el validadorde CSS del W3C
Lorem ipsum dolor sit amet,consectetuer adipiscingelit.
(min-height: 150px) Loremipsum dolor sit amet,consectetuer adipiscingelit.
#contenedor { min-height: 300px; overfow: hidden; height: expression(this.scrollHeight < 301? "300px": "auto");}
Por otra parte, establecer medidas mediante operaciones matemticas puede resultar muy til para tener un controlpreciso cuando se utilizan unidades como em y porcentajes. Por este motivo, la futura versin CSS 3 incluir unafuncin 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 operacinmatemtica compleja:
La anchura del elemento #contenedor anterior se establece a una tercera parte del sitio disponible (100%/3) ydespus se le resta el sitio que ocupan los dos mrgenes laterales de 1em de anchura cada uno (2*1em) y elespacio ocupado por los dos bordes laterales de 1px de anchura cada uno (2*1px).
#contenedor { foat: left; margin: 1em; border: solid 1px; width: calc(100%/3 - 2*1em - 2*1px);}
Compartir
Twitter Facebook Google+
Propiedades relacionadas
heightmax-heightmax-widthmin-heightmin-widthwidth
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad min-width
Propiedad min-width
Defnicin
Establece la anchura mnima de los elementos de bloque
Valores permitidos
Uno y slo uno de los siguientes valores:
medida
porcentaje
inherit
Si se utilizan porcentajes, hace referencia a la anchura del elemento en el que se encuentra
Valor inicial
0
Se aplica a
Todos los elementos, salvo los elementos en lnea que no sean imgenes, las flas de tabla y los grupos de flasde tabla.
Vlida en
medios visuales
Se hereda
no
Defnicin enel estndar
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 estaforma, si se reduce el tamao de la ventana del navegador, el sitio disponible disminuye y la anchura de loselementos de bloque es menor. Si se utiliza la propiedad min-width, se puede forzar a que un elemento sloreduzca su anchura hasta cierto lmite, a partir del cual su anchura ya no disminuye.
En el siguiente ejemplo, los dos ocupan todo el sitio disponible en cada momento. Si se reduce el tamaode la ventana del navegador, los dos reducen su tamao para adaptarse al nuevo sitio disponible.
No obstante, el segundo tiene establecida una anchura mnima mediante min-width: 500px, de modo quea partir de ese valor, el no reduce su anchura aunque el sitio disponible siga reducindose. Por lo tanto, sise reduce mucho el tamao de la ventana del navegador, aparece una barra de scroll horizontal.
La propiedad min-width no admite valores negativos y los valores en porcentaje toman como referencia la anchuradel elemento contenedor.
El navegador Internet Explorer 6 no incluye esta propiedad, por lo que se debe utilizar un truco que hace uso deCSS y JavaScript para simular el comportamiento de la propiedad min-width:
El ejemplo anterior hace uso de una funcin llamada expression() que slo funciona en los navegadores de tipoInternet Explorer (desde su versin 5). Esta funcin permite establecer una medida utilizando expresionesmatemticas o mediante cdigo JavaScript.
En este caso, se utiliza JavaScript para establecer de forma dinmica la anchura del elemento #contenedor. Si laanchura de la pgina (obtenida mediante document.body.clientWidth) es menor que 301px, se establece suanchura a 300px. En cualquier otro caso, se deja que el navegador calcule automticamente la anchura necesariamediante el valor auto.
El principal inconveniente de utilizar la funcin expression() es que el cdigo CSS resultante no es vlido segn elestndar ofcial y por tanto, no supera satisfatoriamente el proceso de validacin de herramientas como el validadorde CSS del W3C
Por otra parte, establecer medidas mediante operaciones matemticas puede resultar muy til para tener un controlpreciso cuando se utilizan unidades como em y porcentajes. Por este motivo, la futura versin CSS 3 incluir unafuncin llamada calc() cuyo funcionamiento es idntico a expression().
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
(min-width: 500px) Lorem ipsum dolor sit amet, consectetuer adipiscing elit
#contenedor { min-width: 300px; width: expression(document.body.clientWidth < 301? "300px": "auto" );}
El siguiente ejemplo muestra el uso de calc() para establecer la anchura de un elemento mediante una operacinmatemtica compleja:
La anchura del elemento #contenedor anterior se establece a una tercera parte del sitio disponible (100%/3) ydespus se le resta el sitio que ocupan los dos mrgenes laterales de 1em de anchura cada uno (2*1em) y elespacio ocupado por los dos bordes laterales de 1px de anchura cada uno (2*1px).
#contenedor { foat: left; margin: 1em; border: solid 1px; width: calc(100%/3 - 2*1em - 2*1px);}
Compartir
Twitter Facebook Google+
Propiedades relacionadas
heightmax-heightmax-widthmin-heightmin-widthwidth
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad width
Propiedad width
Defnicin
Establece la anchura 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 anchura del elemento en el que se encuentra
Valor inicial
auto
Se aplica a
Todos los elementos, salvo los elementos en lnea que no sean imgenes, las flas de tabla y los grupos de flasde tabla.
Vlida en
medios visuales
Se hereda
no
Defnicin enel estndar
w3.org/TR/CSS21/visudet.html#propdef-width
Ejemplos de usoPara los elementos de bloque y las imgenes, la propiedad width permite establecer su anchura directamentemediante una medida. El siguiente ejemplo establece la anchura a un , de modo que no ocupe todo el sitiodisponible:
Aunque ahora el no ocupa toda la anchura disponible, sigue siendo un elemento de bloque, lo que signifcaque si se coloca seguido otro idntico, se mostrarn uno debajo de otro:
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 pesarde que a cada enlace se le asigna una anchura diferente, el navegador los muestra con la misma anchura:
Si se utilizan unidades de medida, los valores indicados no pueden ser negativos. Si en vez de una unidad demedida se indica un porcentaje, la referencia de ese valor es la anchura del elemento que lo contiene.
En el siguiente ejemplo, los dos elementos interiores tienen la misma anchura del 50%, pero como laanchura de su elemento contenedor es diferente, la anchura real de cada interno tambin es diferente:
div { width: 150px;}
div { width: 150px;}
div { width: 150px;}
(width: 50px) Lorem ipsum dolor sit amet
(width: 150px) Lorem ipsum dolor sit amet
(width: 250px) Lorem ipsum dolor sit amet
div { width:50%; }
div { width: 50%; }
Si se establece la anchura de un elemento con la unidad de medida em, el valor indicado toma como referencia eltamao de letra del propio elemento. En el siguiente ejemplo, los dos tienen el mismo valor en la propiedadwidth, pero como su tamao de letra es muy diferente, su anchura en pantalla tambin es muy diferente:
El valor auto es el valor por defecto de la anchura de todos los elementos. En este caso, el navegador determina laanchura 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 decada elemento. Si se aaden mrgenes, bordes y rellenos, la anchura total con la que se muestra el elemento sermayor que el valor de la propiedad width:
div { width: 20em; font-size: 1em;}
div { width: 20em; font-size: 2em;}
div { width: 350px; }
div { width: 350px; padding: 30px; border:5px solid #000; }
Compartir
Twitter Facebook Google+
Propiedades relacionadas
heightmax-heightmax-widthmin-heightmin-widthwidth
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad margin-right
Propiedad margin-right
Defnicin
Establece la anchura del margen derecho de los elementos
Valores permitidos
Uno y slo uno de los siguientes valores:
medida
porcentaje
auto
inherit
Si se utilizan porcentajes, hace referencia a la anchura del elemento en el que se encuentra
Valor inicial
0
Se aplica a
Todos los elementos
Vlida en
medios visuales
Se hereda
no
Defnicin enel estndar
w3.org/TR/CSS21/box.html#propdef-margin-right
Ejemplos de usoPara cualquier elemento de la pgina, la propiedad margin-right establece la anchura de su margen derecho,como se muestra en el siguiente ejemplo:
Como las zonas de los mrgenes son transparentes y muestran el color de fondo que tenga establecido suelemento contenedor, en el ejemplo anterior no se puede ver claramente el margen derecho a menos que semuestre otro elemento a su derecha.
Tambin es posible utilizar valores negativos en el margen derecho. En el siguiente ejemplo, el interior tieneun margen derecho de -20px, lo que en la prctica implica que "se sale" por la parte derecha de su elementocontenedor:
Si se utilizan porcentajes, su referencia es la anchura del elemento contenedor. Si no se ha establecido de formaexplcita 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 formaautomtica. En el siguiente ejemplo, el primer defne un margen derecho de 40px, mientras que el segundo defne un margen izquierdo de 20px. El navegador muestra un margen lateral de 60px entre los doselementos:
div { margin-right: 50px; }
div { margin-right: -20px; }
div { margin-right: 40px; } div { margin-left: 20px; }
Compartir
Twitter Facebook Google+
Propiedades relacionadas
margin-rightmargin-leftmargin-topmargin-bottommargin
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad margin-left
Propiedad margin-left
Defnicin
Establece la anchura del margen izquierdo de los elementos
Valores permitidos
Uno y slo uno de los siguientes valores:
medida
porcentaje
auto
inherit
Si se utilizan porcentajes, hace referencia a la anchura del elemento en el que se encuentra
Valor inicial
0
Se aplica a
Todos los elementos
Vlida en
medios visuales
Se hereda
no
Defnicin enel estndar
w3.org/TR/CSS21/box.html#propdef-margin-left
Ejemplos de usoPara 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 tiene unmargen izquierdo de -10px, lo que en la prctica implica que el elemento "se sale" por la parte izquierda de suelemento contenedor:
Si se utilizan porcentajes, su referencia es la anchura del elemento contenedor. Si no se ha establecido de formaexplcita 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 formaautomtica. En el siguiente ejemplo, el primer defne un margen derecho de 40px, mientras que el segundo defne un margen izquierdo de 20px. El navegador muestra un margen lateral de 60px entre los doselementos:
div { margin-left: 50px; }
div { margin-left: -10px; }
div { margin-right: 40px; } div { margin-left: 20px; }
Compartir
Twitter Facebook Google+
Propiedades relacionadas
margin-rightmargin-leftmargin-topmargin-bottommargin
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad margin-top
Propiedad margin-top
Defnicin
Establece la anchura del margen superior 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 anchura del elemento en el que se encuentra
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
Defnicin enel estndar
w3.org/TR/CSS21/box.html#propdef-margin-top
Ejemplos de usoPara los elementos de bloque y las imgenes, la propiedad margin-top establece la anchura de su margensuperior, como se muestra en el siguiente ejemplo:
Tambin es posible utilizar valores negativos en el margen superior. En el siguiente ejemplo, el tiene unmargen superior de -20px, lo que en la prctica implica que el elemento "se sale" por la parte superior de suelemento contenedor:
Si se utilizan porcentajes, su referencia es la anchura del elemento contenedor. Si no se ha establecido de formaexplcita una anchura, se sustituye por el valor auto.
El aspecto ms importante relacionado con los mrgenes es que CSS fusiona de forma automtica los mrgenesverticales de los elementos de bloque.
Si en una pgina web dos elementos de bloque contiguos defnen sus propios mrgenes verticales (mediante laspropiedades margin-top y margin-bottom), el navegador los fusiona de forma automtica y muestra un margenvertical igual al mayor de los dos mrgenes verticales.
En el siguiente ejemplo, el primer defne un margen inferior de 40px, mientras que el segundo defneun margen superior de 20px. Como se trata de dos mrgenes verticales contiguos, el navegador los fusiona y sequeda con el ms grande (en este caso, los 40px):
La fusin automtica de mrgenes verticales no se realiza en los elementos posicionados mediante la propiedadfoat y en los elementos posicionados de forma absoluta (position: absolute).
div { margin-top: 20px; }
div { margin-top: -20px; }
div { margin-bottom: 40px; }
div { margin-top: 20px; }
Compartir
Twitter Facebook Google+
Propiedades relacionadas
margin-rightmargin-leftmargin-topmargin-bottommargin
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad margin-bottom
Propiedad margin-bottom
Defnicin
Establece la anchura del margen inferior 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 anchura del elemento en el que se encuentra
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
Defnicin enel estndar
w3.org/TR/CSS21/box.html#propdef-margin-bottom
Ejemplos de usoPara los elementos de bloque y las imgenes, la propiedad margin-bottom establece la anchura de su margeninferior, como se muestra en el siguiente ejemplo:
Tambin es posible utilizar valores negativos en el margen inferior. En el siguiente ejemplo, el tiene un margeninferior de -20px, lo que en la prctica implica que el elemento "se sale" por la parte inferior de su elementocontenedor:
Si se utilizan porcentajes, su referencia es la anchura del elemento contenedor. Si no se ha establecido de formaexplcita una anchura, se sustituye por el valor auto.
El aspecto ms importante relacionado con los mrgenes es que CSS fusiona de forma automtica los mrgenesverticales de los elementos de bloque.
Si en una pgina web dos elementos de bloque contiguos defnen sus propios mrgenes verticales (mediante laspropiedades margin-top y margin-bottom), el navegador los fusiona de forma automtica y muestra un margenvertical igual al mayor de los dos mrgenes verticales.
En el siguiente ejemplo, el primer defne un margen inferior de 40px, mientras que el segundo defneun margen superior de 20px. Como se trata de dos mrgenes verticales contiguos, el navegador los fusiona y sequeda con el ms grande (en este caso, los 40px):
La fusin automtica de mrgenes verticales no se realiza en los elementos posicionados mediante la propiedadfoat y en los elementos posicionados de forma absoluta (position: absolute).
div { margin-bottom: 20px; }
div { margin-bottom: -20px; }
div { margin-bottom: 40px; }
div { margin-top: 20px; }
Compartir
Twitter Facebook Google+
Propiedades relacionadas
margin-rightmargin-leftmargin-topmargin-bottommargin
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
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
Si se utilizan porcentajes, hace referencia a la anchura del elemento en el que se encuentra
Valor inicial
Cada margen defne su propio valor por defecto
Se aplica a
Todos los elementos
Vlida en
medios visuales
Se hereda
no
Defnicin enel estndar
w3.org/TR/CSS21/box.html#propdef-margin
Ejemplos de usoLa propiedad margin es una de las "propiedades shorthand" que defne CSS y que se utilizan para establecer deforma 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 reglaCSS:
Utilizando la propiedad margin, es posible establecer de forma abreviada el mismo valor a todos los mrgenes deun elemento:
La propiedad margin es tan poderosa que permite establecer uno, dos, tres o los cuatro mrgenes de formasimultnea.
Si se indican dos valores, el primero hace referencia a los mrgenes verticales y el segundo es el valor de losmrgenes horizontales, de modo que las siguientes reglas CSS son equivalentes:
Si se indican tres valores, el primero hace referencia al margen superior, el segundo es el valor de los mrgeneshorizontales y el tercero es el margen inferior, de modo que las siguientes reglas CSS son equivalentes:
div { margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;}
div { margin: 10px;}
div { margin: 10px 20px;} div { margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px;}
div { margin: 10px 20px 30px;} div { margin-top: 10px; margin-right: 20px; margin-bottom: 30px;
Por ltimo, si se indican cuatro valores, el primero es el margen superior, el segundo es el margen derecho, eltercero es el margen inferior y el cuarto es el margen izquierdo, de modo que las siguientes reglas CSS sonequivalentes:
El uso de propiedades como margin no slo hace ms breve el cdigo CSS, sino que demuestra que se tienenconocimientos avanzados de CSS.
margin-left: 20px;}
div { margin: 10px 20px 30px 40px;} div { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;}
Compartir
Twitter Facebook Google+
Propiedades relacionadas
margin-rightmargin-leftmargin-topmargin-bottommargin
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad padding-
top
Propiedad padding-top
Defnicin
Establece la anchura de la zona de relleno superior de los elementos
Valores permitidos
Uno y slo uno de los siguientes valores:
medida
porcentaje
inherit
Si se utilizan porcentajes, hace referencia a la anchura del elemento en el que se encuentra
Valor inicial
0
Se aplica a
Todos los elementos
Vlida en
medios visuales
Se hereda
no
Defnicin enel estndar
w3.org/TR/CSS21/box.html#propdef-padding-top
Ejemplos de usoLa propiedad padding-top establece la anchura de la zona de relleno superior de un elemento, como se muestra
en el siguiente ejemplo:
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 contenedor tiene establecida una anchura de 250px, mientras que el interior tiene un relleno superior igual a 20%, lo que en la prctica se traduce en 50px (el 20% de 250px):
div { padding-top: 50px; }
div { width: 250px; }
div { padding-top: 20%; }
Compartir
Twitter Facebook Google+
Propiedades relacionadas
padding-toppadding-rightpadding-bottompadding-leftpadding
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad padding-
right
Propiedad padding-right
Defnicin
Establece la anchura de la zona de relleno derecho de los elementos
Valores permitidos
Uno y slo uno de los siguientes valores:
medida
porcentaje
inherit
Si se utilizan porcentajes, hace referencia a la anchura del elemento en el que se encuentra
Valor inicial
0
Se aplica a
Todos los elementos
Vlida en
medios visuales
Se hereda
no
Defnicin enel estndar
w3.org/TR/CSS21/box.html#propdef-padding-right
Ejemplos de usoLa propiedad padding-right establece la anchura de la zona de relleno derecho de un elemento, como se
muestra en el siguiente ejemplo:
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 contenedor tiene establecida una anchura de 250px, mientras que el interior tiene un relleno derecho igual a 20%, lo que en la prctica se traduce en 50px (el 20% de 250px):
div { padding-right: 50px; }
div { width: 250px; }
div { padding-right: 20%;}
Compartir
Twitter Facebook Google+
Propiedades relacionadas
padding-toppadding-rightpadding-bottompadding-leftpadding
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad padding-
bottom
Propiedad padding-bottom
Defnicin
Establece la anchura de la zona de relleno inferior de los elementos
Valores permitidos
Uno y slo uno de los siguientes valores:
medida
porcentaje
inherit
Si se utilizan porcentajes, hace referencia a la anchura del elemento en el que se encuentra
Valor inicial
0
Se aplica a
Todos los elementos
Vlida en
medios visuales
Se hereda
no
Defnicin enel estndar
w3.org/TR/CSS21/box.html#propdef-padding-bottom
Ejemplos de usoLa propiedad padding-bottom establece la anchura de la zona de relleno inferior de un elemento, como se
muestra en el siguiente ejemplo:
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 contenedor tiene establecida una anchura de 250px, mientras que el interior tiene un relleno inferior igual a 20%, lo que en la prctica se traduce a 50px (el 20% de 250px):
div { padding-bottom: 50px; }
div { width: 250px; }
div { padding-bottom: 20%; }
Compartir
Twitter Facebook Google+
Propiedades relacionadas
padding-toppadding-rightpadding-bottompadding-leftpadding
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad padding-
left
Propiedad padding-left
Defnicin
Establece la anchura de la zona de relleno izquierdo de los elementos
Valores permitidos
Uno y slo uno de los siguientes valores:
medida
porcentaje
inherit
Si se utilizan porcentajes, hace referencia a la anchura del elemento en el que se encuentra
Valor inicial
0
Se aplica a
Todos los elementos
Vlida en
medios visuales
Se hereda
no
Defnicin enel estndar
w3.org/TR/CSS21/box.html#propdef-padding-left
Ejemplos de usoLa propiedad padding-left establece la anchura de la zona de relleno izquierdo de un elemento, como se
muestra en el siguiente ejemplo:
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 contenedor tiene establecida una anchura de 250px, mientras que el interior tiene un relleno izquierdo igual a 20%, lo que en la prctica se traduce a 50px (el 20% de 250px):
div { padding-left: 50px; }
div { width: 250px; }
div { padding-left: 20%; }
Compartir
Twitter Facebook Google+
Propiedades relacionadas
padding-toppadding-rightpadding-bottompadding-leftpadding
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad padding
Propiedad padding
Defnicin
Establece la anchura de algunas o todas las zonas de relleno de los elementos
Valores permitidos
Uno, dos, tres o cuatro de los siguientes valores:
medida
porcentaje
inherit
Si se utilizan porcentajes, hace referencia a la anchura del elemento en el que se encuentra
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
Defnicin enel estndar
w3.org/TR/CSS21/box.html#propdef-padding
Ejemplos de usoLa 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 siguienteregla CSS:
Utilizando la propiedad padding, es posible establecer de forma abreviada el mismo valor a todas las zonas derelleno de un elemento:
La propiedad padding es tan poderosa que permite establecer una, dos, tres o las cuatro zonas de relleno deforma simultnea.
Si se indican dos valores, el primero hace referencia a los rellenos verticales y el segundo es el valor de los rellenoshorizontales, de modo que las siguientes reglas CSS son equivalentes:
Si se indican tres valores, el primero hace referencia al relleno superior, el segundo es el valor de los rellenoshorizontales y el tercero es el relleno inferior, de modo que las siguientes reglas CSS son equivalentes:
div { padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;}
div { padding: 10px;}
div { padding: 10px 20px;} div { padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;}
div { padding: 10px 20px 30px;} div { padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 20px;}
Por ltimo, si se indican cuatro valores, el primero es el relleno superior, el segundo es el relleno derecho, eltercero es el relleno inferior y el cuarto es el relleno izquierdo, de modo que las siguientes reglas CSS sonequivalentes:
El uso de propiedades como padding no slo hace ms breve el cdigo CSS, sino que demuestra que se tienenconocimientos avanzados de CSS.
div { padding: 10px 20px 30px 40px;} div { padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px;}
Compartir
Twitter Facebook Google+
Propiedades relacionadas
padding-toppadding-rightpadding-bottompadding-leftpadding
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad border-
color
Propiedad border-color
Defnicin
Establece el color de algunos o todos los bordes de los elementos
Valores permitidos
Uno, dos, tres o cuatro de los siguientes valores:
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
Defnicin enel estndar
w3.org/TR/CSS21/box.html#propdef-border-color
Ejemplos de usoLa propiedad border-color es una de las "propiedades shorthand" que defne CSS y que se utilizan paraestablecer 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 lasiguiente regla CSS:
En este caso, es mejor utilizar la propiedad border-color para establecer de forma abreviada el mismo color atodos los bordes del elemento:
La propiedad border-color es tan poderosa que permite establecer el color de uno, dos, tres o los cuatro bordesde forma simultnea.
Si se indican dos valores, el primero hace referencia a los bordes superior e inferior y el segundo es el valor de losbordes izquierdo y derecho, de modo que las siguientes reglas CSS son equivalentes:
Si se indican tres valores, el primero hace referencia al borde superior, el segundo es el valor de los bordesizquierdo y derecho y el tercero es el borde inferior, de modo que las siguientes reglas CSS son equivalentes:
Por ltimo, si se indican cuatro valores, el primero es el borde superior, el segundo es el borde derecho, el tercero
div { border-top-color: red; border-right-color: red; border-bottom-color: red; border-left-color: red;}
div { border-color: red;}
div { border-color: red blue;} div { border-top-color: red; border-right-color: blue; border-bottom-color: red; border-left-color: blue;}
div { border-color: red blue green;} div { border-top-color: red; border-right-color: blue; border-bottom-color: green; border-left-color: blue;}
es el borde inferior y el cuarto es el borde izquierdo, de modo que las siguientes reglas CSS son equivalentes:
Para establecer el color de cada borde, se puede utilizar cualquiera de las diferentes formas de indicar un color enCSS:
Adems de utilizar colores normales, tambin es posible establecer alguno o todos los bordes de colortransparente. Un borde transparente es muy diferente a no tener borde, ya que el borde transparente no se vepero s que ocupa sitio.
En el siguiente ejemplo, la primera caja tiene establecido un borde transparente que, gracias a JavaScript, cambiade color cuando se pasa el ratn por encima de la caja. Como el borde transparente no se ve pero s que ocupasitio, al mostrar el nuevo borde la caja no se mueve, ya que el navegador haba reservado el sitio necesario para elborde transparente.
Sin embargo, la segunda caja no tiene establecido ningn borde y al pasar el ratn por encima suyo, gracias aJavaScript, se muestra un borde. En este caso, como antes no exista un borde y ahora s, el navegador desplazala caja ya que debe hacer sitio para mostrar el borde.
El uso de propiedades como border-color no slo hace ms breve el cdigo CSS, sino que demuestra que setienen conocimientos avanzados de CSS.
div { border-color: red blue green white;} div { border-top-color: red; border-right-color: blue; border-bottom-color: green; border-left-color: white;}
div { border-color: red #080; }
div { border-color: #C00 #F00 #600; }
div { border-color: rgb(255, 0, 0) blue#080; }
div { border-color: transparent; }
div { border: none; }
Compartir
Twitter Facebook Google+
Propiedades relacionadas
border-colorborder-style
border-topborder-rightborder-bottomborder-leftborder-top-colorborder-right-colorborder-bottom-colorborder-left-colorborder-top-style
border-right-style
border-bottom-style
border-left-style
border-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-widthborder
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad border-
style
Propiedad border-style
Defnicin
Establece el estilo de algunos o todos los bordes de los elementos
Valores permitidos
Uno, dos, tres o cuatro de los siguientes valores:
Valor inicial
Cada borde defne su propio valor por defecto
Se aplica a
Todos los elementos
Vlida en
medios visuales
Se hereda
no
Defnicin enel estndar
none hidden
dotted dashed
solid double
groove ridge
inset outset
inherit
w3.org/TR/CSS21/box.html#propdef-border-style
Ejemplos de usoLa propiedad border-style permite establecer el estilo de algunos o todos los bordes de un elemento. Elestndar CSS 2 slo permite utilizar los tipos de borde predefnidos, por lo que no se pueden hacer bordescurvados 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
noneNo se muestra ningn borde. Como se trata del valor por defecto de cada uno de los bordes, ningnelemento muestra un borde a menos que se establezca de forma explcita
hidden
Visualmente es idntico a none, ya que provoca que no se muestre ningn borde. Su nica diferenciaes la forma en la que el navegador resuelve los confictos entre bordes adyacentes de las celdas delas 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
grooveBorde hundido, que visualmente parece que se encuentra por debajo del nivel de la superfcie de lapantalla
ridgeBorde saliente, que visualmente parece que se encuentra por encima del nivel de la superfcie de lapantalla
insetBorde hundido, que provoca que el elemento que encierra parezca que se encuentra por debajo delnivel de la superfcie de la pantalla
outsetBorde saliente, que provoca que el elemento que encierra parezca que se encuentra por encima delnivel de la superfcie de la pantalla
Adems, la propiedad border-style es una de las "propiedades shorthand" que defne CSS y que se utilizan paraestablecer de forma abreviada el valor de una o ms propiedades individuales.
Si se quiere establecer el mismo valor para el estilo de todos los bordes de un elemento, se podra utilizar lasiguiente regla CSS:
div { border-top-style: solid;
En este caso, es mejor utilizar la propiedad border-style para establecer de forma abreviada el mismo estilo atodos los bordes del elemento:
La propiedad border-style es tan poderosa que permite establecer el estilo de uno, dos, tres o los cuatro bordesde forma simultnea.
Si se indican dos valores, el primero hace referencia a los bordes superior e inferior y el segundo es el valor de losbordes izquierdo y derecho, de modo que las siguientes reglas CSS son equivalentes:
Si se indican tres valores, el primero hace referencia al borde superior, el segundo es el valor de los bordesizquierdo y derecho y el tercero es el borde inferior, de modo que las siguientes reglas CSS son equivalentes:
Por ltimo, si se indican cuatro valores, el primero es el borde superior, el segundo es el borde derecho, el terceroes el borde inferior y el cuarto es el borde izquierdo, de modo que las siguientes reglas CSS son equivalentes:
border-right-style: solid; border-bottom-style: solid; border-left-style: solid;}
div { border-style: solid;}
div { border-style: solid double;} div { border-top-style: solid; border-right-style: double; border-bottom-style: solid; border-left-style: double;}
div { border-style: solid double dashed;} div { border-top-style: solid; border-right-style: double; border-bottom-style: dashed; border-left-style: double;}
div { border-style: solid double dashed dotted;}
Por otra parte, la especifcacin ofcial defne los diferentes estilos de borde que se pueden aplicar, pero no detallael aspecto que deben tener. De esta forma, existen diferencias notables en el aspecto con el que los navegadoresmuestran cada estilo de borde.
En el siguiente ejemplo se muestran todos los estilos de borde con una anchura de 1px y con una anchura de4px. Prueba a ver esta pgina en diferentes navegadores y podrs apreciar diferencias importantes sobre todo enlos estilos groove y ridge:
Utilizando la propiedad border-style se pueden mostrar fcilmente bordes complejos en cualquier elemento:
div { border-top-style: solid; border-right-style: double; border-bottom-style: dashed; border-left-style: dotted;}
div { border-style: none; border-width:1px; }
div { border-style: hidden; border-width:1px; }
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: none; border-width:4px; }
div { border-style: hidden; border-width:4px; }
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; }
div { border-style: solid double; }
El uso de propiedades como border-style no slo hace ms breve el cdigo CSS, sino que demuestra que setienen conocimientos avanzados de CSS.
div { border-style: dashed dotted; }
div { border-style: dashed double dotted; }
Compartir
Twitter Facebook Google+
Propiedades relacionadas
border-colorborder-styleborder-topborder-rightborder-bottomborder-leftborder-top-colorborder-right-colorborder-bottom-colorborder-left-colorborder-top-styleborder-right-styleborder-bottom-styleborder-left-styleborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-widthborder
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad border-
top
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
Defnicin enel estndar
w3.org/TR/CSS21/box.html#propdef-border-top
Ejemplos de usoLa propiedad border-top es una de las "propiedades shorthand" que defne CSS y que se utilizan para establecerde 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 loque 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 superiorde un elemento:
Aunque suele ser comn utilizar el orden "grosor, estilo y color", la propiedad border-top permite indicar laspropiedades en cualquier orden:
La propiedad border-top no requiere que se indiquen las tres propiedades que defnen el estilo del bordesuperior. 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 valormedium a su grosor y el valor black a su color:
En el siguiente ejemplo se omite el grosor del borde, por lo que el navegador le asigna automticamente el valormedium:
No obstante, como el valor por defecto del estilo de un borde es none, si no se indica explcitamente el estilo del
borde, el resultado es que el navegador no muestra ese borde:
div { border-top: 1px solid #C00; }
div { border-top: medium double #369; }
div { border-top: 1px solid #C00; }
div { border-top: solid 1px #C00; }
div { border-top: #C00 1px solid; }
div { border-top: #C00 solid 1px; }
div { border-top: solid; }
div { border-top: solid blue; }
El grosor del borde se puede establecer de cualquiera de las diferentes formas de indicar una medida en CSS. Elcolor tambin se puede establecer de alguna de las diferentes formas de indicar un color en CSS. Por ltimo, elestilo del borde slo puede ser alguno de los valores que se incluyen en la siguiente tabla:
Valor Descripcin
noneNo se muestra ningn borde. Como se trata del valor por defecto de cada uno de los bordes, ningnelemento muestra un borde a menos que se establezca de forma explcita
hidden
Visualmente es idntico a none, ya que provoca que no se muestre ningn borde. Su nica diferenciaes la forma en la que el navegador resuelve los confictos entre bordes adyacentes de las celdas delas 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
grooveBorde hundido, que visualmente parece que se encuentra por debajo del nivel de la superfcie de lapantalla
ridgeBorde saliente, que visualmente parece que se encuentra por encima del nivel de la superfcie de lapantalla
insetBorde hundido, que provoca que el elemento que encierra parezca que se encuentra por debajo delnivel de la superfcie de la pantalla
outsetBorde saliente, que provoca que el elemento que encierra parezca que se encuentra por encima delnivel de la superfcie de la pantalla
Puedes ver ejemplos del aspecto de todos los estilos de borde en la defnicin de la propiedad border-style.
La propiedad border-top es mucho ms utilizada que border-top-width, border-top-color y border-top-style, ya que permite defnir el aspecto del borde superior de un elemento de forma fcil y concisa.
div { border-top: 2px blue; }
Compartir
Twitter Facebook Google+
Propiedades relacionadas
border-colorborder-styleborder-topborder-rightborder-bottomborder-leftborder-top-colorborder-right-colorborder-bottom-colorborder-left-colorborder-top-styleborder-right-styleborder-bottom-styleborder-left-styleborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-widthborder
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad border-
right
Propiedad border-right
Defnicin
Establece algunas o todas las propiedades del borde derecho 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
Defnicin enel estndar
w3.org/TR/CSS21/box.html#propdef-border-right
Ejemplos de usoLa propiedad border-right es una de las "propiedades shorthand" que defne CSS y que se utilizan paraestablecer 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 loque se refere a los valores permitidos "alguno o todos los siguientes valores y en cualquier orden").
El uso ms habitual de border-right es el de establecer simultneamente el grosor, estilo y color del bordederecho de un elemento:
Aunque suele ser comn utilizar el orden "grosor, estilo y color", la propiedad border-right permite indicar laspropiedades en cualquier orden:
La propiedad border-right no requiere que se indiquen las tres propiedades que defnen el estilo del bordederecho. 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 valormedium a su grosor y el valor black a su color:
En el siguiente ejemplo se omite el grosor del borde, por lo que el navegador le asigna automticamente el valormedium:
No obstante, como el valor por defecto del estilo de un borde es none, si no se indica explcitamente el estilo del
borde, el resultado es que el navegador no muestra ese borde:
div { border-right: 1px solid #C00; }
div { border-right: medium double #369; }
div { border-right: 1px solid #C00; }
div { border-right: solid 1px #C00; }
div { border-right: #C00 1px solid; }
div { border-right: #C00 solid 1px; }
div { border-right: solid; }
div { border-right: solid blue; }
El grosor del borde se puede establecer de cualquiera de las diferentes formas de indicar una medida en CSS. Elcolor tambin se puede establecer de alguna de las diferentes formas de indicar un color en CSS. Por ltimo, elestilo del borde slo puede ser alguno de los valores que se incluyen en la siguiente tabla:
Valor Descripcin
noneNo se muestra ningn borde. Como se trata del valor por defecto de cada uno de los bordes, ningnelemento muestra un borde a menos que se establezca de forma explcita
hidden
Visualmente es idntico a none, ya que provoca que no se muestre ningn borde. Su nica diferenciaes la forma en la que el navegador resuelve los confictos entre bordes adyacentes de las celdas delas 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
grooveBorde hundido, que visualmente parece que se encuentra por debajo del nivel de la superfcie de lapantalla
ridgeBorde saliente, que visualmente parece que se encuentra por encima del nivel de la superfcie de lapantalla
insetBorde hundido, que provoca que el elemento que encierra parezca que se encuentra por debajo delnivel de la superfcie de la pantalla
outsetBorde saliente, que provoca que el elemento que encierra parezca que se encuentra por encima delnivel de la superfcie de la pantalla
Puedes ver ejemplos del aspecto de todos los estilos de borde en la defnicin de la propiedad border-style.
La propiedad border-right es mucho ms utilizada que border-right-width, border-right-color y border-right-style, ya que permite defnir el aspecto del borde derecho de un elemento de forma fcil y concisa.
div { border-right: 2px blue; }
Compartir
Twitter Facebook Google+
Propiedades relacionadas
border-colorborder-styleborder-topborder-rightborder-bottomborder-leftborder-top-colorborder-right-colorborder-bottom-colorborder-left-colorborder-top-styleborder-right-styleborder-bottom-styleborder-left-styleborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-widthborder
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad border-
bottom
Propiedad border-bottom
Defnicin
Establece algunas o todas las propiedades del borde inferior 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
Defnicin enel estndar
w3.org/TR/CSS21/box.html#propdef-border-bottom
Ejemplos de usoLa propiedad border-bottom es una de las "propiedades shorthand" que defne CSS y que se utilizan paraestablecer 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 loque se refere a los valores permitidos "alguno o todos los siguientes valores y en cualquier orden").
El uso ms habitual de border-bottom es el de establecer simultneamente el grosor, estilo y color del bordeinferior de un elemento:
Aunque suele ser comn utilizar el orden "grosor, estilo y color", la propiedad border-bottom permite indicar laspropiedades en cualquier orden:
La propiedad border-bottom no requiere que se indiquen las tres propiedades que defnen el estilo del bordeinferior. 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 valormedium a su grosor y el valor black a su color:
En el siguiente ejemplo se omite el grosor del borde, por lo que el navegador le asigna automticamente el valormedium:
No obstante, como el valor por defecto del estilo de un borde es none, si no se indica explcitamente el estilo del
borde, el resultado es que el navegador no muestra ese borde:
div { border-bottom: 1px solid #C00; }
div { border-bottom: medium double #369; }
div { border-bottom: 1px solid #C00; }
div { border-bottom: solid 1px #C00; }
div { border-bottom: #C00 1px solid; }
div { border-bottom: #C00 solid 1px; }
div { border-bottom: solid; }
div { border-bottom: solid blue; }
El grosor del borde se puede establecer de cualquiera de las diferentes formas de indicar una medida en CSS. Elcolor tambin se puede establecer de alguna de las diferentes formas de indicar un color en CSS. Por ltimo, elestilo del borde slo puede ser alguno de los valores que se incluyen en la siguiente tabla:
Valor Descripcin
noneNo se muestra ningn borde. Como se trata del valor por defecto de cada uno de los bordes, ningnelemento muestra un borde a menos que se establezca de forma explcita
hidden
Visualmente es idntico a none, ya que provoca que no se muestre ningn borde. Su nica diferenciaes la forma en la que el navegador resuelve los confictos entre bordes adyacentes de las celdas delas 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
grooveBorde hundido, que visualmente parece que se encuentra por debajo del nivel de la superfcie de lapantalla
ridgeBorde saliente, que visualmente parece que se encuentra por encima del nivel de la superfcie de lapantalla
insetBorde hundido, que provoca que el elemento que encierra parezca que se encuentra por debajo delnivel de la superfcie de la pantalla
outsetBorde saliente, que provoca que el elemento que encierra parezca que se encuentra por encima delnivel de la superfcie de la pantalla
Puedes ver ejemplos del aspecto de todos los estilos de borde en la defnicin de la propiedad border-style.
La propiedad border-bottom es mucho ms utilizada que border-bottom-width, border-bottom-color yborder-bottom-style, ya que permite defnir el aspecto del borde inferior de un elemento de forma fcil y concisa.
div { border-bottom: 2px blue; }
Compartir
Twitter Facebook Google+
Propiedades relacionadas
border-colorborder-styleborder-topborder-rightborder-bottomborder-leftborder-top-colorborder-right-colorborder-bottom-colorborder-left-colorborder-top-styleborder-right-styleborder-bottom-styleborder-left-styleborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-widthborder
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad border-
left
Propiedad border-left
Defnicin
Establece algunas o todas las propiedades del borde izquierdo 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
Defnicin enel estndar
w3.org/TR/CSS21/box.html#propdef-border-left
Ejemplos de usoLa propiedad border-left es una de las "propiedades shorthand" que defne CSS y que se utilizan paraestablecer 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 loque se refere a los valores permitidos "alguno o todos los siguientes valores y en cualquier orden").
El uso ms habitual de border-left es el de establecer simultneamente el grosor, estilo y color del bordeizquierdo de un elemento:
Aunque suele ser comn utilizar el orden "grosor, estilo y color", la propiedad border-left permite indicar laspropiedades en cualquier orden:
La propiedad border-left no requiere que se indiquen las tres propiedades que defnen el estilo del bordeizquierdo. 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 valormedium a su grosor y el valor black a su color:
En el siguiente ejemplo se omite el grosor del borde, por lo que el navegador le asigna automticamente el valormedium:
No obstante, como el valor por defecto del estilo de un borde es none, si no se indica explcitamente el estilo del
borde, el resultado es que el navegador no muestra ese borde:
div { border-left: 1px solid #C00; }
div { border-left: medium double #369; }
div { border-left: 1px solid #C00; }
div { border-left: solid 1px #C00; }
div { border-left: #C00 1px solid; }
div { border-left: #C00 solid 1px; }
div { border-left: solid; }
div { border-left: solid blue; }
El grosor del borde se puede establecer de cualquiera de las diferentes formas de indicar una medida en CSS. Elcolor tambin se puede establecer de alguna de las diferentes formas de indicar un color en CSS. Por ltimo, elestilo del borde slo puede ser alguno de los valores que se incluyen en la siguiente tabla:
Valor Descripcin
noneNo se muestra ningn borde. Como se trata del valor por defecto de cada uno de los bordes, ningnelemento muestra un borde a menos que se establezca de forma explcita
hidden
Visualmente es idntico a none, ya que provoca que no se muestre ningn borde. Su nica diferenciaes la forma en la que el navegador resuelve los confictos entre bordes adyacentes de las celdas delas 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
grooveBorde hundido, que visualmente parece que se encuentra por debajo del nivel de la superfcie de lapantalla
ridgeBorde saliente, que visualmente parece que se encuentra por encima del nivel de la superfcie de lapantalla
insetBorde hundido, que provoca que el elemento que encierra parezca que se encuentra por debajo delnivel de la superfcie de la pantalla
outsetBorde saliente, que provoca que el elemento que encierra parezca que se encuentra por encima delnivel de la superfcie de la pantalla
Puedes ver ejemplos del aspecto de todos los estilos de borde en la defnicin de la propiedad border-style.
La propiedad border-left es mucho ms utilizada que border-left-width, border-left-color y border-left-style, ya que permite defnir el aspecto del borde izquierdo de un elemento de forma fcil y concisa.
div { border-left: 2px blue; }
Compartir
Twitter Facebook Google+
Propiedades relacionadas
border-colorborder-styleborder-topborder-rightborder-bottomborder-leftborder-top-colorborder-right-colorborder-bottom-colorborder-left-colorborder-top-styleborder-right-styleborder-bottom-styleborder-left-styleborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-widthborder
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad border-top-
color
Propiedad border-top-color
Defnicin
Establece el color del borde superior de los elementos
Valores permitidos
Uno y slo uno de los siguientes valores:
color
transparent
inherit
Valor inicial
Color negro
Se aplica a
Todos los elementos
Vlida en
medios visuales
Se hereda
no
Defnicin enel estndar
w3.org/TR/CSS21/box.html#propdef-border-top-color
Ejemplos de usoEn primer lugar, la propiedad border-top-color permite establecer el color del borde superior de un elementomediante cualquiera de las diferentes formas de indicar un color en CSS:
Adems de utilizar colores normales, tambin es posible establecer el borde de color transparente. Un bordetransparente 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 queocupa sitio, al mostrar el nuevo borde la caja no se mueve, ya que el navegador haba reservado el sitio necesariopara 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 navegadordesplaza la caja ya que debe hacer sitio para mostrar el borde.
div { border-top-color: red; }
div { border-top-color: #F00; }
div { border-top-color: rgb(255, 0, 0); }
div { border-top-color: transparent; }
div { border-top: none; }
Compartir
Twitter Facebook Google+
Propiedades relacionadas
border-colorborder-styleborder-topborder-rightborder-bottomborder-leftborder-top-colorborder-right-colorborder-bottom-colorborder-left-color
border-top-styleborder-right-styleborder-bottom-styleborder-left-styleborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-widthborder
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad border-right-
color
Propiedad border-right-color
Defnicin
Establece el color del borde derecho de los elementos
Valores permitidos
Uno y slo uno de los siguientes valores:
color
transparent
inherit
Valor inicial
Color negro
Se aplica a
Todos los elementos
Vlida en
medios visuales
Se hereda
no
Defnicin enel estndar
w3.org/TR/CSS21/box.html#propdef-border-right-color
Ejemplos de usoEn primer lugar, la propiedad border-right-color permite establecer el color del borde derecho de un elementomediante cualquiera de las diferentes formas de indicar un color en CSS:
Adems de utilizar colores normales, tambin es posible establecer el borde de color transparente. Un bordetransparente 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 derecho 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 queocupa sitio, al mostrar el nuevo borde la caja no se mueve, ya que el navegador haba reservado el sitio necesariopara el borde transparente.
Sin embargo, la segunda caja no tiene establecido ningn borde derecho 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 navegadordesplaza la caja ya que debe hacer sitio para mostrar el borde.
En el ejemplo anterior, las dos cajas parecen comportarse igual. El motivo es que a la derecha de las cajas no hayningn otro elemento, por lo que no se puede apreciar el desplazamiento que se produce al pasar el ratn porencima de la segunda caja.
div { border-right-color: red; }
div { border-right-color: #F00; }
div { border-right-color: rgb(255, 0, 0); }
div { border-right-color: transparent; }
div { border-right: none; }
Compartir
Twitter Facebook Google+
Propiedades relacionadas
border-colorborder-styleborder-topborder-rightborder-bottomborder-leftborder-top-color
border-right-colorborder-bottom-colorborder-left-colorborder-top-styleborder-right-styleborder-bottom-styleborder-left-styleborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-widthborder
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad border-bottom-
color
Propiedad border-bottom-color
Defnicin
Establece el color del borde inferior de los elementos
Valores permitidos
Uno y slo uno de los siguientes valores:
color
transparent
inherit
Valor inicial
Color negro
Se aplica a
Todos los elementos
Vlida en
medios visuales
Se hereda
no
Defnicin enel estndar
w3.org/TR/CSS21/box.html#propdef-border-bottom-color
Ejemplos de usoEn primer lugar, la propiedad border-bottom-color permite establecer el color del borde inferior de un elementomediante cualquiera de las diferentes formas de indicar un color en CSS:
Adems de utilizar colores normales, tambin es posible establecer el borde de color transparente. Un bordetransparente 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 inferior 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 queocupa sitio, al mostrar el nuevo borde la caja no se mueve, ya que el navegador haba reservado el sitio necesariopara el borde transparente.
Sin embargo, la segunda caja no tiene establecido ningn borde inferior y al pasar el ratn por encima suyo, graciasa JavaScript, se muestra un borde. En este caso, como antes no exista un borde y ahora s, el navegadordesplaza los contenidos que se encuentran debajo de la caja ya que debe hacer sitio para mostrar el borde.
div { border-bottom-color: red; }
div { border-bottom-color: #F00; }
div { border-bottom-color: rgb(255, 0, 0);}
div { border-bottom-color: transparent; }
div { border-bottom: none; }
Compartir
Twitter Facebook Google+
Propiedades relacionadas
border-colorborder-styleborder-topborder-rightborder-bottomborder-leftborder-top-colorborder-right-colorborder-bottom-colorborder-left-color
border-top-styleborder-right-styleborder-bottom-styleborder-left-styleborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-widthborder
2015 LibrosWeb.es Contacto Novedades Condiciones Privacidad
2.969 das online
Inicio / Referencia de CSS
2.1 / Propiedad border-left-
color
Propiedad border-left-color
Defnicin
Establece el color del borde izquierdo de los elementos
Valores permitidos
Uno y slo uno de los siguientes valores:
color
transparent
inherit
Valor inicial
Color negro
Se aplica a
Todos los elementos
Vlida en
medios visuales
Se hereda
no
Defnicin enel estndar
w3.org/TR/CSS21/box.html#propdef-border-left-color
Ejemplos de usoEn primer lugar, la propiedad border-left-color permite establecer el color del borde izquierdo de un elementomediante cualquiera de las diferentes formas de indicar un color en CSS:
Adems de utilizar colores normales, tambin es posible establecer el borde de color transparente. Un bordetransparente 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 izquierdo 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 queocupa sitio, al mostrar el nuevo borde la