Unidades de medida CSS

En esta sección analizamos todas las unidades de medida que existen en CSS

En CSS existen muchos tipos de medida para los diferentes elementos. Por ejemplo, para definir el color negro podemos utilizar cualquiera de los siguientes valores: "black", "#000000" o "rgba(0, 0, 0, 1)".

Lo mismo sucede con las dimensiones de tamaño que pueden utilizar píxeles o puntos, por ejemplo, se puede especificar "10px" para píxeles, "12pt" para puntos o "2cm" para centímetros.

Medidas absolutas

Las medidas absolutas son fijas y exactas. Es decir, sin importar el tamaño de la pantalla se mostrarán de la misma forma en un celular como en una computadora de escritorio. Estas son:

  • cm - Centímetros
  • mm - Milimetros
  • in - Pulgadas (1 pulgada = 96 píxeles = 2.54 centímetros)
  • px - Píxeles (un píxel es un punto en la pantalla y puede variar entre equipos)
  • pt - Puntos (72 puntos = 1 pulgada)
  • pc - Picas (1 pica = 12 puntos)

Medidas relativas

Las medidas relativas se hicieron populares con la aparición de dispositivos móviles, pues, como su nombre lo dice se adaptan a la escala del elemento superior. Por ejemplo, podemos especificar que un parrafo sea "50%" del ancho de la pantalla y eso significa que sin importar el tamaño del equipo, siempre será la mitad. La lista completa es:

  • % - Porcentaje relativo al elemento superior
  • em - Relativo al tamaño de la fuente del elemento, por ejemplo, "2em" significa el doble del tamaño de la fuente.
  • rem - Relativo al tamaño de la fuente del elemento raiz.
  • vw - Relativo al porcentaje del ancho de la pantalla. Por ejemplo "33vw" es un tercio del ancho de la pantalla.
  • vh - Relativo al porcentaje del alto de la pantalla.

Colores

Los colores se pueden definir de varias formas:

  • 

RGB - Son colores definidos por sus valores RGB (rojo, verde y azul). Cada valor puede ser definido por números del 0 al 255 como rgb(0, 100, 230) o utilizando porcentajes como rgb(10%, 0, 30%). Se puede adicional un valor "alpha" que va de 0 a 1 para las transparencias, por ejemplo, rgba(0, 255, 0, 0.3) es un verde transparente.
  • Hexadecimales - Son colores RGB escritos en código hexadecimal, por ejemplo el negro es "#000000" y el blanco "#FFFFFF". También se puede aumentar un valor de transparecia al final, por ejemplo un rojo transparente es "#ff000080".
  • HSL - Son colores definidos por el tono "hue", saturación "saturation" y brillo "lightness". El formato no es muy usado y es similar al RGB, por ejemplo un verde es hsl(120, 100%, 50%). También permite aumentar la transparencia como hsla(120, 100%, 50%, 0.3) para hacer un verde transparente.
  • Lista de colores - Existe una lista de 140 colores predefinidos en todos los navegadores, los más comunes son los básicos como "black", "white", "red", "blue" o "orange"
26 me gusta
96 vistas
Anterior ¿Para qué sirve el código CSS?
Siguiente Propiedades de estilo CSS de bloques
Programar en HTML y CSS
En esta lista de tutoriales veremos como programar de forma clara y directa en código HTML y CSS que son la base de la web.