Unidades CSS
Unidades relativas
Las unidades relativas especifican el valor de la longitud relativo al valor de otra longitud. Las hojas de estilo que utilizan unidades relativas pueden ser redimensionadas fácilmente.
Unidad | Ejemplo | Descripción |
---|---|---|
% |
p { |
El valor de una propiedad expresado en porcentajes. Relativo a otro valor, normalmente un valor heredado del elemento padre. Utilizados para unidades de longitud, ángulos, tiempo, números, frecuencia. |
em |
span { |
Representa el tamaño de una letra "M" de la fuente del elemento. |
ex |
span { |
Representa la altura de una letra "x" de la fuente del elemento. |
ch |
span { |
Representa el tamaño de "0" (ZERO, U+0030) de la fuente del elemento. |
rem | h1 { |
Representa el tamaño de fuente del elemento raiz. ( En el HTML el tamaño de fuente del elemento <html> ) |
vw |
div { |
Represemta el 1% de la anchura del viewport |
vh |
div { |
Represemta el 1% de la altura del viewport |
vmin | div {
| Representa el menor entre vw y vh |
vmax | div {
| Representa el mayor entre vw y vh |
Unidades absolutas
Las unidades absolutas son fijas en relación con otras. Estas medidas son dadas en unidades físicas conocidas como centímetros, milímetros pulgadas, o pixeles , y pueden ser muy útiles en diseños de página con dimensiones fijas.
Unidad | Ejemplo | Descripción |
---|---|---|
cm | h2{line-height:3cm;} |
1 cm = 96 px/2.54 1 cm = 37.79528 px |
mm | h3{word-spacing:4mm;} |
1mm = 1/10 cm 1 mm = 3.779528 px |
Q | h3{letter-spacing:1Q;} |
un cuarto de milímetro 1 Q = 1/40 cm 1 Q = 0.94 px |
in | h1{margin: 0.5in;} |
1 pulgada = 2.54cm 1 pulgada = 96px o 1 pulgada = 72pt |
pc | h4{font-size:1pc;} |
El cícero o pica es una unidad de medida tipográfica de aproximativamente 1/6 pulgadas 1 pc = 16 px |
pt | h4{font-size:12pt;} |
1pt = 1/72 in 1 pt = 1.333333 px |
px | p { font-size: 12px } |
Píxeles |
Unidades para ángulos
Utilizadas para crear gradientes o para trasformaciones CSS (rotate).
Unidad | Ejemplo | Descripción |
---|---|---|
deg | .giro{transform: rotate(-90deg);} |
Grado sexagesimal. Hay 360 grados en un circulo completo. |
grad | .giro{transform: rotate(-100grad);} |
Grado centesimal o gon, también llamado gradián. Hay 400 gradianes en un circulo completo. |
rad | .giro{transform: rotate(-1.57rad);} |
Radián. Hay 2*Math.PI radianes en un circulo completo. |
turn | .giro{transform: rotate(-.25turn);} |
Un giro completo de 360deg |
Unidades de tiempo
En CSS el tiempo se expresa en segundos ( s
) o milisegundos ( ms
), y es utilizado para crear animaciones y transiciones.
Unidad | Ejemplo | Descripción |
---|---|---|
s |
div { |
Segundo |
ms |
div { |
Milisegundo. Hay 1000 milisegundos en un segundo |