Unidades de medida en css

Estas son las unidades de medida más utilizadas, sin lugar a dudas los pocentajes nos permiten con gran facilidad el diseño responsive de nuestro sitio web. Las unidades de medida como los pixeles, son unidades constantes las cuales no cambian. Los centímetros son unidades constantes como lo son los pixeles, pero en mayor proporción. Támbien tenemos los rem y los em, los cuales van más de acuerdo con la medida que tiene por defecto un contenedor padre.

Propiedades de un elemento

En la web los elementos tienen propiedades asignadas por defecto, estas propiedades puedes quitarlas manualmente, aunque puedes modificar los múltiples elementos con un slector universal cabe recalcar que a la hora de estabilizar todas las propiedades de los elementos de tu página, si que encontrarás cierta dificultad.

Para esto existen muchos FrameWorks los cuales nos pueden ayudar y facilitar el trabajo así como reiniciar los estilos Css que tiene la web por defecto. Estos son algunos estilos por defecto que tienen algunos elementos:

Todas esas propiedades son las más comunes de encontrar dentro de un elemento.

Crear un contenedor

A medida que vayas conociendo y, aprendiendo más acerca de Css, te encontrarás con que los elementos necesitan estar dentro de un contenedor para derles estilos, los estilos suelen ser para todos los elementos hijos. Un contenedor puede ser de la siguiente manera:

De esta manera podemos crear un contenedor completamente válido para hacer buenas páginas web, además de que es adaptable a dispositivos móviles.

Tipos de selectores en Css

Los selectores son muy variados, y son tantos que simplemente explicarlos todos sería un trabajo abrumador, pero vamos con los más fáciles, los más utilizados y los que seguramente tú vas a utilizar más seguido. En el siguiente ejemplo podemos ver algunos de estos tipos de selectores:

Como antes dicho, estas son las etiquetas que más vas a utilizar, aunque hay muchas más formas y tipos de selectores, pero estos son los más básicos

Floats

Los floats ya casi no se utilizan en la maquetación web, pero si que te los puedes encontrar en otras páginas dado que fueron utilizados durante un tiempo hasta la llegada de flex y grid. De igual manera pueden ser muy buenos para flotar algunos elementos hacia otro lado. En el siguiente ejemplo te mostramos como posicionar dos elementos div uno al lado del otro:

Flotamos ambos contenedores a la izquierda, ahora, ¿por qué ambos? Esto porque si flotas uno, este tratará de flotar a la dirección que se le asignó, pero no lo podrá hacer dado que el otro contenedor no tiene la asignación de también flotar a la izquierda o derecha, cual sea la direeción que se le haya asignado.

Elementos que comparten las mismas propiedades

Una forma de ahorrarnos el código es escribir que algunos elementos compartan las mismas propiedades, tomando el eljemplo anterior podemos ahorrarnos código escribiendo lo siguiente:

Esta es una forma muy efectiva de ahorrarnos el código, pero, ¿qué pasa si necesito darle estilos a uno de esos dos contenedores? Este siguiente ejemplo aclara la duda:

Aquí los dos contenedores, (o elementos) comprarten las mismas propiedades, pero una de las buenas cosas de Css es que podemos reescribir el código, esta característica nos sirve mucho para evitar errores futuros, además podemos reescribir un elemento que ya tenga propiedades definidas y si nosotros queremos que ocurra algo cuando el usuario haga alguna acción pues... podemos utilizar estas propiedades.

Así es como podemos ahorrarnos código y darle estilos Css a un elemento ya definido, preservando así sus propiedades Css.