Unidad de Medidas en CSS cuales son?

Unidades de medidas en CSS. Estos son los nombres de las unidades de medidas que se utilizan en el lenguaje de programación CSS

Pixeles


Pixeles Antiguamente se utilizaba mucho esta medida para dar un tamaño a todos los elementos en HTML Es decir al tamaño de los títulos, párrafos, imágenes, capas, márgenes y bordes, en la actualidad esta medida es poco utilizada. Para definir un tamaño en pixeles las instrucciones en CSS se formaban así:

Ejemplo

#contendedor { width:850px; heigth:550px; border:1px solid black;}

Con esta instrucción especificábamos antiguamente que el tamaño del div es decir la capa llamada contenedor se mostraría en la pantalla del monitor del visitante con un ancho “width” de 850px que no cubría toda la pantalla y con un alto de imagen “height” de 550px. Y que la capa llamada contenedor este encerrado con un borde de 1px en color negro. “border:1px solid black” para ejemplo la imagen.

Unidad de medida en pixeles
Unidad de medida en pixeles

Unidad de Medida “REM” y “EM”


REM es una unidad de medida que se basa en el tamaño de fuente de la etiqueta HTML de nuestro diseño directamente. El tamaño de este elemento viene predeterminado por el navegador desde el que se está viendo el portal y actualmente es de 16px, si no lo hemos definido nosotros en nuestra CSS. De este modo, cuando trabajemos con REM estaremos definiendo escalas relativas a ese tamaño raíz.

Es decir que la unidad de medida REM adapta su tamaño al dispositivo que utiliza el visitante ya sea un ordenador o un teléfono móvil, Haciendo que las letras sean mas grandes o mas pequeñas.

EM En cambio la unidad de medida EM toma como referencia el elemento en el que nos encontramos. Es decir, si nos encontramos en una capa cuyo tamaño de fuente hemos definido con un valor específico, al usar EM éste configurará su escala en base al tamaño de esa fuente. En caso de no tener ninguna definida, por herencia, tomará el valor del elemento padre en el que nos encontremos y así por jerarquía hasta la raíz.

De modo que podemos resumir que la diferencia entre REM y EM se basa en el elemento que toma como referencia para dar las medidas; el primero usará el valor del elemento HTML, ya sea su valor por defecto como el que hayamos definido específicamente; el segundo adquiere los valores del elemento en el que estamos o del elemento padre por jerarquía.

Así pues, si el elemento del que vamos a tomar la referencia tiene un tamaño de fuente de 14px, entonces 10em o 10rem serán el equivalente a 140px, ya que la fórmula que se aplica para definir el tamaño es 14×10=140.

Recomendación


Para no alargarnos mucho en el tema de las unidades de medida REM y EM yo recomiendo utilizar como unidad de medida REM para dar tamaño a las fuentes. es decir a los tirulos y párrafos de nuestra web.

Y utilizar la unidad de media EM para medir el espacio entre los márgenes y los rellenos “MARGIN” y “PADDING”

Ejemplos gráficos


Imagen de ejemplo al cual no se le a definido medidas en CSS
Imagen de ejemplo al cual no se le a definido medidas en CSS
Creando el código CSS para dar medidas a los elementos HTML
Creando el código CSS para dar medidas a los elementos HTML
Ejemplo de imagen al cual se le a dado medidas y distancias en CSS
Ejemplo de imagen al cual se le a dado medidas a las fuentes y distancias de separación en CSS

Como podéis observar en la tercera imagen podemos notar como el título y los párrafos están separados del borde esto lo hemos echo creando instrucciones en CSS. como se muestra en la segunda imagen de fondo negro.

Unidades de medidas que no utilizaremos en este curso


Desde luego hay muchas mas unidades de medidas en este curso no las estudiaremos todas basta con saber utilizar las unidades de medida REM y EM. Las demás unidades de medidas son:

Compartir esta web

Franklin A Vaca De la Cruz

Programador de aplicaciones para Gestión Empresarial y aplicaciones web, Suscríbete o regístrate a la web y no te pierdas temas importantes. Saludos