Semana #06

Clase Teórica | Selectores .class, Flexbox, Fuentes para web.

 

 

Unidades de medida en CSS


Las medidas en CSS se emplean para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de fuente del texto. Todas las medidas se indican como un valor numérico entero o decimal seguido de una unidad de medida.

CSS divide las unidades de medida en dos grupos: absolutas y relativas. Las medidas relativas definen su valor en relación con otra medida, por lo que para obtener su valor real, se debe realizar alguna operación con el valor indicado. Las unidades absolutas establecen de forma completa el valor de una medida, por lo que su valor real es directamente el valor indicado.

Nos referimos a píxeles (px) como una de las unidades absolutas, porque siempre tienen el mismo tamaño, independientemente de cualquier otra medida. No es una unidad escalable: no guarda relación con la medida de fuente de su contenedor o del contenedor root.

Por otro lado disponemos de unidades relativas, que lo son respecto al tamaño de fuente, font-size o a la ventana actual (viewport). Entre las que utilizaremos las unidades de medida rem y porcentaje (%)

 

Porcentajes


La unidad de medida porcentual es la que se usa por defecto en los elementos HTML en donde de manera predeterminada cada elemento de bloque usa un ancho del 100%, es por eso que cuando achicamos la ventana del navegador con una página que no tenga estilos, la página se adapta, ya que siempre usará el ancho total visible.

Pero nosotros podemos utilizar  los porcentajes de una manera más avanzada tratando de generar layouts mas complejos (esquema de distribución de los elementos dentro un diseño).

Supongamos, por ejemplo, que hay un main que contiene  elementos de la página y, según el diseño, este elemento debiera medir 1200 pixeles. En lugar de usar esa medida en pixeles, es conveniente usar una medida en porcentajes, en donde el máximo ancho del elemento sean esos 1200px:

 

El uso de los porcentajes también lo podemos llevar a elementos interiores del layout, en donde, por ejemplo, podemos asignar a la columna principal de contenido y a la barra lateral unas medidas de ancho del 70% y el 30% respectivamente, haciendo que sean completamente adaptables al tamaño de su elemento contenedor.

 

 

Rem


La unidad rem viene de Root EM, que es igual al font-size del elemento root, que en HTML sería el elemento <html>. Es una medida relativa no a su elemento padre, sino al contenedor principal html.

Esto significa que si el elemento HTML tiene un tamaño de fuente de 16px (como es por defecto), entonces 1rem, sería igual a 16px, y si queremos aplicar un tamaño basado en rem a cualquier elemento de la página, no importará cual sea el tamaño de fuente que tenga asociado ese elemento, ya que 1 rem siempre será igual a 16 pixeles a no ser que se modifique el elemento raíz.

Usar rem nos permite cierta estructura para poder definir ciertas partes del layout, pero al mismo tiempo nos entrega cierta escalabilidad para respetar las configuraciones de cada usuario.

 


FLEXBOX


La propiedad Flexible Box, o flexbox, de CSS3 es un modo de diseño que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. Para muchas aplicaciones, el modelo “caja flexible” produce una mejora sobre el modelo “bloque” porque no utiliza la propiedad float, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos.

Muchos diseñadores verán que el modelo “caja flexible” es más sencillo de utilizar. Los elementos“hijos” de una “caja flexible” pueden colocarse en cualquier dirección y pueden tener dimensiones flexibles para adaptarse al espacio visible. Posicionar los elementos “hijos” es más sencillo, y los diseños complejos pueden hacerse más fácilmente y con código más limpio, ya que el orden de visualización de los elementos es independiente del orden que estos tengan en el código fuente. Esta independencia afecta intencionadamente únicamente a la representación visual, dejando el orden de distribución y navegación a lo que diga el código fuente.

Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.

 

| LINKS RECOMENDADOS | FLEXBOX