Acerca del Web Design Group

Propiedades CSS1



Sintaxis usada en definición de propiedades

<Foo>
Valor de tipo Foo. Los tipos comunes se discuten en la sección Unidades.
Foo
Palabra clave que debe aparecer literalmente (aunque se distinguen mayúsculas de minúsculas). Las comas y barras diagonales también deben aparecer literalmente.
A B C
A debe ocurrir, luego B, luego C, en ese orden.
A | B
A o B deben ocurrir.
A || B
A or B o ambos deben ocurrir, en cualquier orden.
[ Foo ]
Los corchetes se usan para agrupar ítems.
Foo*
Foo se repite cero o más veces.
Foo+
Foo se repite una o más veces.
Foo?
Foo es opcional.
Foo{A,B}
Foo debe ocurrir al menos A veces y a lo sumo B veces.

Propiedades de fuentes


Font Family (Familia de fuente)

Sintaxis: font-family: [[<nombre-de-familia> | <familia-genérica>],]* [<nombre-de-familia> | <familia-genérica>]
Valores posibles: <nombre-de-familia>
  • Puede usarse cualquier nombre de familia de fuentes
<familia-genérica>
  • serif (por ej., Times)
  • sans-serif (por ej., Arial o Helvetica)
  • cursive (por ej., Zapf-Chancery)
  • fantasy (por ej., Western)
  • monospace (por ej., Courier)
Valor inicial: Determinado por el navegador
Se aplica a: Todos los elementos
Heredado: Si

Las familias de fuentes pueden asignarse por un nombre de fuente específica o por una familia de fuentes genérica. Obviamente, si define una fuente específica, no será tan probable de encontrar como una familia de fuente genérica. Puede hacer múltiples asignaciones de familias, y si hace una asignación de fuente específica, debería ser seguida por un nombre de familia genérica en el caso de que la primera selección no se halle presente.

Una muestra de declaración de font-family podría ser así:

P { font-family: "New Century Schoolbook", Times, serif }

Note que las dos primeras asignaciones son fuentes de tipo específico: New Century Schoolbook y Times. Sin embargo, ya que ambas son fuentes serif, la familia genérica está listada como un respaldo en el caso de que el sistema no tenga ninguna de las dos, sino otra fuente serif que cumpla los requisitos.

Cualquier nombre de fuente que contenga un espacio en blanco deberá ser entrecomillada, con comillas simples o dobles.

La familia de fuente también puede darse con la propiedad font.


Font Style (Estilo de fuente)

Sintaxis: font-style: <valor>
Valores posibles: normal | italic | oblique
Valor inicial: normal
Se aplica a: Todos los elementos
Heredado: Si

La propiedad font-style define que la fuente se muestre en una de tres formas: normal, itálica u oblicua (inclinada). Una hoja de estilo de muestra con declaraciones font-style podría ser así:

H1 { font-style: oblique }
P  { font-style: normal }

Font Variant (Variante de fuente )

Sintaxis: font-variant: <valor>
Valores posibles: normal | small-caps
Valor inicial: normal
Se aplica a: Todos los elementos
Heredado: Si

La propiedad font-variant determina si la fuente se muestra en mayúsculas tipo normal o pequeñas small-caps. Las small-caps se muestran cuando todas las letras de la palabra están en mayúsculas, con caracteres ligeramente más grandes que las minúsculas. Posteriores versiones de CSS pueden soportar variantes adicionales como condensada, expandida, números en small-caps u otras variantes personalizadas. Un ejemplo de una asignación font-variant sería:

SPAN { font-variant: small-caps }

Font Weight (Peso de fuente)

Sintaxis: font-weight: <valor>
Valores posibles: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Valor inicial: normal
Se aplica a: Todos los elementos
Heredado: Si

La propiedad font-weight se usa para especificar el peso de la fuente. Los valores bolder y lighter son relativos al peso de la fuente heredada, mientras que los otros valores son pesos de fuente absolutos.

Nota: Ya que no todas las fuentes tienen nueve posibles pesos de visualización, algunos de los pesos pueden agruparse en la asignación. Si el peso especificado no está disponible, se elegirá una alternativa sobre la base siguiente:

Algunos ejemplos de asignación de font-weight serían:

H1 { font-weight: 800 }
P  { font-weight: normal }

Font Size (Tamaño de fuente)

Sintaxis: font-size: <tamaño-absoluto> | <tamaño-relativo> | <longitud> | <porcentaje>
Valores posibles:
  • <tamaño-absoluto>
    • xx-small | x-small | small | medium | large | x-large | xx-large
  • <tamaño-relativo>
    • larger | smaller
  • <longitud>
  • <porcentaje> (en relación al elemento padre)

Valor inicial: medium
Se aplica a: Todos los elementos
Heredado: Si

La propiedad font-size se usa para modificar el tamaño de la fuente mostrada. Las longitudes absolutas (usando unidades como pt e in) deberían usarse racionalmente debido a su poca capacidad de adaptarse a diferentes ambientes de navegación. Las fuentes con longitudes absolutas pueden ser muy pequeñas o grandes para un usuario.

Algunos ejemplos de asignación de tamaño serían:

H1    { font-size: large }
P      { font-size: 12pt }
LI     { font-size: 90% }
STRONG { font-size: larger }

Los autores deben estar concientes de que Microsoft Internet Explorer 3.x aplica incorrectamente las unidades em y ex como pixels, lo que puede hacer el texto ilegible. El navegador también aplica incorrectamente valores de porcentaje relativos al tamaño de fuente por defecto para el selector, en vez de en relación al tamaño de fuente del elemento padre. Esto hace que reglas como:

H1 { font-size: 200% }

sean peligrosas, por que el tamaño será dos veces el tamaño de la fuente por defecto de IE para encabezados de nivel-uno, en lugar de dos veces el tamaño de fuente del elemento padre. En este caso, BODY sería muy probablemente el elemento padre, y definiría posoblemente un tamaño de fuente medium, mientras que el tamaño de fuente para el encabezado de nivel uno aplicado por IE probablemente sería considerado xx-large.

Considerando estos defectos, los autores deberían tener cuidado al usar valores de porcentaje para font-size, y probablemente deberían evitar unidades em y ex para esta propiedad.


Font (Fuente)

Sintaxis: font: <valor>
Valores posibles: [ <font-style> || <font-variant> || <font-weight>]? <font-size> [ / <line-height>]? <familia de fuente>
Valor inicial: No definido
Se aplica a: Todos los elementos
Heredado: Si

La propiedad font puede usarse como una forma rápida para las diferentes propiedades de fuentes, así como para line height (altura de línea). Por ejemplo,

P { font: italic bold 12pt/14pt Times, serif }

especifica párrafos con negrita (bold) e itálica (italic), fuente Times o serif con un tamaño de 12 puntos y una altura de línea de 14 puntos.


Propiedades de color y fondo


Color

Sintaxis: color: <color>
Valor inicial: Determinado por el navegador
Se aplica a: Todos los elementos
Heredado: Si

La propiedad color permite especificar el color de un elemento. Vea la sección Unidades para descripciones del valor de colores, Algunos ejemplos de reglas de color:

H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }

Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre deberían especificarse juntas las propiedades background y color.


Background Color (Color de fondo)

Sintaxis: background-color: <valor>
Valores posibles: <color> | transparent
Valor inicial: transparent
Se aplica a: Todos los elementos
Heredado: No

La propiedad background-color establece el color del fondo de un elemento. Por ejemplo:

BODY { background-color: white }
H1   { background-color: #000080 }

Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre que use background-color debería especificar background-image. En la mayoría de casos, es adecuado background-image: none.

Los autores también pueden usar la foma rápida de la propiedad background, que está mejor soportada que la propiedad background-color.


Background Image (Imagen de fondo)

Sintaxis: background-image: <valor>
Valores posibles: <url> | none
Valor inicial: none
Se aplica a: Todos los elementos
Heredado: No

La propiedad background-image establece la imagen de fondo de un elemento. Por ejemplo:

BODY { background-image: url(/images/foo.gif) }
P    { background-image: url(http://www.htmlhelp.com/fondo.png) }

Cuando se define una imagen de fondo (background image), también debería definirse un background color (color de fondo) similar para aquellos que no cargan las imágenes.

Los autores también pueden usar la foma rápida de la propiedad background, que está mejor soportada que la propiedad background-image.


Background Repeat (Repetir fondo)

Sintaxis: background-repeat: <valor>
Valores posibles: repeat | repeat-x | repeat-y | no-repeat
Valor inicial: repeat
Se aplica a: Todos los elementos
Heredado: No

La propiedad background-repeat determina como se repite la background image (imagen de fondo) especificada. El valor repeat-x repetirá la imagen horizontalmente mientras que el valor repeat-y repetirá la imagen verticalmente. Por ejemplo:

BODY { background: white url(caramelo.gif);
       background-repeat: repeat-x }

En el ejemplo de arriba, la imagen solo será organizada en mosaico horizontal.

Los autores también pueden usar la foma rápida de la propiedad background, que está mejor soportada que la propiedad background-repeat.


Background Attachment (Fijación de fondo)

Sintaxis: background-attachment: <valor>
Valores posibles: scroll | fixed
Valor inicial: scroll
Se aplica a: Todos los elementos
Heredado: No

La propiedad background-attachment determina si la background image (imagen de fondo) especificada se desplazará con el contenido o será fija con respecto al lienzo. Por ejemplo, la línea siguiente especifica una imagen de fondo fija:

BODY { background: white url(candybar.gif);
       background-attachment: fixed }

Los autores también pueden usar la foma rápida de la propiedad background, que está mejor soportada que la propiedad background-attachment.


Background Position (Posición del fondo)

Sintaxis: background-position: <valor>
Valores posibles: [<porcentaje> | <longitud>]{1,2} | [top | center | bottom] || [left | center | right]
Valor inicial: 0% 0%
Se aplica a: Elementos de nivel bloque y elementos reemplazados
Heredado: No

La propiedad background-position da la posición inicial de la background image (imagen de fondo) especificada. Esta propiedad solo puede aplicarse a elementos de nivel bloque y a elementos reemplazados. (Un elemento reemplazado es aquel del que solo se conocen las dimensiones intrínsecas; los elementos reemplazados HTML incluyen IMG, INPUT, TEXTAREA, SELECT, y OBJECT.)

La forma más sencilla de asignar una ubicación de fondo es con palabras clave:

También pueden usarse porcentajes y longitudes para asignar la posición de la imagen de fondo. Los porcentajes son relativos al tamaño del elemento. Aunque se permiten longitudes, no se recomiendan debido a su inherente debilidad al tratar con diferentes resoluciones de pantalla.

Al usar porcentajes o longitudes, se especifica primero la posición horizontal y luego la vertical. Un valor como 20% 65% especifica que la imagen se colocará 20% a la derecha y 65% abajo del elemento. Un valor como 5px 10px especifica que la esquina superior izquierda de la imagen se colocará 5 pixels a la derecha y 10 pixels abajo de la esquina superior izquierda del elemento.

Si solo se da el valor horizontal, la posición vertical será 50%. Se permiten combinaciones de longitudes y porcentajes, ya que son posiciones negativas. Por ejemplo, 10% -2cm está permitido. Sin embargo, porcentajes y longitudes no pueden combinarse con palabras clave.

Las palabras clave son interpretadas como sigue:

Si la imagen de fondo está fija en relación al lienzo, la imagen es colocada en relación al lienzo y no al elemento.

Los autores también pueden usar la foma rápida de la propiedad background, que está mejor soportada que la propiedad background-position.


Background (Fondo)

Sintaxis: background: <valor>
Valores posibles: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Valor inicial: No definido
Se aplica a: Todos los elementos
Heredado: No

La propiedad background es una forma rápida para las propiedades más específicas relacionadas con background. Algunos ejemplos de declaraciones de background:

BODY       { background: white url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P          { background: url(../fondos/peon.png) #f0f8ff fixed }
TABLE      { background: #0c0 url(hojas.jpg) no-repeat bottom right }

Un valor no especificado recibirá el valor inicial. Por ejemplo, en las tres primeras reglas de arriba, la propiedad background-position será establecida a 0% 0%.

Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre deberían especificarse juntas las propiedades background y color.


Propiedades de texto


Word Spacing (Espaciamiento de palabras)

Sintaxis: word-spacing: <valor>
Valores posibles: normal | <longitud>
Valor inicial: normal
Se aplica a: Todos los elementos
Heredado: Si

La propiedad word-spacing define una cantidad adicional de espacio entre palabras. El valor debe estar en formato de longitud; no se permiten valores negativos.

Ejemplos:

P EM   { word-spacing: 0.4em }
P.nota { word-spacing: -0.2em }

Letter Spacing (Espaciamiento de letras)

Sintaxis: letter-spacing: <valor>
Valores posibles: normal | <longitud>
Valor inicial: normal
Se aplica a: Todos los elementos
Heredado: Si

La propiedad letter-spacing define una cantidad adicional de espacio entre caracteres. El valor debe estar en formato de longitud; no se permiten valores negativos. Un ajuste de 0 evitará justificación.

Ejemplos:

H1     { letter-spacing: 0.1em }
P.nota { letter-spacing: -0.1em }

Text Decoration (Decoración de texto)

Sintaxis: text-decoration: <valor>
Valores posibles: none | [ underline || overline || line-through || blink ]
Valor inicial: none
Se aplica a: Todos los elementos
Heredado: No

La propiedad text-decoration permite que el texto sea decorado mediante una de cinco propiedades: underline (subrayado), overline (línea superior), line-through (tachado), blink (parpadeo), o por defecto none (ninguna).

Por ejemplo, uno puede sugerir que los enlaces no sean subrayados con

A:link, A:visited, A:active { text-decoration: none }

Vertical Alignment (Alineación vertical)

Sintaxis: vertical-align: <valor>
Valores posibles: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentaje>
Valor inicial: baseline
Se aplica a: Elementos en línea
Heredado: No

La propiedad vertical-align puede usarse para alterar la ubicación vertical de un elemento en línea, en relación a su elemento padre o a la línea del elemento. (Un elemento en línea es uno que no tiene salto de línea ni antes ni después de él; por ejemplo, EM, A y IMG en HTML.)

El valor puede ser un porcentaje relativo a la altura de línea (line-height) del elemento, que debería elevar la línea de base del elemento en la cantidad especificada por encima de la línea base del padre. No se permiten los valores negativos.

El valor también puede ser una palabra clave. Las siguientes palabras clave afectan la ubicación en relación al elemento padre:

Las palabras clave que afectan la ubicación relativa a la línea del elemento son

La propiedad vertical-align es particularmente útil para alinear imágenes. Algunos ejemplos:

IMG.centro { vertical-align: middle }
IMG        { vertical-align: 50% }
.exponente  { vertical-align: super }

Text Transformation (Transformación de texto)

Sintaxis: text-transform: <valor>
Valores posibles: none | capitalize | uppercase | lowercase
Valor inicial: none
Se aplica a: Todos los elementos
Heredado: Si

La propiedad text-transform permite que el texto se transforme por alguna de cuatro propiedades:

Ejemplos:

H1 { text-transform: uppercase }
H2 { text-transform: capitalize }

La propiedad text-transform solo debería usarse para expresar un deseo estilístico. Sería inapropiado, por ejemplo, usar text-transform para aplicar mayúsculas a las primera letras de una lista de países o nombres.


Text Alignment (Alineación de texto)

Sintaxis: text-align: <valor>
Valores posibles: left | right | center | justify
Valor inicial: Determinado por el navegador
Se aplica a: Elementos de nivel bloque
Heredado: Si

La propiedad text-align puede aplicarse a elementos de nivel bloque (P, H1, etc.) para dar la alineación del texto del elemento. Esta propiedad es similar en función al atributo ALIGN de HTML en párrafos, encabezados y divisiones.

Algunos ejemplos:

H1          { text-align: center }
P.diario { text-align: justify }

Text Indentation (Sangría de texto)

Sintaxis: text-indent: <valor>
Valores posibles: <longitud> | <porcentaje>
Valor inicial: 0
Se aplica a: Elementos de nivel bloque
Heredado: Si

La propiedad text-indent puede aplicarse a elementos de nivel bloque (P, H1, etc.) para definir la cantidad de sangría que debería aplicarse a la primera línea. El valor debe ser una longitud o un porcentaje; los porcentajes se refieren al ancho del elemento padre. Un uso común para text-indent sería dar sangría a un párrafo:

P { text-indent: 5em }

Line Height (Altura de línea)

Sintaxis: line-height: <valor>
Valores posibles: normal | <número> | <longitud> | <porcentaje>
Valor inicial: normal
Se aplica a: Todos los elementos
Heredado: Si

La propiedad line-height aceptará un valor para controlar el espacio entre líneas base de texto. Si el valor es un número, la altura de línea se calcula multiplicando el tamaño de fuente del elemento por el número. Los valores en porcentaje son relativos al tamaño de fuente del elemento. No se permiten los valores negativos.

La altura de línea también puede darse en la propiedad font junto con un tamaño de fuente.

La propiedad line-height podría usarse para texto a doble espacio:

P { line-height: 200% }

Microsoft Internet Explorer 3.x trata incorrectamente a los valores numéricos y a los valores con unidades em o ex como valores de pixel. Este error puede hacer ilegibles las páginas, por lo que los autores deberían evitar provocarlo; con frecuencia, las unidades de porcentaje son una buena opción.


Propiedades de cuadros


Top Margin (Margen superior)

Sintaxis: margin-top: <valor>
Valores posibles: <longitud> | <porcentaje> | auto
Valor inicial: 0
Se aplica a: Todos los elementos
Heredado: No

La propiedad margin-top establece el margen superior de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten márgenes negativos.

Por ejemplo, la siguiente regla eliminaría el margen superior de un documento:

BODY { margin-top: 0 }

Note que los márgenes verticales contiguos son contraídos para usar el mayor de los valores de margen.


Right Margin (Margen derecho)

Sintaxis: margin-right: <valor>
Valores posibles: <longitud> | <porcentaje> | auto
Valor inicial: 0
Se aplica a: Todos los elementos
Heredado: No

La propiedad margin-right establece el margen derecho de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten márgenes negativos.

Ejemplo:

P.estrecho { margin-right: 50% }

Note que los márgenes horizontales contiguos no son contraídos.


Bottom Margin (Margen inferior)

Sintaxis: margin-bottom: <valor>
Valores posibles: <longitud> | <porcentaje> | auto
Valor inicial: 0
Se aplica a: Todos los elementos
Heredado: No

La propiedad margin-bottom establece el margen inferior de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten márgenes negativos.

Ejemplo:

DT { margin-bottom: 3em }

Note que los márgenes verticales contiguos son contraídos para usar el mayor de los valores de margen.


Left Margin (Margen izquierdo)

Sintaxis: margin-left: <valor>
Valores posibles: <longitud> | <porcentaje> | auto
Valor inicial: 0
Se aplica a: Todos los elementos
Heredado: No

La propiedad margin-left establece el margen izquierdo de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten márgenes negativos.

Ejemplo:

ADDRESS { margin-left: 50% }

Note que los márgenes horizontales contiguos no son contraídos.


Margin (Margen)

Sintaxis: margin: <valor>
Valores posibles: [ <longitud> | <porcentaje> | auto]{1,4}
Valor inicial: No definido
Se aplica a: Todos los elementos
Heredado: No

La propiedad margin establece los márgenes de un elemento especificando entre uno y cuatro valores, donde cada valor es una longitud, un porcentaje o auto. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten márgenes negativos.

Si se dan cuatro valores, se aplican a los márgenes superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto.

Ejemplos de declaraciones margin incluyen:

BODY { margin: 5em }             /* todos los márgenes 5em */
P    { margin: 2em 4em }         /* márgenes superior e inferior 2em,
                                    márgenes izquierdo y derecho 4em */
DIV { margin: 1em 2em 3em 4em } /* margen superior 1em,
                                    right margin 2em,
                                    bottom margin 3em,
                                    left margin 4em */

Note que los márgenes verticales contiguos son contraídos para usar el mayor de los valores de margen. Los márgenes horizontales no son contraídos.

Usando la propiedad margin se pueden establecer todos los márgenes; alternativamente, pueden usarse las propiedades margin-top, margin-bottom, margin-left y margin-right.


Top Padding (Relleno superior)

Sintaxis: padding-top: <valor>
Valores posibles: <longitud> | <porcentaje>
Valor inicial: 0
Se aplica a: Todos los elementos
Heredado: No

La propiedad padding-top describe cuanto espacio colocar entre el borde superior y el contenido del selector. El valor puede ser una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten los valores negativos.


Right Padding (Relleno derecho)

Sintaxis: padding-right: <valor>
Valores posibles: <longitud> | <porcentaje>
Valor inicial: 0
Se aplica a: Todos los elementos
Heredado: No

La propiedad padding-right describe cuanto espacio colocar entre el borde derecho y el contenido del selector. El valor puede ser una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten los valores negativos.


Bottom Padding (Relleno inferior)

Sintaxis: padding-bottom: <valor>
Valores posibles: <longitud> | <porcentaje>
Valor inicial: 0
Se aplica a: Todos los elementos
Heredado: No

La propiedad padding-bottom describe cuanto espacio colocar entre el borde inferior y el contenido del selector. El valor puede ser una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten los valores negativos.


Left Padding (Relleno izquierdo)

Sintaxis: padding-left: <valor>
Valores posibles: <longitud> | <porcentaje>
Valor inicial: 0
Se aplica a: Todos los elementos
Heredado: No

La propiedad padding-left describe cuanto espacio colocar entre el borde izquierdo y el contenido del selector. El valor puede ser una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten los valores negativos.


Padding (Relleno)

Sintaxis: padding: <valor>
Valores posibles: [ <longitud> | <porcentaje>]{1,4}
Valor inicial: 0
Se aplica a: Todos los elementos
Heredado: No

La propiedad padding es una manera rápida de aplicar las propiedades padding-top, padding-right, padding-bottom y padding-left.

El padding de un elemento es la cantidad de espacio entre el borde y el contenido del elemento. Se dan entre uno y cuatro valores, donde cada valor puede ser una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten los valores negativos.

Si se dan cuatro valores, se aplican a los paddings superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto.

Por ejemplo, la siguiente regla establece el padding superior a 2em, el derecho a 4em, el inferior a 5em y el izquierdo a 4em:

BLOCKQUOTE { padding: 2em 4em 5em }

Top Border Width (Ancho de borde superior)

Sintaxis: border-top-width: <valor>
Valores posibles: thin | medium | thick | <longitud>
Valor inicial: medium
Se aplica a: Todos los elementos
Heredado: No

La propiedad border-top-width se usa para especificar el ancho del borde superior de un elemento. El valor puede ser una de tres palabras clave, que no son afectadas por tamaño de fuente o longitud, que pueden usarse para obtener anchos relativos. No se permiten los valores negativos.

También se pueden usar las propiedades border-top, border-width, o la forma rápida border.


Right Border Width (Ancho de borde derecho)

Sintaxis: border-right-width: <valor>
Valores posibles: thin | medium | thick | <longitud>
Valor inicial: medium
Se aplica a: Todos los elementos
Heredado: No

La propiedad border-right-width se usa para especificar el ancho del borde derecho de un elemento. El valor puede ser una de tres palabras clave, que no son afectadas por tamaño de fuente o longitud, que pueden usarse para obtener anchos relativos. No se permiten los valores negativos.

También se pueden usar las propiedades border-right, border-width, o la forma rápida border.


Bottom Border Width (Ancho de borde inferior)

Sintaxis: border-bottom-width: <valor>
Valores posibles: thin | medium | thick | <longitud>
Valor inicial: medium
Se aplica a: Todos los elementos
Heredado: No

La propiedad border-bottom-width se usa para especificar el ancho del borde inferior de un elemento. El valor puede ser una de tres palabras clave, que no son afectadas por tamaño de fuente o longitud, que pueden usarse para obtener anchos relativos. No se permiten los valores negativos.

También se pueden usar las propiedades border-bottom, border-width, o la forma rápida border.


Left Border Width (Ancho de borde izquierdo)

Sintaxis: border-left-width: <valor>
Valores posibles: thin | medium | thick | <longitud>
Valor inicial: medium
Se aplica a: Todos los elementos
Heredado: No

La propiedad border-left-width se usa para especificar el ancho del borde izquierdo de un elemento. El valor puede ser una de tres palabras clave, que no son afectadas por tamaño de fuente o longitud, que pueden usarse para obtener anchos relativos. No se permiten los valores negativos.

También se pueden usar las propiedades border-left, border-width, o la forma rápida border.


Border Width (Ancho de borde)

Sintaxis: border-width: <valor>
Valores posibles: [ thin | medium | thick | <longitud> ]{1,4}
Valor inicial: No definido
Se aplica a: Todos los elementos
Heredado: No

La propiedad border-width se usa para establecer el ancho de borde de un elemento especificando entre uno y cuatro valores, donde cada valor es una palabra clave o una longitud. No se permiten los valores negativos.

Si se dan cuatro valores, se aplican a los bordes superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto.

Esta propiedad es una forma rápida de las propiedades border-top-width, border-right-width, border-bottom-width y border-left-width.

También puede usarse la propiedad rápida border.


Border Color (Color de borde)

Sintaxis: border-color: <valor>
Valores posibles: <color>{1,4}
Valor inicial: El valor de la propiedad color
Se aplica a: Todos los elementos
Heredado: No

La propiedad border-color establece el color del borde de un elemento. Se especifican entre uno y cuatro valores de color Si se dan cuatro valores, se aplican a los colores de borde superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto.

También puede usarse la propiedad rápida border.


Border Style (Estilo de borde)

Sintaxis: border-style: <valor>
Valores posibles: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
Valor inicial: none
Se aplica a: Todos los elementos
Heredado: No

La propiedad border-style establece el estilo del borde de un elemento. Esta propiedad debe ser especificada para que el borde sea visible.

Se especifican entre una y cuatro palabras clave. Si se dan cuatro valores, se aplican a los estilos de borde superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto.

También puede usarse la propiedad rápida border.


Top Border (Borde superior)

Sintaxis: border-top: <valor>
Valores posibles: <border-top-width> || <border-style> || <color>
Valor inicial: No definido
Se aplica a: Todos los elementos
Heredado: No

La propiedad border-top es una forma rápida para establecer el ancho, estilo y el color del borde superior de un elemento.

Note que solo puede darse un valor de border-style.

También puede usarse la propiedad rápida border.


Right Border (Borde derecho)

Sintaxis: border-right: <valor>
Valores posibles: <border-top-width> || <border-style> || <color>
Valor inicial: No definido
Se aplica a: Todos los elementos
Heredado: No

La propiedad border-right es una forma rápida para establecer el ancho, estilo y el color del borde derecho de un elemento.

Note que solo puede darse un valor de border-style.

También puede usarse la propiedad rápida border.


Bottom Border (Borde de fondo)

Sintaxis: border-bottom: <valor>
Valores posibles: <border-bottom-width> || <border-style> || <color>
Valor inicial: No definido
Se aplica a: Todos los elementos
Heredado: No

La propiedad border-bottom es una forma rápida para establecer el ancho, estilo y el color del borde inferior de un elemento.

Note que solo puede darse un valor de border-style.

También puede usarse la propiedad rápida border.


Left Border (Borde izquierdo)

Sintaxis: border-left: <valor>
Valores posibles: <border-left-width> || <border-style> || <color>
Valor inicial: No definido
Se aplica a: Todos los elementos
Heredado: No

La propiedad border-left es una forma rápida para establecer el ancho, estilo y el color del borde izquierdo de un elemento.

Note que solo puede darse un valor de border-style.

También puede usarse la propiedad rápida border.


Border (Borde)

Sintaxis: border: <valor>
Valores posibles: <border-width> || <border-style> || <color>
Valor inicial: No definido
Se aplica a: Todos los elementos
Heredado: No

La propiedad border es una forma rápida para establecer el ancho, estilo y el color del borde izquierdo de un elemento.

Ejemplos de declaraciones border incluyen:

H2        { border: groove 3em }
A:link    { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active  { border: thick double red }

La propiedad border solo puede establecer todos los cuatro bordes; puede aplicar solo un ancho y estilo de borde. Para dar diferentes valores a los cuatro bordes de un elemento, se deben usar una o más de las propiedades border-top, border-right, border-bottom, border-left, border-color, border-width, border-style, border-top-width, border-right-width, border-bottom-width, o border-left-width.


Width (Ancho)

Sintaxis: width: <valor>
Valores posibles: <longitud> | <porcentaje> | auto
Valor inicial: auto
Se aplica a: Elementos de nivel bloque y elementos reemplazados
Heredado: No

A cada elemento de nivel bloque o elemento reemplazado se le puede dar un ancho width, especificado como una longitud, un porcentaje o como auto. (Un elemento reemplazado es uno del que solo se conocen las dimensiones intrínsecas; los elementos reemplazados HTML incluyen IMG, INPUT, TEXTAREA, SELECT y OBJECT.) El valor inicial para la propiedad width es auto, lo que resulta en el ancho intrínseco del elemento (es decir, el ancho del elemento mismo, como por ejemplo el ancho de una imagen). Los porcentajes se refieren al ancho del elemento padre. No se permiten los valores negativos.

Esta propiedad podría usarse para dar un ancho común a algunos elementos INPUT, como los botones SUBMIT y RESET:

INPUT.boton { width: 10em }

Height (Altura)

Sintaxis: height: <valor>
Valores posibles: <longitud> | auto
Valor inicial: auto
Se aplica a: Elementos de nivel bloque y elementos reemplazados
Heredado: No

A cada elemento de nivel bloque o elemento reemplazado se le puede dar una altura height, especificada como una longitud o como auto. (Un elemento reemplazado es uno del que solo se conocen las dimensiones intrínsecas; los elementos reemplazados HTML incluyen IMG, INPUT, TEXTAREA, SELECT y OBJECT.) El valor inicial para la propiedad width es auto, lo que resulta en el ancho intrínseco del elemento (es decir, el ancho del elemento mismo, como por ejemplo el ancho de una imagen). No se permiten longitudes negativos.

Como con la propiedad width, height puede usarse para escalar una imagen:

IMG.foo { width: 40px; height: 40px }

En la mayoría de los casos, se recomienda a los autores escalar la imagen en un programa de edición de imágenes, ya que los navegadores probablemente no escalarán las imágenes con alta calidad, y ya que la escala reducida origina que el usuario descargue un archivo innecesariamente grande. Sin embargo, escalar mediante las propiedades width y height es un opción útil para hojas de estilo definidas por el usuario a fin de superar problemas de visión.


Float (Flotar)

Sintaxis: float: <valor>
Valores posibles: left | right | none
Valor inicial: none
Se aplica a: Todos los elementos
Heredado: No

La propiedad float permite ajustar texto alrededor de un elemento. Esto es idéntico en propósito a ALIGN=left y ALIGN=right para el elemento IMG de HTML 3.2, pero CSS1 permite que todos los elementos "floten," no solo las imágenes y tablas que permite HTML 3.2.


Clear (Despejar)

Sintaxis: clear: <valor>
Valores posibles: none | left | right | both
Valor inicial: none
Se aplica a: Todos los elementos
Heredado: No

La propiedad clear especifica si un elemento permite elementos flotantes a sus lados. Un valor left mueve el elemento debajo de cualquier elemento flotante a su izquierda; right actúa en forma similar para elementos flotantes a la derecha. Otros valores son none, que es el valor inicial, y both, que mueve el elemento debajo de los elementos flotantes a ambos lados. Esta propiedad es similar en función a <BR CLEAR=left|right|all|none> de HTML 3.2, pero puede aplicarse a todos los elementos.


Propiedades de clasificación


Display (Visualización)

Sintaxis: display: <valor>
Valores posibles: block | inline | list-item | none
Valor inicial: block
Se aplica a: Todos los elementos
Heredado: No

La propiedad display se usa para definir un elemento con uno de cuatro valores:

A cada elemento típicamente se le da un valor de display (visualización) por defecto para el navegador, basado en la interpretación sugerida en la especificación HTML.

La propiedad display puede ser peligrosa debido a su capacidad de mostrar elementos en lo que de otro modo sería un formato inapropiado. El uso del valor none desactivará la visualización del elemento al que está asignado, incluyendo cualquier elemento hijo.


Whitespace (Espacio en blanco)

Sintaxis: white-space: <valor>
Valores posibles: normal | pre | nowrap
Valor inicial: normal
Se aplica a: Elementos de nivel bloque
Heredado: Si

La propiedad white-space determinará cómo se tratan los espacios dentro del elemento. Esta propiedad toma uno de tres valores:


List Style Type (Tipo de estilo de lista)

Sintaxis: list-style-type: <valor>
Valores posibles: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Valor inicial: disc
Se aplica a: Elementos con la propiedad display list-item
Heredado: Si

La propiedad list-style-type especifica el tipo de marcador de ítems de lista, y se usa si list-style-image es none o si la carga de imágenes está desactivada.

Ejemplos:

LI.cuadrado { list-style-type: square }
UL.simple { list-style-type: none }
OL        { list-style-type: upper-alpha }  /* A B C D E etc. */
OL OL     { list-style-type: decimal }      /* 1 2 3 4 5 etc. */
OL OL OL  { list-style-type: lower-roman }  /* i ii iii iv v etc. */

List Style Image (Imagen de estilo de lista)

Sintaxis: list-style-image: <valor>
Valores posibles: <url> | ninguno
Valor inicial: none
Se aplica a: Elementos con la propiedad display list-item
Heredado: Si

La propiedad list-style-image especifica la imagen que se usará como marcador de ítems de lista cuando se active la carga de imágenes, reemplazando al marcador especificado en la propiedad list-style-type.

Ejemplos:

UL.marca { list-style-image: url(/LI-marcadores/visto.gif) }
UL LI.x { list-style-image: url(x.png) }

List Style Position (Posición de estilo de lista)

Sintaxis: list-style-position: <valor>
Valores posibles: inside | outside
Valor inicial: outside
Se aplica a: Elementos con la propiedad display list-item
Heredado: Si

La propiedad list-style-position toma el valor inside o outside, donde outside es el valor por defecto. Esta propiedad determina donde se coloca el marcador en relación al ítem de lista. Si se usa el valor inside, las líneas se ajustarán debajo del marcador en vez de estar con sangría. Ejemplo:

Posición exterior (outside):
 * Item de lista 1
   segunda línea de ítems de la lista

Posición interior (inside):
   * Item de lista 1
   segunda línea de ítems de la lista

List Style (Estilo de lista)

Sintaxis: list-style: <valor>
Valores posibles: <list-style-type> || <list-style-position> || <url>
Valor inicial: No definido
Se aplica a: Elementos con la propiedad display list-item
Heredado: Si

La propiedad list-style property es una forma rápida de las propiedades list-style-type, list-style-position y list-style-image.

Ejemplos:

LI.cuadrado { list-style: square inside }
UL.simple  { list-style: none }
UL.marca  { list-style: url(/LI-marcadores/visto.gif) circle }
OL        { list-style: upper-alpha }
OL OL     { list-style: lower-roman inside }

Unidades

Unidades de longitud

Un valor de longitud se forma por un signo + o - opcional, seguido de un número y de una abreviación de dos letras que indica la unidad. No hay espacios en un valor de longitud; por ej., 1.3 em no es un valor de longitud válido, pero 1.3em si lo es. Una longitud de 0 no necesita las dos letras para identificar la unidad.

Tanto las unidades de longitud relativas y absolutas están soportadas en CSS1. Las unidades relativas dan una longitud relativa a otra propiedad longitud, y se prefieren ya que se ajustarán mejor a medios diferentes. Las siguientes unidades relativas están disponibles:

Las unidades de longitud absolutas son muy dependientes del medio de salida, y son por lo tanto menos útiles que las unidades relativas. Las siguientes unidades absolutas están disponibles:


Unidades de porcentaje

Un valor de porcentaje se forma por un signo + o - opcional, seguido de un número y de %. No hay espacios en un valor de porcentaje.

Los valores de porcentaje son relativos a otros, tal como están definidos en cada propiedad. Generalmente, el valor de porcentaje es relativo al tamaño de fuente del elemento.


Unidades de color

Un valor de color es una palabra clave o una especificación numérica RGB.

Las 16 palabras clave se toman de la paleta Windows VGA: aguamarina, negro, azul, fucsia, gris, verde, verde lima, marrón, azul marino, olivo, morado, rojo, plata, turquesa, blanco, y amarillo.

Los colores RGB se dan en una de cuatro maneras:

Los ejemplos de arriba especifican el mismo color.

Douglas R. Jacobson también ha dearrollado una práctica Carta de colores RGB de referencia rápida (61 kB).


URLs

Un valor URL es dado por url(foo), donde foo es la URL. La URL puede ser opcionalmente entrecomillada con comillas simples (') o dobles (") y puede contener espacios en blanco antes o después de la URL (opcionalmente entrecomillada).

Los paréntesesis, comas, espacios, comillas simples o dobles en una URL deben ser encerradas con diagonales invertidas. Las URLs parciales son interpretadas en relación a la fuente de la hoja de estilo, no a la fuente de HTML.

Note que Netscape Navigator 4.x interpreta incorrectamente las URLs parciales relativas a la fuente HTML. Teniendo en cuenta este defecto, los autores pueden preferir usar las URLs completas siempre que sea posible.

Ejemplos:

BODY { background: url(franja.gif) }
BODY { background: url(http://www.htmlhelp.com/franja.gif) }
BODY { background: url(franja.gif) }
BODY { background: url("franja.gif") }
BODY { background: url(\"Ulalume\".png) } /* comillas en URL encerradas */

Mantenido por John Pozadzides y Liam Quinn


Web Design Group ~ ÍndiceCSS ~ Estructura CSS ~ Propiedades CSS

Copyright © 1997 John Pozadzides y Liam Quinn. Todos los derechos reservados.