CSS ELEMENTOS

BACKGROUND - color: transparent / yellow / #00ff00 / rgb(255,0,255) - image: url

/bottom

- position: left top / center / bottom /center top / center / bottom / right top / center

- repeat: repeat / repeat-x / repeat-y / no-repeat

- attachment:

scroll la imagen de fondo se moverá dentro de la pantalla junto al bloque que la contiene.
Valor por defecto fixed

fixed la imagen de fondo estará fija en la pantalla y no se moverá con el bloque contenedor.

size:

- porcentaje: escala la imagen de fondo en la dimensión correspondiente al porcentaje

especificado del área de posicionamiento de fondo, que viene el valor determinado
background-origin.

- px: longitud especificada en la dimensión correspondiente

- auto: escala el fondo de la imagen en la dirección correspondiente de modo que su

proporción esencial se mantiene, es correspondiente al área de posicionamiento de fondo.
Valor por defecto

REDONDEAR ESQUINAS

→ border radius: - 0 20px 30px 25px;

- 50%;

DISPLAY: Controla la visualización de los elementos.

→ inline: solo queda la línea como vertical, uno al lado del otro como van entrando

→ block: hace que esa línea quede horizontal y pareja

→ inline-block: uno al lado del otro

→ none (oculta el elemento, como si no existiera) - Tener cuidado cuando se especifica el

valor "none" por defecto para elementos de contenido es importante, ya que la información
que contienen no estará disponible para lectores de pantalla al cargar.

PARA AGRANDAR UNA IMAGEN O ACHICARLA TENGO QUE PONER WIDTH EN

PORCENTAJE
FLEX: un elemento es un Flex Container con la propiedad display y valores flex o inline-flex.
- Display: flex Esta propiedad define un flex container; inline o block dependiendo de
los valores pasados.
- Flex-direction Establece el eje principal, dirección en la que los flex ítems están
alineados .
- flex-direction: row | row-reverse | column | column-reverse;
- row (estándar): de la izquierda a la derecha
- row-reverse: de la derecha a la izquierda
- column: mismo que row, pero de arriba a abajo
- column-reverse: mismo que row-reverse pero de abajo hacia arriba

flex-wrap: ítems pasen a la siguiente línea según sea necesario.

flex-wrap: nowrap | wrap | wrap-reverse;
- nowrap (estándar): todos los flex ítems estarán en una sola línea
- wrap: los flex ítems se dividirán en múltiples líneas, de arriba a abajo

DISTRIBUCIÓN DE LOS FLEX

Justify-content: alineación de los ítems a lo largo del eje principal.

justify-content: space-between; → de un extremo al otro

flex-start (estándar): los ítems se alinean a lo largo del borde de inicio (start) de acuerdo con
la flex-direction del contenedor.

Flex-end: los ítems se alinean a lo largo del borde final (end) de acuerdo con la flex-direction
del contenedor.

​Align-ítems: comportamiento estándar de cómo flex ítems están alineados según el eje
transversal (cross axis).
Stretch (estándar): estira los ítems para llenar el contenedor, respetando el
min-width/max-width)
Flex-start: ítems se posicionan al inicio del eje transversal.

LISTA

list-style-type: none; → no pone puntos de lista que están por defecto