CSS

CSS

1. Flexbox

2. Variable

   • Es un espacio en memoria del ordenador que va a almacenar un valor
   • Scope
     • Local: A nivel del DOM
       • Estilos solo se aplicaran al elemento padre e hijos.
     • Global
       • Aplicaran a todo el documento html
       • html o pseudoclase: ":root"
         • :root
           • Hace referencia a la etiqueta html pero esta tiene mayor especificidad
             • Ejemplo: :root{ --primary-color: red; }
         • html
           • Etiqueta raiz del documento html
             • Ejemplo: html, body{--primary-color: red;}
   • Declaración
     • .h1{--color: blue;}
       • Ejemplo:
         • Palabra reservada var es una función de css Funcion -> var();
           • Recibe como parametro el nombre de la variable
             • .h1 p{ color: var(--color)}
     • Doble guión "--" , nombre de la variable , valor que almacenará la variable

3. Media Queries

4. pseudoclases

5. pseudoelementos

6. background

7. posicionamiento

8. metodologia bem

9. grid

10. Unidades de medida

    • Relativas
      • Em: Toma como referencia al tamaño de fuente del elemento padre
      • Rem: Toma referencia de la etiqueta raiz del documento html -> es decir html o body
      • ch: Toma como referencia los caracteres que tenga en html y se especifica en css
        • Adaptan el contenido de la caja
    • Absolutas
      • (Su valor no cambia, son unidades del mundo real) Su valor es fijo
        • No recomendado utilizar
    • %: Utilizada para el ancho y altura de las cajas
      • El heigth depende del tamaño del contenido pero depende tambien de un elemento padre

11. Tamaño de Caja

    • Reseteo de cajas para evitar el desbordamiento cuando se agrega padding y border
      • Propiedad: box-sizing: border-box;
        • Empieza a contar el tamaño de la caja desde el borde.
    • Propuesto por Paul erish