Valores y Unidades de CSS
Cada declaración CSS, consiste en un par propiedad/valor. El valor puede tomar varias formas dependiendo de la propiedad, como puede ser un solo entero, una palabra clave, una función o una combinación de elementos diferentes; algunos valores tienen unidades, mientras que otros no. Cada propiedad acepta también los valores de todo CSS. El módulo de valores y unidades, define los tipos de datos - valores y unidades - que las propiedades CSS aceptan. Este módulo también define la sintaxis de valores CSS, o la gramática formal usada para definir un conjunto de valores válidos para cada propiedad y función CSS.
Nota: Esta página introduce un módulo CSS. Para encontrar una lista exhaustiva de todos los valores, tipos y funciones definidas por la especificación de CSS, vea la página de referencia de los valores.
Referencia
Propiedades
Funciones
abs()acos()asin()atan()atan2()attr()calc()calc-size()clamp()cos()exp()hypot()<ident()>if()inherit()log()max()min()mod()pow()progress()random()rem()round()sibling-count()sibling-index()sign()sin()sqrt()tan()url()
El módulo de valores y unidades CSS también introduce las funciones calc-mix(), first-valid(), integrity(), random-item(), src(), type(), y toggle(). Actualmente, ningún navegador soporta estas funciones.
Tipos de datos
<angle-percentage><angle><attr-name><attr-type><calc-keyword>(e,pi,infinity, NaN)<calc-size-basis><calc-sum><custom-ident><dashed-ident><dimension><easing-function><ident><integer><length-percentage><length><number><percentage><position><ratio><resolution><rounding-strategy>(down,up,to-zero)<string><syntax><time-percentage><time><url><url-modifier>
El módulo de valores y unidades también introduce los tipos de dato <frequency> y <frequency-percentage>. Actualmente, ningún navegador soporta estos tipos de dato.
Unidades
%(porcentaje)capchcmdegdpcmdpidppxdvbdvhdvidvmaxdvmindvwemexgradHzicinkHzlhlvblvhlvilvmaxlvminlvwmmmspcptpxQradrcaprchremrexricrlhssvbsvhsvisvmaxsvminsvwturnvbvhvivmaxvminvwx
Las Unidades Flex (fr) y las unidades de contenedor (cqb, cqh, cqi, cqmax, cqmin, cqw) están definidas en los módulos CSS grid layout y reglas condicionales CSS respectivamente.
Categorización de las unidades
- Unidades de longitud absolutas (
cm,in,mm,pc,pt,px,Q) - Unidades de ángulos (
deg,grad,rad,turn) - Unidades por defecto del viewport (
vb,vh,vi,vmax,vmin,vw) - Unidades dinámicas del viewport (
dvb,dvh,dvi,dvmax,dvmin,dvw) - Unidades de Frecuencia (
Hz,kHz) - Unidades de porcentaje amplias del viewport (
lvb,lvh,lvi,lvmax,lvmin,lvw) - Unidades de longitud relativas a la fuente local (
cap,ch,em,ex,ic,lh) - Unidades físicas (
cm,in,mm,pc,pt,Q) - Unidades de longitud relativas (
cap,ch,em,ex,ic,lh,rem,rlh,vb,vh,vi,vmax,vmin,vw) - Unidades de resolución (
dpcm,dpi,dppx,x) - Unidades de longitud relativas a la fuente de la Raíz (
rcap,rch,rem,rex,ric,rlh) - Unidades de porcentaje reducidas del viewport (
svb,svh,svi,svmax,svmin,svw) - Unidades de tiempo (
ms,s) - Unidades del Viewport (
dvh,dvw,lvh,lvw,svh,svw,vb,vh,vi,vmax,vmin,vw) - Unidades del ángulo visual (
px)
Conceptos clave
- Medida de avance
- Notación de rango con corchetes
- Tipos de valor de los componentes
- CSS-wide keywords
- Píxeles del dispositivo
- Notación funcional
- Identificador
- Interpolación
- Palabra clave
- Funciones matemáticas
- Tipos de dato Númerico
- Origen
- Pixel
- Tipos de dato Textual
- URL
- Sintaxis de definición de Valor
Guías
- CSS data types
-
Introducción a los tipos de datos CSS que definen valores aceptados por propiedades y funciones CSS.
- Tipos de dato Númericos
-
Descripción general de los tipos de dato númericos, incluyendo enteros, numbero, porcentajes y dimensiones, junto con dimensiones absolutas y relativas, ángulos y unidades de tiempo.
- Tipos de dato Textuales
-
Descripción general de los tipos de dato textuales, incluye valores de palabras reservadas predefinidas, valores de palabras resesrvadas CSS globales y URLs.
- Funciones de valor CSS
-
Descripción general de declaraciones CSS que invocan procesamiento especial de datos o cálculos que regresan un valor CSS para una propiedad.
- Usando funciones matemáticas CSS
-
Las funciones matemáticas CSS que permiten que los valores de propiedades se escriban como expresiones matemáticas.
- Sintaxis de definición de Valor
-
La gramática formal usada para definir un conjunto de valores válidos para propiedades y funciones CSS.
- Usando aritmética tipada CSS
-
Una explicación del comportamiento del tipado aritmético CSS y casos de uso que éste habilita.
- Aprende: Valores y unidades
-
Una mirada a los tipos de valores usados más frecuentemente, cuáles son y cómo funcionan.
- Serialización de valores CSS
-
Como las APIs CSSOM serializan color y otros valores en representaciones estándar.
Relacionado
-
<flex>- Unidades Flex (
fr)
-
- Unidades de contenedor (
cqb,cqh,cqi,cqmax,cqmin,cqw)
- Unidades de contenedor (
Especificaciones
| Specification |
|---|
| CSS Values and Units Module Level 3 |
| CSS Values and Units Module Level 4 |
| CSS Values and Units Module Level 5 |