Propiedad CSS: sus valores

A estas alturas seguramente habrás asimilado los conceptos cardinales básicos del lenguaje CSS.
Pasemos ahora a explorar sus propiedades.

Las propiedades CSS no son más que aquellas características a las que vamos a asignar valores que definirán el estilo concreto de nuestros elementos html.
Ya hablamos de esto cuando te contamos sobre la sintaxis CSS. ¿Recuerdas qué es una declaración? ¡Exactamente! Un pareja propiedad-valor.
Refresquemos nuestra memoria con este ejemplo:

selettore {
   propriedad: valor;
}

Los valores a asignar a las propiedades CSS son diversos y numerosos. Para facilitar el aprendizaje, los dividiremos en macrocategorías.

Colores

Los valores que le puedes dar a la propiedad "color" en el lenguaje CSS se pueden expresar de diferentes formas:

• la propiedad css “color:” + el nombre del color
  ejemplo: 

  h1 {
     color: red;
  }

• la propiedad css “color:” + valor hexadecima
  ejemplo:

h1 {
   color: #ff0000;
}

• la propiedad css “color:” + valore hexadecimal con transparencia que se aplica sumando dos dígitos que van desde 00 (completamente transparente) a ff (completamente opaco) a hexadecimal
  ejemplo:

h1 {
   color: #ff000088;
}

• la propiedad css “color:” + valor rgb (los valores van de 0 a 255 y se separan con una coma)
  ejemplo:

  h1 {
     color: rgb(255,0,0);
  }
  

• la propiedad css “color:” + valor rgba (el valor “a” da la transparencia, que va desde 0 - completamente transparente -a 1- completamente opaco-) Ejemplo: 

h1 {
   color: rgba(255,0,0,0.5);
}

Keywords

Un tipo de valor que consta de palabras clave que son específicas de una propiedad determinada.
Enumerarlos a todos sería imposible, los veremos gradualmente a medida que exploremos las propiedades de CSS.

Cadenas de texto

Un ejemplo óptimo para comprender un valor expresado a través de cadenas de texto es el del valor atribuido a la propiedad font-family en nuestro documento CSS.
La propiedad antes mencionada nos permite indicar a nuestra página web qué tipo de letra se utilizará.
Veamos la sintaxis: 

* { 
    font-family: ‘Montserrat’, sans-serif;
}

La cadena de texto, en este caso, es el nombre de la fuente, es decir, 'Montserrat'.
Sans serif, a continuación, es en cambio una palabra clave de la propiedad font-family.
Indica que, si falta el enlace a la fuente Montserrat, la fuente a utilizar sería la fuente sans-serif por defecto del navegador utilizado.

Números

Números enteros o con una coma, es posible que no pienses de inmediato en la utilidad de un valor expresado en números sin una unidad de medida.
Un ejemplo concreto podría ser el valor a asignar a la propiedad z-index, propiedad que nos permite determinar qué elemento de nuestra página web estará en primer plano y cuál irá detrás.
Imagina que tienes dos elementos a los que has asignado un valor de propiedad de índice z diferente.
Has asignado al elemento 1 un índice z igual a "10", al elemento 2 un índice z igual a "11".
El elemento 1 se colocará detrás del elemento 2.

Unidad de medida

Este tipo de valor se asigna para caracterizar propiedades relacionadas con dimensiones, distancias y espacios en general. Este valor se expresa en números, seguido inmediatamente por la unidad de medida - ¡sin espacios! -
Las unidades de medida son variadas, no obstante, a efectos de un aprendizaje más práctico, solo veremos las más utilizadas en la web:

• px : los píxeles -todos los conocemos- son la unidad de medida por excelencia de las pantallas; se refieren al píxel físico real de la pantalla y tienen un tamaño fijo: trata de concebirlos como las piezas de un mosaico que forman la imagen que ves en la pantalla.
   
• percentuali: las unidades de medida expresadas como porcentaje se refieren al valor de la propiedad principal de ese elemento en particular.

¿Qué significa?
Si tenemos un <div> rojo dentro de un <div> verde, y el rojo tiene una unidad de medida para su propiedad "ancho" expresada en porcentaje (por ejemplo: 50%), nuestro div rojo no será tan grande como el 50 % de la pantalla, pero ocupará exactamente el 50 % de la pantalla principal (es decir, la división verde).

La unidad de medida porcentual es una unidad menos estable que el píxel: no es fijo, es flexible. Esto significa que a medida que cambia el tamaño del padre, por supuesto, su tamaño cambiará.
Veámoslo mejor: si el padre en cuestión es el propio cuerpo, al pasar de un escritorio a un dispositivo móvil -como tu teléfono móvil- el tamaño de la pantalla se reducirá. En ese caso, el 50% del div rojo tomado en el análisis ahora, teniendo el cuerpo como padre, no siempre corresponderá a la misma cantidad de píxeles, ya que la pantalla será más pequeña.

• em:es una unidad de medida relacionada con el tamaño de fuente del padre de nuestro elemento.Supongamos que hemos asignado un tamaño de letra genérico de 20px a los textos contenidos en nuestra cabecera; si asignamos un tamaño de fuente de 2em a un párrafo contenido en el encabezado, el texto de ese párrafo medirá 40px.
• rem: funciona de manera similar a em, pero a diferencia de este último, rem es una unidad de medida que se basa en el tamaño de las fuentes presentes en la raíz, o la "raíz" de nuestro documento html. Para muchos navegadores esta medida corresponde a 16px, pero si quisiéramos cambiarla, bastaría con asignarle al cuerpo el tamaño de fuente deseado. Por tanto, podríamos decir que un rem es un em cuyo padre es el cuerpo.
• viewport: la ventana gráfica es literalmente el tamaño visible de nuestra página web, que cambia a medida que cambia el dispositivo utilizado para el sitio. Es decir, si navegamos por una web desde un móvil, tablet o PC, el viewport será diferente para cada medio.

Dicho esto, las unidades de medida de la ventana gráfica son dos, y son vh y vw.
"Vh" significa "altura de la ventana gráfica", la altura de nuestro documento, y "vw" significa "ancho de la ventana gráfica", su ancho, y sus valores corresponden a un porcentaje de la ventana gráfica.
Por ejemplo, si el valor de una propiedad de tamaño de un elemento asignado será "75vh", la huella de mi elemento ocupará el 75 % de la altura total de la ventana gráfica.

Variables

Mención especial merecen los valores expresados ​​al recordar las variables.
Es muy importante, como podrá experimentar, aprender desde el principio a asignar variables a su documento CSS.
Expliquemos mejor.

Con CSS moderno, es posible declarar variables, generalmente al comienzo de la hoja CSS, antes que nada, y usarlas, más tarde, como valores de propiedad.

Para usar una variable, debe declararse.

La sintaxis para declararlo es la siguiente:

:root {
     --nomevariabile: valor;
}

Entonces, por ejemplo:

:root {
     --nomevariabile: purple;
}

Luego, cuando quieras usarlo más tarde, tendrás que escribir tu código, por ejemplo, así:

h1 { 
   color: var(--nomevarabile); 
}

Pero, ¿por qué es esencial usar variables?

Imagina usarlos para definir los colores principales de tu sitio web.
¡Te gusta el sitio y estás realmente satisfecho con tu obra! Pero el cliente de repente ha cambiado de opinión y te pide que cambies esos colores.
Sin el uso de variables, debe ir y cambiar el color de los elementos uno por uno en este desafortunado evento. Un trabajo duro, ¿no crees?
Si, por el contrario, has utilizado una variable como valor de tus propiedades de color, solo necesitas cambiar el valor de la variable en cuestión para ver el cambio de color en cada punto donde lo has utilizado: un ahorro de tiempo increíble ! ¿Qué dices, vale la pena aprender a usarlos?