|
## Selectores CSS
### Selectores básicos
| Command | Description |
|---------|-------------|
| `element` | `p { }` — todos los elementos |
| `.class` | `.card { }` — selector de clase |
| `#id` | `#main { }` — selector de id |
| `*` | Selector universal (todos los elementos) |
### Combinadores
| Command | Description |
|---------|-------------|
| `A B` | Descendiente (B dentro de A) |
| `A > B` | Solo hijo directo |
| `A + B` | Hermano adyacente (B justo después de A) |
| `A ~ B` | Hermano general (B después de A) |
### Pseudo-clases
| Command | Description |
|---------|-------------|
| `:hover` | Ratón sobre el elemento |
| `:focus` | El elemento tiene el foco |
| `:first-child` | Primer hijo del padre |
| `:nth-child(n)` | Hijo n-ésimo (2n = par, odd = impar) |
## Modelo de caja
```
.box {
margin: 10px; /* exterior */
border: 1px solid #333; /* borde */
padding: 15px; /* interior */
width: 200px;
box-sizing: border-box; /* incluye pad+borde */
}
```
### Notación abreviada
| Command | Description |
|---------|-------------|
| `margin: 10px` | Todos los lados |
| `margin: 10px 20px` | Superior/inferior \| izquierda/derecha |
| `margin: 10px 20px 15px` | Superior \| izquierda/derecha \| inferior |
| `margin: 10px 20px 15px 5px` | Superior \| derecha \| inferior \| izquierda |
## Flexbox
### Contenedor
```
.flex-container {
display: flex;
flex-direction: row; /* row | column */
justify-content: center; /* eje principal */
align-items: center; /* eje transversal */
gap: 10px;
flex-wrap: wrap;
}
```
### Propiedades del elemento
| Command | Description |
|---------|-------------|
| `flex: 1` | Crecer para llenar el espacio disponible |
| `flex-grow: 2` | Ratio de crecimiento relativo a hermanos |
| `flex-shrink: 0` | No encoger por debajo de la base |
| `flex-basis: 200px` | Tamaño inicial antes de crecer/encoger |
| `align-self: flex-end` | Anular alineación del contenedor |
| `order: -1` | Orden visual (por defecto 0) |
## Grid
### Contenedor
```
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
gap: 10px;
}
```
### Colocación de elementos
```
.item {
grid-column: 1 / 3; /* abarcar col 1-2 */
grid-row: 1 / 2;
}
/* abreviatura: repeat, minmax */
grid-template-columns: repeat(3, 1fr);
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));
```
## Posicionamiento
| Command | Description |
|---------|-------------|
| `static` | Flujo por defecto (sin propiedades de offset) |
| `relative` | Desplazamiento desde la posición normal |
| `absolute` | Desplazamiento desde el ancestro posicionado más cercano |
| `fixed` | Desplazamiento desde el viewport (permanece al hacer scroll) |
| `sticky` | Relativo hasta el umbral de scroll, luego fijo |
### Ejemplo
```
.parent { position: relative; }
.child {
position: absolute;
top: 0; right: 0; /* esquina superior derecha */
}
```
## Media queries
```
/* Mobile-first: estilos base para pantallas pequeñas */
.container { padding: 10px; }
@media (min-width: 768px) {
.container { max-width: 720px; }
}
@media (min-width: 1024px) {
.container { max-width: 960px; }
}
```
### Breakpoints comunes
| Command | Description |
|---------|-------------|
| `480px` | Teléfonos pequeños |
| `768px` | Tablets |
| `1024px` | Escritorios pequeños / tablets horizontal |
| `1280px` | Escritorios |
```
### Listas
```