Valores

Enteros

Por entero se entiende un número entre cero (0) y nueve (9). Puede estar precedido por los signos de más (+) o menos (-) para indicar si es positivo o negativo. Ej.: 3, -8, +5.

Números

Un número puede tener la foma de un entero (ver arriba) o puede consistir en un número entre 0 y 9 seguido por un punto (.) y uno o más dígitos. Puede estar precedido por los signos de más (+) o menos (-) para indicar si es positivo o negativo. Ej.: 3, +2.5, -5,25.

Medidas

Por medida se entiende las dimensiones horizontales y verticales. Su forma es un número (con o sin punto decimal) seguido por un identificador de la unidad (por ejemplo: cm, deg, etc.). Puede estar precedido por los signos de más (+) o menos (-) para indicar si es positivo o negativo. Cuando la medidad es cero (0), el identificador de la unidad es opcional (ejemplo: 0px es lo mismo que 0).

Hay dos tipos de unidades de medida: relativas y absolutas. Las unidades relativas especifican una medida en relación a otra propiedad de medida. Las unidades de medida absoluta son útiles solamente cuando la propiedades físicas del medio de salida son conocidas.

Las unidades relativas son:

em: el tamaño ('font-size') de la fuente relevante
ex: la 'altura de la x' de la fuente relevante
px: pixeles, relacionados con los dispositivos visuales

Las unidades absolutas son:

in: inches (pulgadas) - 1 pulgada es igual a 2.54 centímetros
cm: centímetros
mm: milímetros
pt: puntos - 1 punto es igual a 1/72 de pulgada
pc: picas - 1 pica es igual a 12 puntos

Los elementos hijos no heredan, generalmente, los valores relativos especificados para sus padres, sino los valores computados (ver la sección sobre Cascada y Herencia). Ver ejemplos

Porcentajes

El formato de estos valores es un número seguido por el signo de porcentaje (%). Puede estar precedido por los signos de más (+) o menos (-) para indicar si es positivo o negativo. Estos valores siempre se refieren a otro valor.

No todas las propiedades admiten porcentajes. Las que sí los admiten, definen a qué valor se refieren esos porcentajes. Por ejemplo: los porcentajes en la propiedad font-size se refieren al tamaño de la fuente del elemento padre.

A este párrafo le hemos aplicado la propiedad "font-size: 110%" por eso es un 10% más grande que el resto.

Los elementos hijos heredan los valores computados, no el valor del porcentaje. Ver ejemplos

URL

Los URL (Uniform Resource Locators) indican la dirección de un recurso en la Web. Las formas que puede adoptar son:

url(http://www.w3.org/index.html)
url('http://www.w3.org/index.html')
url("http://www.w3.org/index.html")

Es decir, la dirección puede ir o no entre comillas, y puede usarse un par de comillas simples (') o dobles ("). Hay URL absolutos (como los anteriores) que especifican la dirección completa, y URL relativos, que indican la dirección de un recurso en relación con la ubicación de la Hoja de Estilo:

url(boton.gif)
url(imagenes/boton.gif)
url(../boton.gif)

Adviertan que si la CSS es un archivo separado de la página HTML, los URL relativos lo son con respecto al archivo que contiene a Hoja de Estilo.

Color

Un color puede ser especificado por una palabra clave o por una fórmula numérica.

Palabras clave: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white y yellow. Ver

Especificación numérica: se usa el modelo de color RGB (Red, Green, Blue).

EM { color: #f00 }
EM { color: #ff0000 }
EM { color: rgb(255,0,0) }
EM { color: rgb(100%, 0%, 0%) }

Los dos primeros usan la notación hexadecimal (0123456789ABCDEF) y su forma es el signo de numeral (#) seguido de tres o seis dígitos. La fórmula de tres números se usa como simplificación cuando cada dígito se repite. Por ejemplo #ff99dd, puede escribirse #f9d.

Las dos últimas usan la fórmula rgb(r, g, b). El modelo de color RGB permite especificar 256 niveles de luminosidad para cada uno de los colores ROJO, VERDE y AZUL (Red, Green, Blue). El cero (0) significa ausencia del color y 255 el color puro. Así, el negro (Rojo 0, Verde 0, Azul 0) está dado por la ausencia de estos tres colores primarios. La suma de los tres (Rojo 255, Verde 255, Azul 255) da por resultado el blanco. Recuerden que en la escala de 256 niveles se comienza por el cero (0) de modo que el número más alto no es 256 sino 255. También es posible utilizar porcentajes, donde 100% es igual a 255. Ver

Colores del sistema: se usan palabras clave que especifican colores del entorno gráfico del usuario. Cualquier propiedad de color puede tomar uno de los siguientes nombres:

ActiveBorder: Borde de la ventana activa.
ActiveCaption: Título de la ventana activa.
AppWorkspace: Color de fondo de una interfaz de documentos múltiples.
Background: Fondo del escritorio.
ButtonFace: Color de la cara de los elementos tridimensionales de la pantalla.
ButtonHighlight: Sombra oscura de los elementos tridimensionales de la pantalla.
ButtonShadow: Color de la sombra de los elementos tridimensionales de la pantalla.
ButtonText: Texto de los botones.
CaptionText: Texto de los títulos, cajas de dimensiones y cajas de flechas de las barras de desplazamiento.
GrayText: Texto grisado (deshabilitado).
Highlight: Item(s) seleccionados en un control.
HighlightText: Texto del(los) item(s) seleccionados en un control.
InactiveBorder: Borde de la ventana inactiva.
InactiveCaption: Título de la ventana inactiva.
InactiveCaptionText: Color del texto de un título inactivo.
InfoBackground: Color de fondo de los controles de sugerencias (tooltip).
InfoText: Color del texto de los controles de sugerencias (tooltip).
Menu: Fondo del menu.
MenuText: Texto de los menúes.
Scrollbar: Area gris de la barra de desplazamiento.
ThreeDDarkShadow: Sombra oscura de los elementos tridimensionales de pantalla.
ThreeDFace: Color de la cara de los elementos tridimensionales de pantalla.
ThreeDHighlight: Color resaltado de los elementos tridimensionales de pantalla.
ThreeDLightShadow: Color claro de los elementos tridimensionales de pantalla.
ThreeDShadow: Sombra oscura de los elementos tridimensionales de pantalla.
Window: Fondo de la ventana.
WindowFrame: Marco de la ventana.
WindowText: Texto de la ventana.

El uso de los colores del sistema del usuario permiten hacer páginas que coinciden con las preferencias y gustos del lector. Esto es importante en los casos en que esas preferencias tienen que ver con alguna discapacidad (ceguera a ciertos colores, por ejemplo). Ver ejemplos

Angulos

Los valores de ángulos, paradójicamente, se usan solamente con las hojas de estilo auditivas. Su forma es un número seguido por un identificador de la unidad del ángulo. Puede estar precedido por los signos de más (+) o menos (-) para indicar si es positivo o negativo.

Los identificadores de la unidad del ángulo son:

deg: degree (grados)
grad: gradianes
rad: radianes

En el ejemplo siguiente, se especifica un ángulo de 90º a la derecha mediante los tres identificadores:

H1 { azimuth: 90deg}
H1 { azimuth: 100grad}
H1 { azimuth: 1.570796326794897rad}

Tiempo

Los valores de tiempo son usados con las hojas de estilo auditivas. Su forma es un número seguido por un identificador de la unidad de tiempo.

Los identificadores para la unidad de tiempo son:

ms: milisegundos
s: segundos

Los valores de tiempo no pueden ser negativos.

Frecuencia

Los valores de frecuecia son usados con las hojas de estilo auditivas. Su forma es un número seguido por un identificador de la unidad de frecuencia.

Los identificadores para la unidad de frecuencia son:

Hz: Hertz
kHz: kilo Hertz

Los valores de la frecuencia no pueden ser negativos.

Por ejemplo, 200Hz (o 200hz) es un sonido bajo y 6kHz (o 6khz) es un sonido agudo.

Cadenas

Una cadena de texto puede escribirse con comillas dobles o simples. Dentro de una comilla doble sólo puede aparecer una comilla simple y viceversa. Ejemplos:

P {font-family: "Times New Roman"}
P {font-family: 'Times New Roman'}

Las palabras clave no deben ir entre comillas pues se convierten en cadenas: Ej.: red es una palabra clave, "red" es una cadena de texto. Una cadena vacía se indica ("").

Identificadores

Los identificadores (incluyendo los nombres de los elementos, clases e ID de los selectores) pueden contener sólo caracteres más el guión (-); no pueden comenzar con un guión o un número.

Forma

En CSS2, el único valor permitido para la forma es: rect(arriba, derecha, abajo, izquierda). Arriba, derecha, abajo, izquierda especifican los desplazamientos de los lados respectivos de la caja y pueden tener un valor de medida o "auto" ("auto" significa lo mismo que "0"). Las medidas negativas están permitidas. Ejemplo:

P { clip: rect(5px, 10px, 10px, 5px) }

Inherit

"Inherit" significa que el elemento toma el mismo valor computado que la propiedad del padre del elemento. De este modo, se refuerza explícitamente el valor heredado. Pero, además, este valor se aplica aún a propiedades que de otro modo no serían heredadas.