Inicio
Curso de Referencia de CSS
Las propiedades de CSS que se usan hoy, agrupadas por lo que hacen, con sus valores habituales y un ejemplo que puedes editar y ver al momento: color, tipografía, caja, flexbox, grid, animaciones, efectos y más.
Lecciones
20
1
Texto y color
Color y fondo
El color del texto, la transparencia y todo lo que va detrás de un elemento.
2 Texto y color
Tipografía
La fuente, su tamaño, su peso y el espacio entre letras y líneas.
3 Texto y color
Texto y párrafos
Alineación, decoración, mayúsculas, sombras y cómo se parten las líneas.
4 Caja y maquetación
Modelo de caja y tamaño
Cada elemento es una caja.
5 Caja y maquetación
Bordes, esquinas, contornos y sombras
Las líneas alrededor de la caja, sus esquinas redondeadas, el contorno del foco y las sombras.
6 Caja y maquetación
Display, visibilidad y desbordamiento
Cómo se coloca cada caja en el flujo (bloque, en línea, flex, grid), si se ve y qué pasa con lo que no cabe.
7 Caja y maquetación
Posicionamiento
Mover una caja fuera de su sitio normal.
8 Caja y maquetación
Flexbox
Maquetación en una dimensión (una fila o una columna).
9 Caja y maquetación
Grid (rejilla)
Maquetación en dos dimensiones.
10 Caja y maquetación
Alineación y espacios (flex y grid)
Las mismas propiedades sirven para flexbox y para grid.
11 Caja y maquetación
Columnas de texto y saltos
Texto en varias columnas, como en un periódico, y dónde se puede partir una caja entre columnas o páginas al imprimir.
12 Texto y color
Listas, contadores y contenido generado
Viñetas y números de las listas, contadores propios y texto que añade CSS con ::before y ::after.
13 Texto y color
Tablas
Propiedades propias de las tablas.
14 Efectos e interacción
Imágenes y vídeo
Cómo se encaja una imagen o un vídeo en una caja de otra proporción.
15 Efectos e interacción
Transformaciones
Mover, girar, escalar e inclinar una caja sin cambiar el sitio que ocupa en la página.
16 Efectos e interacción
Transiciones y animaciones
Una transición suaviza el paso de un estado a otro (al pasar el ratón, al cambiar una clase); una animación sigue los pasos de un @keyframes.
17 Efectos e interacción
Filtros, mezclas, recortes y máscaras
Efectos de edición de imagen hechos con CSS.
18 Efectos e interacción
Interacción y desplazamiento
El cursor, qué se puede pulsar o seleccionar y cómo se comporta el scroll.
19 Efectos e interacción
Formularios y controles
Propiedades para dar estilo a casillas, botones de opción, cursores y controles nativos.
20 Efectos e interacción
Variables, contenedores, escritura y otras
Propiedades personalizadas (variables), consultas de contenedor, dirección de escritura y alguna herramienta general.
No hay lecciones para este filtro.
Página 1 de 1
Roadmap
Desarrollo Web
Ruta principal de frontend, frameworks y stack de desarrollo web profesional.
Referencias para consultar
Introducción al Mundo Web, Hosting y Dominios Fundamentos de Programación HTML CSS JavaScript Referencia de HTML Referencia de CSS Referencia de JavaScript Markdown TypeScript Accesibilidad Web Terminal Git & GitHub VS Code NPM Sass Tailwind CSS Bootstrap React Astro Animaciones 3D en la Web PHP Python