La guía de propiedades CSS

Guía «telefónica» de propiedades CSS

Aviso: Esta página requiere verse desde escritorio.

Relacionados

En mis canales de Youtube @ManzDev y ManzDevTv, tienes más contenido...

Cómo crear SOMBRAS IDÉNTICAS (drop-shadow) ¿Qué es el CSS NESTING? ¿Cómo funciona? FUNCIONES de TIEMPO en CSS: ¡Controla el ritmo de tus animaciones!

Aprender más

Si lo prefieres, puedes aprender también sobre estas temáticas:

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev

CSS3 Cheatsheet
01 Nociones básicas
Introducción a CSS
¿Qué es CSS? ¿Cómo usar CSS? Estructura de CSS CSS Moderno: antes vs ahora La guía de propiedades CSS
Unidades CSS
¿Qué son y para que sirven? Unidades absolutas Unidades relativas Unidades del viewport
Variables CSS
Variables CSS Variables de entorno CSS La regla @property
02 Color y fondos
Colores CSS
Códigos de colores La función RGB() El formato hexadecimal La función HSL() La función color-mix() Colores relativos La función HWB() La función LAB() y OKLAB() La función LCH() y OKLCH() Espacios de color
Imágenes y fondos
La propiedad background Fondos y gradientes múltiples Visibilidad de elementos La función image-set() Objetos en CSS Procesamiento de imágenes
Gradientes o degradados
¿Qué son los gradientes? Gradientes lineales Gradientes radiales Gradientes cónicos
03 Modelo de cajas
Modelo de cajas
¿Qué es el modelo de cajas? Dimensiones en CSS Desbordamiento (Overflow) La propiedad box-sizing Márgenes y rellenos Propiedades lógicas CSS
Bordes CSS
Bordes CSS Esquinas redondeadas Corner shape: Forma de bordes Bordes con gradientes Bordes con imágenes
04 Lógica CSS
Compatibilidad
Navegadores web Niveles de CSS Compatibilidad y soporte La regla @supports
Cálculos CSS
Funciones CSS Calculos matemáticos en CSS Máximos y mínimos en CSS Redondeos y módulos en CSS Funciones trigonométricas CSS Funciones exponenciales CSS Lista de funciones CSS
Lógica CSS
¿CSS es programación? Condicionales if() en CSS La regla @function en CSS La función random() La funcion attr() Tipos de datos en CSS
05 Selectores CSS
Selectores CSS
Selectores básicos Selectores de atributos Combinadores Combinadores lógicos Combinador :is() y :where() Combinador o selector :not() Combinador o selector :has()
Pseudoclases CSS
¿Qué son las pseudoclases? Pseudoclases de interacción Pseudoclases de ubicación Pseudoclases de idioma Pseudoclases de estructura Pseudoclases de formularios Pseudoclases de estado
Pseudoelementos CSS
Pseudoelementos: ¿Qué son? Contenido generado en CSS Pseudoelementos tipográficos Pseudoelementos de resaltado
Calidad de código
Minificar CSS StyleLint: Linter CSS CSS Nesting nativo Metodologías CSS
06 Tipografías
Fuentes y tipografías
¿Qué son las tipografías? Bases de fuentes y tipografías Decoraciones de texto Ajuste y balance de textos Contorno en tipografías Textos con degradados Textos y alineaciones Ajustes en tipografías
Cargar tipografías
Tipografías con Google Fonts Tipografías con Fontsource La regla @font-face Modo de carga de tipografías Fuentes variables CSS Características personalizadas
07 Layouts
Maquetación
La propiedad display Alinear y centrar con CSS La propiedad display multi-keyword Multi-columnas CSS
Flex CSS
Guía de Introducción a Flex Alinear y centrar con Flex CSS Elementos flexibles en CSS
Grid CSS
Guía de Introducción a Grid Alinear y centrar con Grid CSS Grid por áreas Celdas irregulares en Grid Líneas con nombre en Grid Colocación automática en Grid
Posicionamiento CSS
La propiedad position Posicionamiento relativo Posicionamiento absoluto Posicionamiento fijo Posicionamiento «sticky» CSS Anchor Position
08 Interfaz de Usuario
Interacciones
Contornos Cursor del ratón Barras de desplazamiento Scroll suave (Smooth Scroll) CSS Snap Scroll
Representación de datos
Tablas CSS Listas CSS Contadores CSS
09 Efectos
Sombras
Sombras CSS en textos Sombras CSS en cajas Sombras idénticas CSS Pixel art con CSS
Efectos
Filtros CSS Modos de fusión CSS
Máscaras y recortes
Formas básicas La propiedad clip-path La propiedad float La propiedad shape-outside La función shape() Máscaras en CSS
10 Responsive
Responsive Web Design
¿Qué es Responsive Design? Bases del Responsive Design CSS Media Queries CSS Media Features CSS Container Queries Preferencias de usuario Medios impresos Medios paginados
11 Transformaciones y dibujos
Transformaciones 2D/3D
Transformaciones CSS Translaciones 2D Rotaciones 2D Escalado 2D Deformaciones 2D Transformaciones 3D Perspectivas CSS
Dibujar con CSS
¿Cómo dibujar con CSS? Primeros pasos: Estructura HTML Primeros pasos: Estructura CSS Formas con CSS
Ir al índice Otros cursos