CSS behind the scenes

README.md

@@ -1,13 +1,55 @@
 # Anotaciones
+
 - Una imagen es un 'inline-element' por lo que es recomendable insertarla en un div para manejarla.
 - Un 'block' ocupa todo el espacio que tiene disponible y crea saltos de línea antes y después.
 
+## Pilares del CSS básico
+
+- Diseño responsivo : ajuste a todo tipo de resoluciones y formatos de pantalla.
+- Código mantenible y escalable: limpieza y fácil entendimiento.
+- Rendimiento Web: minimizar el tamaño de la Web y reducir el número de solicitudes HTTP.
+
+## Flujo de carga de una página web
+
+Carga del HTML -> Decodificación del HTML => DOM (Document Object Model)
+Decodificación del HTML -> Carga del CSS -> Decodificación del CSS (Resolución de conflictos y procesado final de valores) => CSSOM (CSS Object Model)
+DOM + CSSOM => Árbol de renderizado -> Modelo de formateado visual => Web final en pantalla
+
+### Decodificación del CSS
+
+Importancia -> Especifidad -> Orden
+
+Hay declaración por defecto y declaraciones de autor.
+```
+.<selector> { //Bloque de declaración
+    <propiedad>: <valor_declarado>; //Declaración
+}
+```
+
+#### Importancia
+
+1. !important
+2. Autor
+3. Por defecto
+
+#### Especifidad
+
+En caso de empatar en importancia entra en juego la especificidad. Se mira como un array: (0,0,1,0) sería una clase, (0,1,2,2) un elemento con 1 ID, 2 clases y 2 elementos.
+1. Estilos en línea (dentro del elemento)
+2. IDs
+3. Clases y pseudoclases
+4. Elementos
+
+#### Procesamiento de los valores
+
 ## Animaciones
+
 Hay dos tipos de animaciones: 
 - Con la propiedad 'transition'
 - Con keyframes
     - Lo ideal es solo animar con opacity y transform, porque los navegadores están optimizados para ellas dos solo.
 
 ## Pseudo-elementos
+
 Estados especiales de un selector (:hover, :link, etc.)
 ::after -> Add a virtual element 'after' el elemento