CSS

CSS

Flexbox
Variable
1. Es un espacio en memoria del ordenador que va a almacenar un valor
2. Scope
  1. Local: A nivel del DOM
    1. Estilos solo se aplicaran al elemento padre e hijos.
  2. Global
    1. Aplicaran a todo el documento html
    2. html o pseudoclase: ":root"
      1. :root
        Hace referencia a la etiqueta html pero esta tiene mayor especificidad
        Ejemplo: :root{ --primary-color: red; }
      2. html
        Etiqueta raiz del documento html
        Ejemplo: html, body{--primary-color: red;}
3. Declaración
  1. .h1{--color: blue;}
    1. Ejemplo:
      1. Palabra reservada var es una función de css Funcion -> var();
        Recibe como parametro el nombre de la variable
        .h1 p{ color: var(--color)}
  2. Doble guión "--" , nombre de la variable , valor que almacenará la variable
Media Queries
pseudoclases
pseudoelementos
background
posicionamiento
metodologia bem
grid
Unidades de medida
1. Relativas
  1. Em: Toma como referencia al tamaño de fuente del elemento padre
  2. Rem: Toma referencia de la etiqueta raiz del documento html -> es decir html o body
  3. ch: Toma como referencia los caracteres que tenga en html y se especifica en css
    1. Adaptan el contenido de la caja
2. Absolutas
  1. (Su valor no cambia, son unidades del mundo real) Su valor es fijo
    1. No recomendado utilizar
3. %: Utilizada para el ancho y altura de las cajas
  1. El heigth depende del tamaño del contenido pero depende tambien de un elemento padre
Tamaño de Caja
1. Reseteo de cajas para evitar el desbordamiento cuando se agrega padding y border
  1. Propiedad: box-sizing: border-box;
    1. Empieza a contar el tamaño de la caja desde el borde.
2. Propuesto por Paul erish

Next up

Description

Resource summary

Similar

	Created by Aaron Chávez about 3 years ago