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

!important
Autor
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.

Estilos en línea (dentro del elemento)
IDs
Clases y pseudoclases
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

1.7 KiB Raw Blame History