Unidades de medida CSS

Hola a todos hoy os explicare las unidades de medida de CSS aplicándolos a ejemplos.

Las medidas en CSS se usan para definir la altura, anchura y márgenes de los elementos y del  tamaño de las letras.

Se indican con un valor numérico seguido de una unidad de medida.

– Unidades relativas:

Son unidades de medida que dependen de su referencia.

Las unidades relativas son:

  • em: es relativa respecto del tamaño de letra empleado. 1em es la anchura de la letra M mayúscula del tipo de letra que se está utilizando. Puede usar decimales.

ejemplo css unidades relativas em

ejemplo html unidades relativas em

  • ex: es relativa respecto de la altura de la letra x minúscula del tipo de letra que se esté utilizando. Puede usar decimales.

ejemplo css unidades relativas ex

ejemplo html unidades relativas ex

  • px: es relativa respecto de la pantalla del usuario. No puede usar decimales.

ejemplo css unidades relativas px

ejemplo html unidades relativas px

– Unidades absolutas:

Son unidades de medida que tienen unos valores determinados.

Las unidades absolutas son:

  • in: pulgadas (1 pulgada=2.54 cm)
  • cm: centimetros
  • mm: milímetros
  • pt: puntos (1 pt= 0.35 mm)
  • pc: picas (1 pica=4.23 mm)

ejemplo css unidades absolutas

ejemplo html unidades absolutas

– Porcentajes:

 Es relativa  respecto al tipo de unidad de medida usada. Si usamos una unidad relativa, también le afectara.

Por ejemplo, supongamos que asignamos a la etiqueta body un font-size de 100px y hacemos un selector de clase con otra regla con otro font-size de 50% y se lo aplicamos a un párrafo. Veremos que las letras de un párrafo serán más grandes que otro.

ejemplo css porcentajes

ejemplo html porcentajes

Espero que os sea de ayuda.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *