# REGLAS CSS – QUÉ HACEN Y CUÁNDO USARLAS (PARA EXAMEN)

---

## RESET BÁSICO
* { margin:0; padding:0; }
→ Quita márgenes y paddings por defecto.
Usar siempre al empezar un ejercicio.

---

## LISTAS (MENÚS)
list-style-type: none;
→ Quita las viñetas.
Usar siempre en <ul> de menú.

display: block;
→ Hace que un elemento en línea (como <a>) se comporte como bloque.
Usar en enlaces de menú para poder aplicar padding y ancho.

text-decoration: none;
→ Quita subrayado de enlaces.
Usar en menús.

---

## FLOAT
float: left;
→ Coloca el elemento a la izquierda y permite que otros se pongan a su lado.
Usar para:
- Menú horizontal
- Columnas
- Imagen con texto alrededor

float: right;
→ Igual que left pero a la derecha.

clear: both;
→ Evita que un elemento se coloque junto a floats anteriores.
Usar al final de un contenedor con floats.

---

## POSICIONAMIENTO
position: relative;
→ Permite mover un elemento con top/left pero mantiene su espacio.
También sirve para anclar elementos absolutos dentro.

position: absolute;
→ Saca el elemento del flujo normal.
Se posiciona respecto al padre con position:relative.
Usar para:
- Submenús desplegables
- Elementos en esquinas
- Capas superpuestas

top / left / right / bottom
→ Mueven elementos posicionados.

position: sticky;
→ Se queda fijo al hacer scroll cuando llega a cierta posición.
Usar en menús superiores.

---

## VISIBILITY Y DISPLAY
display: none;
→ Oculta completamente (no ocupa espacio).
Usar en submenús ocultos.

visibility: hidden;
→ Oculta pero mantiene el espacio.
Usar cuando no quieres que cambie el layout.

---

## HOVER
li:hover { ... }
→ Aplica estilos cuando pasas el ratón.
Usar en menús desplegables.

li:hover ul { display:block; }
→ Mostrar submenú al pasar ratón.

---

## BORDES
border: 1px solid black;
→ Define ancho + estilo + color.

border-radius: 10px;
→ Redondea esquinas.

---

## FONDOS
background-color: red;
→ Color de fondo.

background-image: url(img.png);
→ Imagen de fondo.

background-repeat: no-repeat;
→ No repetir imagen.

background-position: center;
→ Posición de imagen.

---

## SOMBRAS
box-shadow: 5px 5px 5px gray;
→ Sombra exterior de cajas.

text-shadow: 2px 2px 2px gray;
→ Sombra en texto.

---

## FLEX (solo si lo permiten)
display: flex;
→ Convierte un contenedor en flexible.

justify-content: center;
→ Alineación horizontal.

align-items: center;
→ Alineación vertical.

Usar flex cuando:
- Quieres centrar fácilmente.
- Repartir espacio entre cajas.
- No quieres usar floats.

---

## DECISIÓN RÁPIDA EN EXAMEN

Menú horizontal clásico → float:left  
Submenú desplegable → position:absolute + display:none/block  
Columnas tipo aside/section → float  
Elemento fijo arriba → sticky  
Centrar fácilmente varias cajas → flex  

---

Este archivo está pensado como guía rápida antes del examen.