69 lines
2.9 KiB
Markdown
69 lines
2.9 KiB
Markdown
# 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
|
|
|
|
- La unidad (no es una unidad pero la tratamos como tal) '%' cuando se aplica en fuentes, parte del tamaño de la fuente del padre.
|
|
- La unidad 'em' actua diferente para tamaños de letra y para elementos:
|
|
- Para fuentes toma el tamaño de la fuente del elemento padre.
|
|
- Para elementos toma el tamaño de la fuente del elemento actual.
|
|
- Si una propiedad es heredada, no se hereda el valor especificado, si no el ya procesado sobre los valores del padre (en pixeles por ejemplo).
|
|
- NO todas las propiedades heredan del padre a falta de estar especificadas, es cuyo caso el valor especificado será el inicial (por defecto).
|
|
- Darle valor a 'font-size' en 'html{}' hará que no se cambien los valores de la fuente con los ajustes del navegador, esta es una práctica muy mala.
|
|
- Solución: `html { font-size: 100%; }` -> Tendrá por defecto 16px, y cambiará si el usuario así lo decide en las opciones de su navegador.
|
|
|
|
#### Tamaños de los contenedores
|
|
- Por defecto, si creamos un contenedor con altura 100px y le añadimos un padding de 20 píxeles arriba y abajo, el contenedor terminará ocupando 140px. No es muy práctico:
|
|
- Solución: `box-sizing: border-box`. El elemento terminará con 100px.
|
|
|
|
## 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
|