referencia de css 2.1

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



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


2.969 das online


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 flasde tabla.

Vlida en

medios visuales

Se hereda

no


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



heightmax-heightmax-widthmin-heightmin-width

width


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


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


Vlida en

medios visuales

Se hereda

no


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:


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.





#contenedor { max-width: 1200px; width: expression(document.body.clientWidth > 1201? "1200px": "auto");}


Compartir





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


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


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


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.


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");}





Compartir





2.969 das online


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


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


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.



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" );}




Compartir





2.969 das online


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


Vlida en

medios visuales

Se hereda

no


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;}



(width: 50px) 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





2.969 das online


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



margin-rightmargin-leftmargin-topmargin-bottommargin


2.969 das online


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


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





2.969 das online


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


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; }


Compartir





2.969 das online


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


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; }



Compartir





2.969 das online


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





2.969 das online


2.1 / Propiedad padding-

top

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 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 { padding-top: 20%; }

Compartir



padding-toppadding-rightpadding-bottompadding-leftpadding


2.969 das online



right

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 usoLa propiedad padding-right establece la anchura de la zona de relleno derecho de un elemento, como se

muestra en el siguiente ejemplo:


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 { padding-right: 20%;}

Compartir





2.969 das online



bottom

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 usoLa propiedad padding-bottom establece la anchura de la zona de relleno inferior de un elemento, como se



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 { padding-bottom: 20%; }

Compartir





2.969 das online



left

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 usoLa propiedad padding-left establece la anchura de la zona de relleno izquierdo de un elemento, como se



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 { padding-left: 20%; }

Compartir





2.969 das online


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





2.969 das online


2.1 / Propiedad border-

color

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



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


2.969 das online



style

Propiedad border-style

Defnicin

Establece el estilo de algunos o todos los bordes de los elementos

Valores permitidos


Valor inicial

Cada borde defne su propio valor por defecto

Se aplica a

Todos los elementos

Vlida en

medios visuales

Se hereda

no


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



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


2.969 das online



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


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


hidden










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





2.969 das online



right

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


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.





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; }


Valor Descripcin


hidden











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





2.969 das online



bottom

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


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.





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; }


Valor Descripcin


hidden











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





2.969 das online



left

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


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.





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; }


Valor Descripcin


hidden











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





2.969 das online


2.1 / Propiedad border-top-

color

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



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


2.969 das online


2.1 / Propiedad border-right-

color

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


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



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


2.969 das online


2.1 / Propiedad border-bottom-

color

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


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



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


2.969 das online


2.1 / Propiedad border-left-

color

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


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

referencia de css 2.1

Documents