Breaking

Post Top Ad

Your Ad Spot

miércoles, 13 de noviembre de 2019

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.
UnidadEjemploDescripción
%p {
font-size:16px;
line-height:150%;
}
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.
emspan {
display:inline-block;
width:5em;
}
Representa el tamaño de una letra "M" de la fuente del elemento.
exspan {
display:inline-block;
width:5ex;
}
Representa la altura de una letra "x" de la fuente del elemento.
chspan {
display:inline-block;
width:5ch;
}
Representa el tamaño de "0" (ZERO, U+0030) de la fuente del elemento.
remh1 {
font-size:2rem;
}
Representa el tamaño de fuente del elemento raiz. ( En el HTML el tamaño de fuente del elemento <html> )
vwdiv {
width:50vw;
}
Represemta el 1% de la anchura del viewport
vhdiv {
height:50vh;
}
Represemta el 1% de la altura del viewport
vmindiv {
width:50vmin;
}
Representa el menor entre vw y vh
vmaxdiv {
width:50vmax;
}
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.
UnidadEjemploDescripción
cmh2{line-height:3cm;}1 cm = 96 px/2.54
1 cm = 37.79528 px
mmh3{word-spacing:4mm;}1mm = 1/10 cm
1 mm = 3.779528 px
Qh3{letter-spacing:1Q;}un cuarto de milímetro
1 Q = 1/40 cm
1 Q = 0.94 px
inh1{margin: 0.5in;}1 pulgada = 2.54cm
1 pulgada = 96px o
1 pulgada = 72pt
pch4{font-size:1pc;}El cícero o pica es una unidad de medida tipográfica de aproximativamente 1/6 pulgadas
1 pc = 16 px
pth4{font-size:12pt;}1pt = 1/72 in
1 pt = 1.333333 px
pxp { font-size: 12px }Píxeles

Unidades para ángulos

Utilizadas para crear gradientes o para trasformaciones CSS (rotate).
UnidadEjemploDescripció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.
UnidadEjemploDescripción
sdiv {
transition-duration: .5s;
}
Segundo
msdiv {
transition-duration: 500ms;
}
Milisegundo. Hay 1000 milisegundos en un segundo

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas