Unidades de medida 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".