Sintaxis de definición de valor
La sintaxis de definición de valores CSS, una gramática formal, se utiliza para definir el conjunto de valores válidos para una propiedad o función CSS. Además de esta sintaxis, el conjunto de valores válidos puede restringirse aún más mediante restricciones semánticas (por ejemplo, para que un número sea estrictamente positivo).
La sintaxis de definición describe qué valores están permitidos y las interacciones entre ellos. Un componente puede ser una palabra clave, algunos caracteres literales, ó un valor de tipo de dato de CSS o propiedad CSS.
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
, porquebold
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 expresadobold 1em thin
porque las entidades son obligatorias; la coma que es un literal debe estar presentebold 0.5ms, thin
porque los valoresms
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 valorbold 1em bold
porque ambos componentes deben aparecer solo una vez
Nota:
Yuxtaposición tiene precedencia sobre el doble ampersand, esto quiere decir que bold thin && <length>
es equivalente a [ bold thin ] && <length>
. Que describe a bold thin <length>
ó <length> bold thin
pero no a bold <length> thin
.
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.
Nota:
El doble ampersand tiene precedencia sobre la barra doble, que significa que bold || thin && <length>
es equivalente a bold || [ thin && <length> ]
. Describe a bold
, thin
, <length>
, bold thin
, <length> bold
, o thin <length> bold
pero no bold <length> bold thin
porque bold, si no es omitido debe colocarse antes o después de el componente thin && <length>
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 presente3em 4.5em
porque un componente debe estar presente máximo una vez.
Nota:
La barra doble tiene precedencia sobre la barra simple, quiere decir que bold | thin || <length>
es equivalente a bold | [ thin || <length> ]
. Describe bold
, thin
, <length>
, <length> thin
, o thin <length>
pero no bold <length>
porque solo una entidad de cada lado del combinador |
puede estar presente.
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
porquebold
esta yuxtapuesto y debe aparecer antes de la palabra clavesmaller
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
porquesmaller
debe aparecer al menos una vezsmaller
porquebold
esta yuxtapuesto y debe aparecer antes de cualquier palabra clavesmaller
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
porquesmaller
debe aparecer como máximo una vezsmaller bold
porquebold
esta yuxtapuesto y debe aparecer antes de cualquier palabra clavesmaller
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
porquesmaller
debe aparecer al menos una vezbold smaller smaller smaller smaller
porquesmaller
debe aparecer un máximo de tres veces.smaller bold
porquebold
esta yuxtapuesto u debe aparecer antes de cualquier palabra clavesmaller
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
porquesmaller
debe aparecer al menos una vezbold smaller smaller smaller
porque las diferentes ocurrencias desmaller
deben estar separadas por comassmaller
porquebold
esta yuxtapuesto y debe aparecer antes de cualquier palabra clavesmaller
Sumario
Símbolo | Nombre | Descripción | Ejemplo |
---|---|---|---|
Combinadores | |||
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> ] |
Multiplicadores | |||
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.