Skip to content

T3. CSS (parte 2)

Herramientas: Emmet

Emmet es un plugin diseñado para editores de texto que ayuda en gran manera tu flujo de trabajo y te ahorra tiempo.

Flex

Introducción por ManzDev

Guía a seguir

Herramientas:

Juegos

Contenedor

Ver guía

Dirección

Ver guía

Mover elementos

Ver guía

Alineación

Ver guía

Tamaño

Ver guía

Validación CSS

Más CSS

Variables

Ver mdn

Unidades

Relativas a viewport

Capas @layer

Nos permite redefinir y ordenar la aplicación de las reglas:

/* Orden de aplicación:
   1. reset
   2. base
   3. tema
   Si no se define el orden, entonces se aplica de arriba a abajo.
*/
@layer reset, base, tema;

@layer base {
  body { background: pink; }
}

@layer tema {
  body { background: lightblue; }
}

@layer reset {
  body { background: white; }
}

¿Qué ocurre si añadimos @layer { body { background: red; } } al final del documento? ¿Y en medio? ¿Y después de la línea 1? ¿Y antes?

Medios

Ver mdn

@import

[!IMPORTANT] Los @import deben aparecer al principio del documento, si no, serán ignorados.

@import 'custom.css';
@import "common.css" screen;
@import url("fineprint.css") print;
@import url('landscape.css') screen and (orientation:landscape);

Y combinado con @layer:

@import "theme.css" layer(utilities);
@import "otro.css" layer(); /* capa anónima */

Fuente: mdn

Animaciones

Ver manz.dev

Prefijos

Ver mdn

Posicionamiento

Con los módulos CSS actuales Flex y Grid, el posicionamiento de elementos ha quedado superado por lo que NO lo utilizaremos en este curso.

Pese a ello, puede ser de interés para el alumnado la lectura del siguiete enlace.

Grid Layout

Introducción por ManzDev

Inicio y otro

Playground

Herramienta

Grid generator

Juegos

Ejercicio global

CSS + FLEX

Entrega en moodle (consultar fecha) de la práctica maquetado en CSS con el módulo FLEX.

La práctica debe incluir:

  • Head + Main + Footer
  • En el Main al menos 3 bloques: publicidad + sección 1 + sección 2
  • Las secciones 1 y 2 deberán aparecer artículos de la sección (4 o 5 mínimo)

CSS + GRID

Entrega en moodle (consultar fecha) de la práctica maquetado en CSS con el módulo GRID.

Podéis y debéis anidar FLEX y GRID.

Notas al pie:

[^1]: “lorem ipsum” es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final. Podemos utilizar el generador cuando lo necesitemos.