| Sintaxis: | font-family: [[<nombre-de-familia> | <familia-genérica>],]* [<nombre-de-familia> | <familia-genérica>] |
|---|---|
| Valores posibles: | <nombre-de-familia>
|
| 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.
| 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 }| 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 }| 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 }| Sintaxis: | font-size: <tamaño-absoluto> | <tamaño-relativo> | <longitud> | <porcentaje> |
|---|---|
| Valores posibles: |
|
| 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.
| 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.
| 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.
| 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.
| 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.
| 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.
| 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.
| 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.
| 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.
| 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 }| 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 }| 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 }| 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 }| 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.
| 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 }| 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 }| 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.
| 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.
| 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.
| 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.
| 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.
| 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.
| 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.
| 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.
| 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.
| 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.
| 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 }| 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.
| 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.
| 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.
| 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.
| 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.
| 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.
| 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.
| 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.
| 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.
| 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.
| 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.
| 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.
| 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 }| 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.
| 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.
| 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.
| 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.
| 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:
| 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. */| 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) }| 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
| 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 }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:
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.
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).
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
ÍndiceCSS ~ Estructura CSS ~ Propiedades CSS
Copyright © 1997 John Pozadzides y Liam Quinn. Todos los derechos reservados.