# Referencia Rápida de CSS

*Selectores, layout, flexbox, grid, animación, diseño responsivo*

> Source: MDN Web Docs (developer.mozilla.org) · MIT

## Selectores

### Selectores Básicos

| Command | Description |
|---------|-------------|
| `*` | Universal — todos los elementos |
| `div` | Tipo — todos los elementos `<div>` |
| `.class` | Clase — elementos con clase |
| `#id` | ID — elemento con id |
| `[attr]` | Atributo — tiene el atributo |
| `[attr="val"]` | Atributo igual al valor |

### Combinadores

| Command | Description |
|---------|-------------|
| `A B` | Descendiente (cualquier profundidad) |
| `A > B` | Solo hijo directo |
| `A + B` | Hermano adyacente (el siguiente) |
| `A ~ B` | Hermano general (todos los siguientes) |

### Pseudo-clases

| Command | Description |
|---------|-------------|
| `:hover` | Mouse sobre el elemento |
| `:focus` | Elemento tiene foco |
| `:first-child` | Primer hijo del padre |
| `:nth-child(n)` | N-ésimo hijo (base 1, `odd`, `even`, `2n+1`) |
| `:not(sel)` | Negación — excluir coincidencias |
| `:has(sel)` | Selector de padre (contiene coincidencia) |

### Pseudo-elementos

| Command | Description |
|---------|-------------|
| `::before` | Insertar contenido antes del elemento |
| `::after` | Insertar contenido después del elemento |
| `::placeholder` | Estilo del texto placeholder del input |
| `::selection` | Estilo del texto seleccionado |

## Modelo de Caja

### Box Sizing

```
/* Incluir padding/border en el ancho */
*, *::before, *::after {
  box-sizing: border-box;
}
```

### Propiedades

| Command | Description |
|---------|-------------|
| `margin` | Espacio fuera del borde |
| `border` | Borde alrededor del padding |
| `padding` | Espacio dentro del borde |
| `width / height` | Dimensiones del contenido |
| `outline` | Anillo fuera del margen (sin espacio) |

### Abreviación

```
margin: 10px;           /* todos los lados */
margin: 10px 20px;      /* vertical | horizontal */
margin: 10px 20px 30px; /* top | horiz | bottom */
margin: 10px 20px 30px 40px; /* T D B I */
```

## Flexbox

### Contenedor

```
.flex {
  display: flex;
  justify-content: center; /* eje principal */
  align-items: center;     /* eje cruzado */
  gap: 1rem;
}
```

### Propiedades del Contenedor

| Command | Description |
|---------|-------------|
| `flex-direction` | `row` \| `column` \| `row-reverse` \| `column-reverse` |
| `flex-wrap` | `nowrap` \| `wrap` \| `wrap-reverse` |
| `justify-content` | `flex-start` \| `center` \| `space-between` \| `space-around` \| `space-evenly` |
| `align-items` | `stretch` \| `center` \| `flex-start` \| `flex-end` \| `baseline` |
| `align-content` | Alineación del eje cruzado multi-línea |
| `gap` | Espacio entre elementos flex |

### Propiedades del Elemento

| Command | Description |
|---------|-------------|
| `flex: 1` | Crecer para llenar el espacio disponible |
| `flex: 0 0 200px` | Ancho fijo, sin crecer/encoger |
| `align-self` | Override de align-items para un elemento |
| `order` | Cambiar orden visual (por defecto 0) |

## Grid

### Contenedor

```
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}
```

### Propiedades del Contenedor

| Command | Description |
|---------|-------------|
| `grid-template-columns` | Definir pistas de columna: `1fr 2fr`, `repeat(3, 1fr)` |
| `grid-template-rows` | Definir pistas de fila |
| `grid-template-areas` | Áreas con nombre: `"header header" "nav main"` |
| `gap` | Espacios entre filas y columnas |
| `justify-items` | Alinear elementos en línea (horizontal) |
| `align-items` | Alinear elementos en bloque (vertical) |

### Posicionamiento de Elementos

```
.item {
  grid-column: 1 / 3;   /* abarcar cols 1-2 */
  grid-row: 1 / -1;     /* abarcar todas las filas */
  grid-area: header;    /* área con nombre */
}
```

## Tipografía

### Propiedades de Fuente

| Command | Description |
|---------|-------------|
| `font-family` | Pila de tipografías: `'Inter', sans-serif` |
| `font-size` | Tamaño: `1rem`, `16px`, `clamp(1rem, 2vw, 2rem)` |
| `font-weight` | `normal` (400) \| `bold` (700) \| `100`-`900` |
| `font-style` | `normal` \| `italic` \| `oblique` |
| `line-height` | Espaciado entre líneas: `1.5` (sin unidad recomendado) |
| `letter-spacing` | Espaciado entre caracteres: `0.05em` |

### Propiedades de Texto

| Command | Description |
|---------|-------------|
| `text-align` | `left` \| `center` \| `right` \| `justify` |
| `text-decoration` | `none` \| `underline` \| `line-through` |
| `text-transform` | `uppercase` \| `lowercase` \| `capitalize` |
| `text-overflow` | `ellipsis` (con overflow: hidden) |
| `white-space` | `nowrap` \| `pre` \| `pre-wrap` |
| `word-break` | `break-all` \| `break-word` |

## Colores y Fondos

### Formatos de Color

```
color: #ff6600;             /* hex */
color: rgb(255, 102, 0);    /* rgb */
color: hsl(24, 100%, 50%);  /* hsl */
color: oklch(70% 0.15 50);  /* oklch */
```

### Propiedades de Fondo

| Command | Description |
|---------|-------------|
| `background-color` | Relleno sólido: `#f0f0f0` |
| `background-image` | `url(img.jpg)` o gradiente |
| `background-size` | `cover` \| `contain` \| `100px 200px` |
| `background-position` | `center` \| `top right` \| `50% 50%` |
| `background-repeat` | `no-repeat` \| `repeat-x` \| `repeat-y` |

### Gradientes

```
background: linear-gradient(to right, #f00, #00f);
background: radial-gradient(circle, #fff, #000);
background: conic-gradient(red, yellow, green);
```

## Transiciones y Animación

### Transiciones

```
.btn {
  transition: background 0.3s ease, transform 0.2s;
}
.btn:hover {
  background: #0056b3;
  transform: scale(1.05);
}
```

### Propiedades de Transición

| Command | Description |
|---------|-------------|
| `transition-property` | Qué propiedad animar |
| `transition-duration` | Duración: `0.3s`, `300ms` |
| `transition-timing-function` | `ease` \| `linear` \| `ease-in-out` \| `cubic-bezier()` |
| `transition-delay` | Esperar antes de comenzar |

### Animación con Keyframes

```
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.icon { animation: spin 1s linear infinite; }
```

### Propiedades de Animación

| Command | Description |
|---------|-------------|
| `animation-name` | Referenciar nombre de @keyframes |
| `animation-duration` | Duración de un ciclo |
| `animation-iteration-count` | `1` \| `3` \| `infinite` |
| `animation-direction` | `normal` \| `alternate` \| `reverse` |
| `animation-fill-mode` | `forwards` \| `backwards` \| `both` |

## Diseño Responsivo

### Media Queries

```
@media (max-width: 768px) {
  .sidebar { display: none; }
}
@media (prefers-color-scheme: dark) {
  body { background: #1a1a1a; color: #eee; }
}
```

### Breakpoints Comunes

| Command | Description |
|---------|-------------|
| `max-width: 480px` | Teléfonos móviles |
| `max-width: 768px` | Tablets |
| `max-width: 1024px` | Laptops pequeñas |
| `max-width: 1280px` | Escritorios |

### Unidades de Viewport

| Command | Description |
|---------|-------------|
| `vw / vh` | % del ancho / alto del viewport |
| `dvh` | Alto dinámico del viewport (seguro en móvil) |
| `svh / lvh` | Alto del viewport pequeño / grande |
| `cqi` | Tamaño inline del container query |

### Container Queries

```
.card-wrapper { container-type: inline-size; }
@container (min-width: 400px) {
  .card { flex-direction: row; }
}
```

## Posicionamiento

### Valores de Position

| Command | Description |
|---------|-------------|
| `static` | Por defecto — flujo normal del documento |
| `relative` | Desplazado de su posición normal; conserva espacio |
| `absolute` | Posicionado respecto al ancestro posicionado más cercano |
| `fixed` | Posicionado respecto al viewport; fijo al hacer scroll |
| `sticky` | Alterna entre relative/fixed según el scroll |

### Patrones de Centrado

```
/* Centrar con Flex */
display: flex;
justify-content: center;
align-items: center;

/* Centrar con Grid */
display: grid;
place-items: center;
```

### Apilamiento

| Command | Description |
|---------|-------------|
| `z-index` | Orden de apilamiento (mayor = encima); requiere `position` |
| `isolation: isolate` | Crea nuevo contexto de apilamiento |

## Propiedades Personalizadas

### Definir y Usar

```
:root {
  --color-primary: #3b82f6;
  --spacing-md: 1rem;
}
.btn {
  background: var(--color-primary);
  padding: var(--spacing-md);
}
```

### Valores de Respaldo

```
color: var(--accent, #ff6600);
/* usa #ff6600 si --accent no está definido */
```

### Tematización Dinámica

```
[data-theme="dark"] {
  --bg: #1a1a2e;
  --text: #e0e0e0;
}
body { background: var(--bg); color: var(--text); }
```