Estilo CSS:

Herramientas que dan forma al contenido de la página

• Ancho: ancho } auto/inicial

• altura: altura } min/ max

• heredar: mantiene la medida ya definida

• margen: superior/izquierda/derecha/inferior

• relleno: espacio entre contenido interno y externo

• tamaño de caja: devuelve el elemento a tamaños predefinidos

Colores en CSS

• RGB: Valores entre 0 y 255 para definir los tonos de rojo, verde y azul, separados por una coma. Ejemplo:

#rgb{
   color: rgb(250, 30, 70);
}

El valor 250 representa el rojo, 30 representa el verde y 70 representa el azul, lo que en este caso resultaría en algo similar a:

• RGBA: Muy similar a RGB, pero se le añade el factor de transparencia, que varía entre 0 y 1;
• HEX: Hexadecimal definido entre 0 y 9, y de A a F, donde F es el valor más alto, siguiendo un patrón similar a rgb. Ejemplo:

00FF00 -> Verde
FF0000 -> Rojo
0000FF -> Azul

#hex{
  color: #03BB76;
}

Resultaría en algo como:

• HSL (tono, saturación, luminosidad): definición del color a través de su matiz (0 rojo, 120 verde, 240 azul), saturación (0% tono gris, 100% color completo), luminosidad (0 % negro , 100% blanco) - También existe HSLA, que se basa en el factor alfa (0 a 1) para medir el nivel de transparencia. Ejemplo:

#hsl{
  color: hsla(120, 100%, 50%, 1.0);
}

Esta programación daría como resultado un color completamente verde, pero puedes buscar otros tonos usando la rueda de colores HSL.

Fondos

• color de fondo: color de fondo sólido
• imagen de fondo: imagen de referencia en el fondo
• gradiente lineal: gradiente lineal
• gradiente radial: gradiente circular
• repitiendo: efecto de repetición

tamaño-fondo: define el tamaño del fondo del elemento, acompañado de la configuración:

• auto: ajuste automático
• cover: cubre todo el espacio del elemento
• contener: cambia el tamaño del contenido para que aparezca la imagen completa/sin recortar
• valor: establece el tamaño de la imagen dentro del elemento

Repetición repetición-fondo: define el eje en el que se repite la imagen:

• repetir: máximas repeticiones posibles
• repetir-x: solo se repite en el eje x (horizontal)
• repetir-y: solo se repite en el eje y (vertical)
• espacio: se repite en ambos ejes sin cortarse con espacios
• redondo: se repite en todas las direcciones sin cortarse, solo cambia de tamaño
• no-repeat: sin repeticiones

Posición de fondo: Posicionamiento de imágenes de fondo
centro, izquierda, derecha, x%,y%

adjunto de fondo: Cómo se comportará la imagen según la ventana del navegador

• fijo: no se mueve
• scroll: está fijado a un objeto
• local: "se desplaza" junto al contenido

origin-fondo: Define el área de posicionamiento de la imagen

• padding-box: esquina de origen junto al relleno
• border-box: la imagen comienza al lado del área exterior del borde
• cuadro de contenido: inferior al relleno, alineado con el contenido del elemento

fondo-flip: Define si el color del elemento cubre o no los bordes

• padding-box: alineado con el relleno
• cuadro de borde: alineado con el borde
• cuadro de contenido: llena el área de contenido
• clip-text: fondo en el texto (el color debe ser transparente)

modo-fondo-blandoso: efectos en el fondo de los elementos

Bordes

• border-width: tamaño que tendrá el borde
• estilo de borde: tipo de borde
• color-borde: color del borde
• radio-borde: Borde redondeado

imagen de borde

• fuente: establece la ruta de la imagen
• ancho: ancho de la imagen del borde
• repetir: controla si la imagen se repite o no
• inicio: distancia desde el borde del elemento
• sector: dividir en regiones

Contenido (imagen o vídeo)

object-fit : Cómo se comporta el contenido de un elemento en el cuadro establecido

• llenar: llenar todo el espacio y distorsionar
• contener: no se deformará, pero se ajustará a las medidas establecidas
• portada: llena todo el espacio sin distorsionar
• none: ignora las medidas del objeto principal y utiliza sus medidas originales
• Reducción de escala: configuración de imagen más pequeña sin distorsionar

posición-objeto: Imagen central

• eje x y eje y
• izquierda, derecha, centro, arriba, abajo