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"
73 me gusta
292 vistas
Anterior ¿Para qué sirve el código CSS?
Siguiente Propiedades de estilo CSS de bloques
Programar en HTML y CSS

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.

¿Cómo se escribe en código HTML?

En esta sección veremos los elementos y la forma en la que se debe escribir el código de hipertexto o HTML.
Tiene video

Esquema de una página HTML

En este artículo veremos el esquema básico de una página en HTML5, la última version de código HTML que existe.

¿Existen reglas para escribir código HTML?

En este artículo analizaremos la forma correcta de escribir en código HTML.

¿Para qué sirve el código CSS?

Aquí veremos para que sirven las hojas de estilo y su uso en los sitios web.

Unidades de medida CSS

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

Propiedades de estilo CSS de bloques

En este artículo vemos las propiedades de estilo que tienen los bloques utilizando una hoja de estilos CSS.

Propiedades CSS para los textos

Aquí veremos como se puede dar estilo a los textos utilizando las propiedades de estilo CSS.

Selectores de estilo CSS

En esta sección vamos a analizar lo básico sobre los selectores de estilo CSS.

¿Qué sucede si no uso estilos CSS en mi página?

En esta sección analizaremos qué es lo que sucede cuando no se utiliza ninguna hoja de estilos CSS en un sitio web.

¿Debería utilizar un framework CSS?

Muchas veces nos preguntamos si vale la pena utilizar un framework como Bootstrap o MaterialUI. En este artículo analizamos la situacion.