Sintaxis de definición de valor

Tipos de valor de los componentes

Palabras clave

Palabras clave genéricas

Una palabra clave con significado predefinido aparece literalmente, sin comillas, por ejemplo: auto, smaller or ease-in.

El caso específico de inherit e initial

Todas las propiedades CSS aceptan las palabras clave inherit e initial que son definidas vía CSS. Estas no son mostradas en la definición del valor y están implícitamente definidas.

Literales

En CSS, unos pocos caracteres pueden aparecer por su cuenta, como la barra ('/') o la coma (','), y son usadas en una propiedad o definición para separar sus partes. La coma es a menudo usada para separar valores en enumeraciones, o parámetros en funciones de tipo matemático; la barra a menudo separa partes de el valor que es semánticamente diferente, pero que tiene una sintaxis común. Típicamente, la barra es usada a veces en propiedades abreviadas para separar componentes que son del mismo tipo, pero pertenecen a diferentes propiedades.

Ambos símbolos aparecen literalmente en una definición de valor.

Tipos de dato

Tipos de dato básicos

Un tipo de dato usado vía CSS es definido una sola vez para todos los valores en la especificación. Se llaman tipos de datos básicos, estan representados por su nombre rodeados del símbolo '<' y '>': <angle>, <string>, …

Tipos de dato no terminales

Tipos de dato poco comunes, llamados tipos de datos no terminales, están también rodeados por '<' y '>'.

Los tipos de dato no terminales son de dos tipos::

• tipos de datos que comparten el mismo nombre de propiedad, colocados entre comillas . En este caso el tipo de dato comparte el mismo conjunto de valores de la propiedad. A menudo son usados en la definición de propiedades abreviadas.
• tipos de datos que no comparten el mismo nombre de la propiedad. Estos tipos de datos son muy cercanos a sus tipos de datos básicos. Ellos solo difieren de los tipos de datos básicos en la ubicación física de su definición: en este caso la definición es usualmente físicamente muy cercana a la definición de la propiedad que la esta usando.

Combinadores de los valores de componentes

Corchetes

Corchetes encierran varias entidades, combinadores, y multiplicadores, luego los transforman en un solo componente. Son usados para agrupar componentes para sobreescribir las reglas de precedencia.

bold [ thin && <length> ]

El ejemplo empareja con los siguientes valores:

• bold thin 2vh
• bold 0 thin
• bold thin 3.5em

Pero no con:

• thin bold 3em, porque bold esta yuxtapuesto con el componente definido por los corchetes, debe aparecer antes de él.

Yuxtaposición

Colocar varias palabras clave, literales, o tipos de datos, uno al lado del otro, solo separados por uno o varios espacios se llama yuxtaponer. Todos los componentes yuxtapuestos son obligatorios y deben aparecer en ese orden exacto.

bold <length> , thin

El ejemplo empareja con los siguientes valores:

• bold 1em, thin
• bold 0, thin
• bold 2.5cm, thin
• bold 3vh, thin

Pero no con:

• thin 1em, bold porque las entidades deben aparecer en el orden expresado
• bold 1em thin porque las entidades son obligatorias; la coma que es un literal debe estar presente
• bold 0.5ms, thin porque los valores ms no son de tipo <length>

Doble ampersand

Separar dos o mas componentes por un doble ampersand, &&, significa que todas esas entidades son obligatorias pero pueden aparecer en cualquier orden.

bold && <length>

El ejemplo empareja con los siguientes valores:

• bold 1em
• bold 0
• 2.5cm bold
• 3vh bold

Pero no con:

• bold porque ambos componentes deben aparecer en el valor
• bold 1em bold porque ambos componentes deben aparecer solo una vez

Barra doble

Separar dos o mas componentes por una barra doble, ||, significa que todas las entidades son opcionales: al menos una debe estar presente, y pueden aparecer en cualquier orden. Típicamente ésto es usado para definir los diferentes valores de una propiedad abreviada.

<'border-width'> || <'border-style'> || <'border-color'>

El ejemplo empareja con los siguientes valores:

• 1em solid blue
• blue 1em
• solid 1px yellow

Pero no con:

• blue yellow porque un componente debe aparecer al menos una vez.
• bold porque no es una palabra clave permitida como valor de ninguna de las entidades.

Barra simple

Separar dos o mas componentes con una barra simple, |, quiere decir que todas las entidades son opciones exclusivas: exactamente una de estas opciones debe estar presente. Esto es tipicamente usado para separar una lista de posibles palabras clave.

<percentage> | <length> | left | center | right | top | bottom

El ejemplo empareja con los siguientes valores:

• 3%
• 0
• 3.5em
• left
• center
• right
• top
• bottom

Pero no

• center 3% porque solo uno de los componentes debe estar presente
• 3em 4.5em porque un componente debe estar presente máximo una vez.

Multiplicadores de valores de componentes

Un multiplicador es un símbolo que indica cuantas veces una entidad precedente puede ser repetida. Sin un multiplicador, una entidad debe aparecer exactamente una vez.

Note que los multiplicadores no pueden sumarse y tienen precedencia sobre los combinadores.

Asterisco (*)

El multiplicador asterisco indica que la entidad puede aparecer cero, una o varias veces.

bold smaller*

El ejemplo empareja con los siguientes valores:

• bold
• bold smaller
• bold smaller smaller
• bold smaller smaller smaller y así sucesivamente

Pero no:

• smaller porque bold esta yuxtapuesto y debe aparecer antes de la palabra clave smaller

Suma (+)

El multiplicador suma indica que la entidad puede aparecer una o varias veces.

bold smaller+

El ejemplo empareja con los siguientes valores:

• bold smaller
• bold smaller smaller
• bold smaller smaller smaller y sucesivamente

Pero no:

• bold porque smaller debe aparecer al menos una vez
• smaller porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller

Pregunta (?)

El multiplicador pregunta indica que la entidad es opcional y debe aparecer cero o una vez

bold smaller?

El ejemplo empareja con los siguientes valores:

• bold
• bold smaller

Pero no:

• bold smaller smaller porque smaller debe aparecer como máximo una vez
• smaller bold porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller

Llaves ({ })

El multiplicador llaves, encierra a dos enteros A y B separados por una coma, indica que la entidad debe aparecer al menos A veces y como mas B veces

bold smaller{1,3}

El ejemplo empareja con los siguientes valores:

• bold smaller
• bold smaller smaller
• bold smaller smaller smaller

Pero no:

• bold porque smaller debe aparecer al menos una vez
• bold smaller smaller smaller smaller porque smaller debe aparecer un máximo de tres veces.
• smaller bold porque bold esta yuxtapuesto u debe aparecer antes de cualquier palabra clave smaller

Hash (#)

El multiplicador hash indica que la entidad puede repetirse una o mas veces (como con el multiplicador de suma) pero cada ocurrencia se separa por una coma (',').

bold smaller#

El ejemplo empareja con los siguientes valores:

• bold smaller
• bold smaller, smaller
• bold smaller, smaller, smaller y así sucesivamente

Pero no:

• bold porque smaller debe aparecer al menos una vez
• bold smaller smaller smaller porque las diferentes ocurrencias de smaller deben estar separadas por comas
• smaller porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller

Sumario

Símbolo Nombre Descripción Ejemplo Combinadores Multiplicadores

	Yuxtaposición	Componentes obligatorios que deben aparecer en el mismo orden	solid <length>
&&	Doble ampersand	Componentes obligatorios pero que pueden aparecer en cualquier orden	length> && <string>
||	Barra doble	Al menos uno de los componentes debe estar presente, y pueden aparecer en cualquier orden	<'border-image-outset'> || <'border-image-slice'>
|	Barra simple	Exactamente uno de los componentes debe estar presente	smaller | small | normal | big | bigger
[ ]	Corchetes	Agrupa componentes para sobreescribir las reglas de precedencia	bold [ thin && <length> ]
	Sin multiplicador	Exactamente 1 vez	solid
*	Asterisco	0 or more times	bold smaller*
+	Suma	1 o mas veces	bold smaller+
?	Pregunta	0 o 1 vez (es opcional)	bold smaller?
{A,B}	Llaves	Al menos A veces, como mas B veces	bold smaller{1,3}
#	Hash	1 o mas veces, pero cada ocurrencia separada por una coma (',')	bold smaller#

Especificaciones

Specification

CSS Values and Units Module Level 4 # value-defs

Vea también

• CSS Key Concepts: CSS syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values. Definitions of value syntax, shorthand properties and replaced elements.