diff --git a/README.md b/README.md index 316aba1..8984e30 100644 --- a/README.md +++ b/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. +``` +. { //Bloque de declaración + : ; //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