CSS Cascade stylesheet

Se llama asi debido a que funciona a estilo cascada, es decir: le hace “caso” a lo que se
encuentre abajo. En el siguiente caso, H1 rojo
medira 70px ya que se encuentra por debajo de los
100px

NOTA: obviamente puede modificarse eliminando los

100px pero es una forma clara de identificar el ejemplo
Debe crearse un index.html para crear los elementos
para despues agregarle detalles en CSS.
Se puede trabajar de diferentes maneras, la manera
mas correcta es usando la etiqueta link y href a un
archivo de css (con extension .CSS)

Esto nos permite que si hay algun error, este no se va a encontrar en el codigo principal.

Estructura de CCS:
El elemento,o los elementos, selector es a que es lo que
queremos cambiar. La propiedad es que es lo que
queremos cambiar, por ejemplo color, tamaño, posicion,
etc. Y valor puede ser el color, el numero del tamaño,
etc.

Selectores:

Selector Universal: se representa por el simbolo de * y selecciona

todos los elementos.
NOTA: en realidad no se pone color red sino que se pone el codigo
hexadecimal
Selector de tipo: Son los que se seleccionan por elemento, ejemplo: button, h2, h1, p, etc. es
seleccionar por el nombre de los elementos.

Selector de clase: Selecciona por el nombre dado a cierto atributo (que debe ponerse en el
html.index) En el archivo ccs se pone . y el nombre de la clase, en este caso titulo-h2 (lleva un
.adelante).
 NOTA: se puede seleccionar mas de una clase separandolas en el css por una coma “,”. Esto permite
que se les aplica las mismas modificaciones.

NOTA2: Tambien se puede poner mas de una clase en el html, separandolos por un espacio.

Selector de ID: Se utiliza con el simbolo # y modifica todas las etiquetas que le hayamos puesto
cierta id. En el ejemplo se le pone la id element-for-modify. La diferencia de el de clase es que el
ID debe ser unico por cada elemento, no debe darse el mismo ID a distintos elementos. El id
tiene mas rango de especificidad.

Selector de Atributo: Repasando que en la composición de código se encuentra etiqueta (rojo en

este caso), atributo (verde en este caso), valor (amarillo en este caso). la seleccion por atributo
selecciona justamente estos mismos mediante el simbolo de [ ]
Selector de descendiente: Se utiliza para seleccionar elementos dentro de otro elemento. En el
ejemplo se encuentran dos p pero uno esta dentro de la etiqueta h2, esto funciona como si el h2
fuese un contenedor que en su interior esta el p, por eso al escribir el codigo se pone primero el
contenedor, en este caso h2 y luego la etiqueta a modificar.

Como se ve en el ejemplo, hay dos etiquetas p,

pero solo es modificada la que se encuentra
dentro de la etiqueta h2.
 La seleccion descendiente tambien funciona con lo que son nietos, bisnietos.

Selector de hijo (>):Selecciona todos los elementos que son hijos directos de un elemento
especificado.

Selector de hermanos adyacentes (+):Selecciona el elemento que es el hermano adyacente

inmediatamente siguiente de un elemento especificado.

Selector general de hermanos (~):Selecciona todos los elementos hermanos que siguen a un
elemento especificado.
NOTA: el selector general de hermanos solo tiene en cuenta los hermano que estan por debajo, del
seleccionado, en el HTML. Por lo tanto no tendra en cuenta los hermanos que esten por arriba.

Selector de clases:Tambien puede hacerse con otros elementos como clases.

Estamos seleccionando los p que se

encuentran dentro de la clase h2-class

Pseudo-clases: Es un evento que se genera una seleccion, por ejemplo pasar el cursor por arriba de
un elemento b, el codigo se escribe asi:

Esta es la pseudo clase hover.

en este ejemplo estamos seleccionando que el hover que se encuentra dentro de un b, dentro de la
clase h2-class se active.

Tomaremos el siguiente ejemplo para ver diferentes propiedades.

a:link: Marca con un color, seleccionado en el codigo, el link a.

a:visited: Marca con un color, seleccionado en el codigo, el link cuando ya fue visitado.
 a:hover: Marca con un color, seleccionado en el codigo, el link cuando se le pasa el cursor.

a:active: Marca con un color, seleccionado en el codigo, el link cuando se le hace click.

NOTA: Se puede hacer seleccion combinada, en el siguiente ejemplo se pone que se selecciona un
linka y que tenga a su vez la clase especial.

Repaso de elementos padres e hijos.

Padre: Un elemento "padre" es aquel que contiene uno o más elementos "hijos". En HTML, los
elementos pueden estar anidados unos dentro de otros, creando una jerarquía. El elemento que
envuelve a otros elementos se llama "padre".
Hijo: Un elemento "hijo" es aquel que está contenido dentro de otro elemento, conocido como su
"padre". Los elementos "hijos" pueden tener sus propios "hijos", creando múltiples niveles de jerarquía.

NOTA: el h3 y p del segundo div

son nietos del primer div, ya que el
segundo div es hijo del pirmero.

:first-child: Selecciona el primer hijo de su elemento padre. Ejemplo: p:first-child selecciona el primer <p>
de cada elemento padre.
:last-child: Selecciona el último hijo de su elemento padre. Ejemplo: p:last-child selecciona el último <p>
de cada elemento padre.
:nth-child(n): Selecciona el n-ésimo hijo de su elemento padre. Ejemplo: p:nth-child(2) selecciona el
segundo hijo <p> de cada elemento padre.
:nth-last-child(n): Selecciona el n-ésimo hijo desde el final de su elemento padre. Ejemplo: p:nth-last-
child(2) selecciona el segundo hijo <p> desde el final de cada elemento padre.
:first-of-type: Selecciona el primer hijo de su tipo (por ejemplo, el primer <p>) dentro de su elemento
padre. Ejemplo: p:first-of-type selecciona el primer <p> de su tipo dentro de cada elemento padre.
:last-of-type: Selecciona el último hijo de su tipo dentro de su elemento padre. Ejemplo: p:last-of-type
selecciona el último <p> de su tipo dentro de cada elemento padre.
:nth-of-type(n): Selecciona el n-ésimo hijo de su tipo dentro de su elemento padre. Ejemplo: p:nth-of-
type(2) selecciona el segundo <p> de su tipo dentro de cada elemento padre.
:nth-last-of-type(n): Selecciona el n-ésimo hijo de su tipo desde el final dentro de su elemento padre.
Ejemplo: p:nth-last-of-type(2) selecciona el segundo <p> de su tipo desde el final dentro de cada elemento
padre.
Pseudoelementos

Los pseudoelementos en CSS se utilizan para aplicar estilos a partes específicas de un elemento. Los
más comunes son ::before, ::after, ::first-letter, ::first-line, ::selection, ::placeholder, y ::marker.
::first-line: Aplica estilos a la primera línea del contenido de un elemento. Esto se va adaptando a la
pantalla (responsive).

::first-letter: Aplica estilos a la primera letra del contenido de un elemento.

NOTA: Se puede hacer seleccion combinada, como por ejemplo el siguiente caso que se combina
con una seleccion de clase para que sea solo el p que tiene la clase primer-parrafo quien tenga la
primera letra en mayuscula.

::before: Inserta contenido antes del contenido de un elemento.

 ::after: Inserta contenido después del contenido de un elemento.

::marker: Aplica estilos a los marcadores de lista (por ejemplo, puntos en listas no ordenadas).

::selection: Aplica estilos a la parte del documento seleccionada por el usuario.

::placeholder: Aplica estilos al texto de marcador de posición (placeholder) de un elemento

<input> o <textarea>.
Opacidad

La propiedad opacity en CSS se utiliza para controlar el nivel de transparencia de un elemento. El valor
de opacity varía entre 0 (completamente transparente) y 1 (completamente opaco).

Especificidad Tabla de jerarquías

Al trabajar en método de cascada siempre lo ultimo es el cambio que se
le va a hacer, la especificidad sirve para cambiar algunas propiedades
sin alterar al resto dandole jerarquía. Para esto existen rangos de
jerarquía. En la imagen de la derecha puede verse los niveles de
jerarquía estando de mayor a menor. Cuando se modifican elementos
de la misma jerarquía, se modificaran según el criterio de cascada.

En el siguiente ejemplo se modifica el color de un tiltulo, el cual quda de

color rojo no por funcionamiento de cascada, ya que esta arriba sino
porque en la tabla de jerarquía, clases tiene mas jerarquía que
elementos-pseudoelementos (h1).

Clase Identificador Estilo en linea

Clase < Identificador < Estilo en linea en la tabla de jerarquías.

Por este motivo es que el h1 queda de color verde.

!important es el comando para darle mayor

jerarquía y se pone a lo ultimo del codigo.
No se aconseja mucho usarlo por el tema
de que se deba cambiar algo no se podria y
se perderia entre todo el codigo.
 Metodología BEM

BEM viene de la sigla Bock Element Modifier

Nos provee de una nomeclatura para nombrar a los elementos en el Html para evitar probelmas de
herencia, especificidad o cascada en CSS. por lo tanto permite: mantener la especificidadal minimo,
codigo modular, codigo limpioy nomeclatura.

Un bloque BEM es una entidad independiente (Header, Nav, Formulario, Footer, Contenedor, etc.)

Los bloques se les nombra con la funcionalidad del mismo. Ejemplos:

Los elementos dependen directamente de un bloque, por lo que este debe estar dentro de un
bloque (es dependiente del bloque y esta ligado a el). Entonces el elemento tiene como padre, en el
Html, a un bloque.

A los elementos se les nombra con el nombre de su bloque contenedor, dos guiones bajos y la
descripción del elemento.

En el ejemplo, hay un bloque que es el form, nombrado en BEM tiene la clase form. Dentro, tiene
dos input, el primero se llama con el nombre de la clase del bloque (que es form), despues dos
guiones bajos y luego el nombre de la funcionalidad o la descripcion del elemento, en este caso
input. Anajo tenemos otro input del tipo submit, se nombrara entonces como el bloque, dos guiones
bajos y su funcion, en este caso send ya que su funcion es la de enviar el formulario (send).

Este es otro ejemplo pero con el bloque nav.

Un modificador en BEM, puede ser un bloque o un elemento, estos indican una modificación a
dicho elemento o bloque.

A los modificadores seles indica con el nombre que tenían anteriormente (bloque o elemento) se le
agrega dos guiones medios y la descripción de la modificación.
Por ejemplo puede ser que todos loe elementos tengan un color azul pero que queremos que un
elemento tenga el color negro. Un modificador se agrega al nombre de la clase, no se reemplaza.
En este caso tenemos un bloque nav que dentro tiene dos elementos, ambos con la clase nav__link ,
pero queremos que un elemento a este desactivado, y esto es un modificador ya que agrega una
funcionalidad extra. Entonces no se reemplaza la clase nav__link sino que la voy a copiar y pegar
abrenado dos guines medios y agrego el modificador. Esto aplica para elementos o bloques pero no
se reemplaza.

Otros ejemplos:

Curiosidades de BEM

Si tengo un hijo dentro de un elemento, lo voy a

nombrar como un elemento

Una etiqueta que tiene dos clases de un bloque

se llama mix

No se puede usar modificadores globales como

disable, visible, hidden, etc. ya que puede generar
especificidad extra y se busca tener especificidad
al minimo.

NOTA:Si un nombre de clase por ejemplo lleva mas de dos palabras, debe usarse un guion - en
lugar de espacio.

En el caso de por ejemplo tener un h2 dentro de un dentro de un div, la class del h2 seria de la
siguiente manera.

No seria contact-form__p__h2 ya que los guines bajos se ponen por bloque.

 Comentarios

Para hacer comentarios en el codigo de css se debe poner /* */ siendo lo que se encuetre dentro de
los * lo que quedara comentado.

Unidades de medidas

Hay dos tipos de medidas, variables y fijas.

Tipografías
La propiedad font size permite cambiar el tamaño de la letra
, puede ponerse en cm, en px (es lo mas comun).}, mm, pt, etc.
Las medidas relativas permiten que los elementos se adapten a diferentes versiones, como por
ejemplo versiones moviles como lo son los smartphones o tablets. Esto se llama responsive design.
Unidades Absolutas
Las unidades absolutas tienen un tamaño fijo, independiente del contexto en el que se utilicen.
px (píxeles): Unidad básica en pantallas. 1px es igual a un píxel en la pantalla.
cm (centímetros): Unidad basada en el sistema métrico. 1cm es igual a un centímetro.
mm (milímetros): Unidad basada en el sistema métrico. 1mm es igual a un milímetro.
in (pulgadas): 1in es igual a 2.54 centímetros.
pt (puntos): Utilizado principalmente en impresión. 1pt es igual a 1/72 de una pulgada.
pc (picas): 1pc es igual a 12 puntos (pt).

Unidades Relativas
Las unidades relativas dependen del contexto, como el tamaño del elemento padre, el tamaño de la
fuente del contenedor, o la ventana gráfica.
em: Relativo al tamaño de la fuente del elemento padre. 1em es igual al tamaño de la fuente del
elemento padre.
rem: Relativo al tamaño de la fuente del elemento raíz (<html>). 1rem es igual al tamaño de la fuente
raíz.
% (porcentaje): Relativo al tamaño del elemento padre.
vw (viewport width): Relativo al ancho de la ventana gráfica. 1vw es igual al 1% del ancho de la ventana
gráfica.
vh (viewport height): Relativo a la altura de la ventana gráfica. 1vh es igual al 1% de la altura de la
ventana gráfica.
vmin: Relativo al menor valor entre vw y vh.
vmax: Relativo al mayor valor entre vw y vh.
Viewport

Seria la pantalla de visualizacion del dispositivo.

Viewport width (se indica con vw) es para el ancho y viewport height es para la altura (se indicacon vh).

Ejemplo:

NOTA: no es lo mismo usar viewport que porcentaje, ya que este ultimo usa el porcentaje de la caja
que lo contiene.

Propiedades de texto
Font-size: Como ya se nombro anteriormente, esta es para modificar el tamaño de la letra.
Font-family: Es la tipografia de la letra.
Line-height: Es el espacio total que ocupa la letra en
altura. El line height nace del centro de la letra, 1 line
height = 1/2 del tamaño de la letra del centro hacia arriba
+ 1/2 del tamaño de la letra del centro haciaabajo.
Font-weight: Es el grosor que va a tener las letras.
Font-style: Es para cambiar el estilo de la fuente, por ejemplo italica.
Font-variant: Puede tener el valor de small-caps que hace que todas etsen en mayusculas,
pero la primera letra sigue siendo mas grande.
Color: Es para cambiar el color de la fuente.

Ejemplo:

Para conseguir una tipografia, se busca en google fonts, se busca la que se prefiera, va a dar
un link el cual da a un archivo CSS.
Luego se va al index.html y se pega en
el head.

En la linea roja se ve el link a pegar en

index.html y en la linea naranja como
debe ponerse en el estilo.CSS.

NOTA: se ponen dos tipografias separadas por una coma, esto se hace para que en el caso que no
se encuentre una se use automaticamente la segunda.
Se puede usar un shorthand para las fuentes, font: que contiene font-size, font-style, font-variant,
font-weight, line-height y font-family.

NOTA2: Para tener texto en negrita, se usa la propiedad font-weight con el valor bold.
(font-weight: bold;)
Color a un texto
Se puede usar solo el nombre del color, pero no es recomendable ya que varia segun el navegador.
Se puede usar en sistema rgb (poniendo los valores numericos), hexadecimal, y hsl que funciona
poniendo valores en lugar de hue, saturacion y lightness.

Text-align: Es para mover el texto, puede ser right, center, start(comienzo de la caja), end (final de la caja)
etc.

Text-decoration-line: Agrega decoracion al texto, overline es una linea arriba del texto, line-through es
una linea que atraviesa el texto, underline es subrayado
 NOTA: Si despues de txt-decoration-line: pongo dos estilos separados por un espacio, va a hacer un
mix de los dos.
NOTA2: Con text-decoration-color, podemos darle color a la linea decorativa.
NOTA3: Con text-decoration-style, podemos darle estilo a la linea decorativa (wavy son como olas,
dotted es una linea punteada, solid, dashed y double).
NOTA4: Con text-decoration-thickness, podemos cambiar el grosor a la linea decorativa.

Todo esto se puede resumir con el shorthand text-decoration poniendo solo los valores de text-
decoration-line, text-decoration-style y text-decoration-color en ese orden.

Text-transform: Puede tener tres valores uppercase que pone todo el texto en mayusculas, lowercase
que pone todo el texto en minuscula, y capitalize que pone las primeras letras de todas las palabras del
texto en mayuscula. (esto puede ignorar si una letra fue escrita en minuscula o en mayuscula en el
texto original)

Text-ident: sirve para darle sangría a los parrafos (el valor es en pixeles).
Letter-spacing: agrega espacios en cada letra (el valor es en pixeles).
Line-height: Agrega espacio vertical entre las lineas de texto (el tamaño esta en factor, 1 es 100%).
Word-spacing: agrega espacios entre cada palabra (el valor es en pixeles).
White-space: puede tener el valor de nowrap ignora su caja contenedora haciendo que por ejemplo se
salga de esta.
Text-shadow: agrega sombra al texto el primer valor introducido hace que la sombra se mueva de
manera horizontal y el segundo valor de manera vertical (los valores van en pixeles) si el primer valor
es negativo, se va a mover hacia la derecha, sino se movera hacia la izquierda, por otro lado si el
segundo valor es positivo, se movera hacia abajo, de lo contrario se movera hacia arriba. Agregar un
tercer valor hara que la sombra se desenfoque. Despues de los valores puede elegirse el color de la
sombra. Si luego de estos valores se pone una coma (,) se puede agregar una segunda sombra al
texto.
Listas
List-style-type: sirve para cambiar la figura del circulo que aparece en los elementos de la lista (sirve tanto
para lista ordenada como para desordenada). Si se utiliza el valor “none” y dandole un margin y padding de
0 hace que a nivel semantico sea una lista pero que no se interrpete como tal sino que parece un texto
continuo.
List-style-image: sirve para poner una imagen en lugar de las figuras que trae la lista desordenada. Se
debe poner “list-style-image: url()” estando dentro de los parentesis la url de la imagen a utilizar.
List-style-position: permite cambiar la posicion del texto, como por ejemplo “inside” elimina la sangria
haciendo que el texto pueda continuar debajo del icono de la lista.
Background: sirve para darle color al fondo de la lista, poniendole “ul” u “ol” seria
el fondo de la lista, poniendo “ul li” u “ol li” cambia solo el fondo del icono de la
lista

NOTA: si a background le agregamos un margin y un padding podemos obtener el siguiente resultado.

Tablas

Si queremos eliminar la linea doble de la tabla debe usarse “border-collapse: collapse”.

En las tablas se pueden usar varias propiedades:

Width: Hace que la tabla quede mas ancha (su valor va en %)

Margin: Le da un margen
Entre otras.

Tambien se puede darle propiedades a los th (titulos de las tablas) con height para darle mas altura,
text-align entre otras propiedades.
Color
Los colores funcionan a traves de los nombres, pero para ser mas exactos se debe usar el sistema rgb,
erga, etc.
Rgb: (red, green, blue) Los colores se obtienen mediante combinaciones de valores de esos tres colores,
los valores van desde el 0 hasta el 255.

Rgba: (red, green, blue, alpha) Funciona de la misma manera que rgb pero le agrega un cuarto valor,
alpha, siendo este la transparencia, el valor dealpha va desde 0 hasta 1.

Hexadecimal: Este sistema define los colores mediante codigos de 6 caracteres.

HSL: Esta basado en el sistema de como ven los colores las personases un modelo de color que
representa los colores en términos de Hue (tono), Saturation (saturación), y Lightness (luminosidad). Es
una alternativa al uso de colores en formato hexadecimal o RGB y puede ser más intuitivo para ajustar
colores.
Ÿ Hue (H): El tono del color, representado como un ángulo en el círculo cromático (0 a 360 grados). Por
ejemplo, 0 o 360 es rojo, 120 es verde, 240 es azul.
Ÿ Saturation (S): La saturación del color, representada como un porcentaje (0% a 100%). 0% es un tono
de gris, y 100% es el color más intenso.
Ÿ Lightness (L): La luminosidad del color, también representada como un porcentaje (0% a 100%). 0% es
negro, 50% es el color normal, y 100% es blanco.

NOTA: Al sistema HSL tambien se le puede agregarun cuarto valor de 0 a 1 que seria alpha y funciona
tambien como transparencia.
Opacity: permite cambiar la opacidad de los colores, los valores van del 0 al 1 (al igual que alpha).(Puesto
asi de aislado puede cambiar la opacidad del texto asi que debe usarse con cuidado).

Background
Background-color: Permite cambiar el color de fondo.
Background-image: Permite poner una imagen de fondo, el valor que se le pone es el de la url
contenedora de la imagen.

Background-repeat: Hace que el fondo se repita, puede tomar valores como repeat-x para repetir en
el eje x, repeat-y para el eje y entre otros valores.
Background-position: es para la posicion, puede usarse valores como right, top, left, bottom y puede
combinarse entre ellos para obtener posiciones diagonales.
Background-attachment: Permite, entre otras cosas, hacer que la imagen de fondo se mantenga fija
y no se vea afectaba por el scroll (para esto se debe usar el valor fixed).
NOTA: Estas propiedades estan incluidas dentro del shorthand background.

Background-size: Permite, entre otras cosas, hacer que la imagen de fondo cubra toda la caja
contenedora (utilizando el valor cover).
Normalize

Si no se esribe por ejemplo un las fuentes del

texto, ni el tamaño, ni padding, etc. el
navegador dara unos por defecto. EL
normalize permitie reiniciar esos estilos. Al
buscar en google normalize.css, la primera
pagina tiene un archivo para descargar el cual
se guarda como en la carpeta que contenga el
archivo CSS y nos queda en el CSS, y luego
se cita en el head del index.html.

Este archivo se puede abrir en el sublime text.

Es aconsejable modificar en el normalize dos propiedades, una que permite mantener las imagenes
en un tamaño correcto y otra que permite que el tamaño de la caja contenedora no se vea afectada
por modificaciones en su interior.

Para la de imagenes debe buscarse en el sublime text con ctrl + F y poner img.

NOTA: en padding y margin se pone 0 sin unidad ya que cualquier unidad multiplicada por 0 va a dar
0

Teoria de cajas

Hay dos tipos de cajas, las que son en linea y las que son en bloque. La que son en bloques son las
mas grandes, siempre se van a ajustar al ancho del contenedor. Por el contario el de la linea ocupara el
ancho del contenido.

Por ejemplo un h2 es un elemento en boque

por lo tanto ocupara todo el ancho del
contenedor. Por otro lado el b ocupara solo lo
que ocupe su contenido.

Esto es un repaso de lo que se vio en Html.

 La propiedad display permite cambiar las propiedades de la caja. Por ejemplo puede hacerse que un
h2 actue como un elemento en linea. A los elementos en linea no se
les puede dar algunas propiedades.

Propiedades de las cajas

Background-color: Permite cambiar el color de fondo de la caja contenedora.
Padding: Es la distancia que esta entre el texto y la caja que lo contiene. Estan el padding left que es
el que esta entre el lado izquierdo del texto y la caja, el padding top que esta arriba del texto y la caja,
el padding right que esta en la derecha y el bottom que esta abajo del texto y la caja.
Puede escribirse como en el ejemplo de la imagen pero
tambien puede acortarse poniendo solo padding: 20px;
haciendo esto que tome 20 los 4 padding, Si pongo dos
valores, por ejemplo padding: 20px 30px; le dara 20 px al top y
bottom y 30 px al right y left.

Si se le da 4 medidas actuara como en la siguiente imagen.

NOTA: si se pone 3 medidas, es decir no se define la medida de la izquierda, tomara como valor el que
se puso en la derecha ya que toma como referencia la medida que se uso en ese eje (eje X)

Height: Es el alto de la caja que contiene background-color (poner auto hace que la caja, div, se
adapte al contenido)
Width: Es el ancho del background-color
Max-width: Esto le da un maximo de ancho a un elemento, si el tamaño de la pantalla varia, el
elemento se adapta hasta un maximo que es el dado (es parte de diseño responsive).
Text-align: Es para alinear el texto en algun lado del background-color.
Box-sizing: es una propiedad que se utiliza para especificar cómo se debe calcular el ancho y la
altura de un elemento, incluyendo el relleno y el borde.
Hay dos valores principales que se pueden asignar a la propiedad box-sizing: Content-box y
Border-box
Content-box: Este es el valor predeterminado. Si se establece en content-box,
el ancho y la altura del elemento solo incluyen el contenido del elemento, y no el
relleno ni el borde. En otras palabras, el tamaño total del elemento será el tamaño
del contenido más cualquier relleno o borde que se le haya agregado.
border-box: Si se establece en border-box, el ancho y la altura del elemento incluirán tanto el
contenido como el relleno y el borde. En otras palabras, el tamaño total del elemento será el tamaño
del contenido más cualquier relleno o borde que se le haya agregado, dejando solo el margen por
fuera.

La propiedad box-sizing es especialmente útil cuando se trabaja con diseños de cajas en CSS, ya
que permite controlar el tamaño total de una caja de manera más precisa. Además, también puede
ayudar a evitar problemas comunes como el desbordamiento de contenido o el desplazamiento de
elementos cuando se agrega relleno o borde a una caja.
Border-style: Le agrega estilo al borde de la caja contenedora, si se usa con la propiedad solid seria
un borde basico. Con dotted deja el borde con lineas punteadas, entre otros estilos.
Margin: Es la distancia que se encuentra entre el borde y los otros elementos. Al igual que el padding,
puede usarse en top, right, bottom y left. Si se da Margin: auto en los objetos que son bloques y no
estan posicionados, lo centra en la pagina.
Si en Html se ponen juntos dos elementos, es
decir en la misma linea de escritura, y en el
normalize se marca el margen de 0, los elementos
apareceran uno pegado del otro.

Border-radius: es una propiedad que redondea los bordes, se debe poner la medida.

Border: es una propiedad acortada, primero se tiene que dar el tamaño del borde, despues el estilo,
luego el color.

NOTA: en la segunda opcion puede ponerse diferentes efectos como: dashes (punteada), double
(doble linea), inset (que pone una especie de degrade en el marco), outset (que es lo invertido de
inset), groove (efecto intercalado), ridge (invertido de groove), y mix se le llama a cuando se ponene
dos juntas de estas propiedas para combinarlas. Ya que seria como usar border-style.

Box model: son las propiedades que ya mencionada: content (lo

que contiene), padding, border, margin. Para modificar el content se
usa line-height, padding usando padding, border usando border, y
margin usando margin. Tiene jerarquías, primero se pone el content,
luego el padding, luego el border y luego el margin.

Box-shadow: Le da sombra a la caja, debe ponerse los valores en eje x, eje y, el tamaño del
desenfoque, el borde y el color.

Text-shadow: Tiene las mismas características que la propiedad anterior pero es para el texto, la
diferencia es que no se debe poner el valor del borde ya que no tiene.

NOTA: para dar mas intensidad se puede poner “coma” , y volver a copiar los valores antes
puestos. Tambien funciona con border-shadow.
 Outline: Es una propiedad acortada porque es el conjunto de otras propiedades. Genera un borde
sin afectar a las demas cajas, no ocupa un espacio real en el DOM (modelo de objeto del
documento). Y en caso de tener ya un borde, el outline lo rodea.
Outline-offset: permite agregar un
espacio entre el borde y el outline.

Display

La propiedad display en CSS es una de las más importantes para el diseño y la disposición de los
elementos en una página web. Define cómo un elemento HTML debe ser representado en la pantalla.
Valores Comunes de display y sus Funciones
Block: Hace que el elemento se comporte como un bloque.
Ÿ Ocupa todo el ancho disponible de su contenedor.
Ÿ Inicia en una nueva línea.
Ÿ Ejemplos de elementos con “display: block” por defecto: <div>, <p>, <h1>, etc.
Inline: Hace que el elemento se comporte como un elemento en línea.
Ÿ Solo ocupa el ancho necesario para su contenido.
Ÿ No inicia en una nueva línea.
Ÿ Ejemplos de elementos con display: inline por defecto: <span>, <a>, <strong>, etc.css
Inline-block: Combina características de block e inline.
Ÿ Permite establecer dimensiones (ancho y alto) como un bloque.
Ÿ No inicia en una nueva línea, comportándose como un elemento en línea.
Suele usarsepara hacer barras de navegacion.
None: Hace que el elemento no se muestre en la página.
Ÿ El elemento no ocupa espacio en el flujo del documento.
Ÿ Útil para ocultar elementos sin eliminarlos del HTML.
Flex: Habilita un contenedor flexible.
Ÿ Sus hijos se comportan como elementos flexibles.
Ÿ Proporciona control avanzado sobre el alineamiento, dirección y orden de los elementos hijos.
Grid: Habilita un contenedor de cuadrícula.
Ÿ Sus hijos se colocan en una estructura de filas y columnas.(En HTML, un elemento "padre" es aquel
que contiene otros elementos dentro de su apertura y cierre. Los elementos "hijo" están anidados
dentro del elemento "padre".html)
Ÿ Proporciona un control avanzado sobre la disposición de los elementos en dos dimensiones.

Display:none vs Visibility:hidden

El uso depende mucho del contexto. Display:none permite

ocultar un elemento, el espacio ocupado por el elemento
desaparece, por otro lado el visibility:hidden oculta al
emenento, pero mantiene el espacio ocupado por el mismo.
En el siguiente ejemplo hay un h2 oculto entre el h1 y el
parrafo. En la primera imagen el elemento tiene
display:none y en la imagen de abajo el elemento tiene
visibility:hidden (en la ultima imagen se puede ver el espacio
ocupado por el h2 oculto).
 Position
Position:static es el valor por defecto de la propiedad position. Los elementos con position: static se
posicionan de acuerdo con el flujo normal del documento. No se puede mover usando las
propiedades top, right, bottom o left. El elemento se coloca donde normalmente iría en el flujo del
documento.
Position:relative: Un elemento con
position:relative se posiciona de acuerdo con el
flujo normal del documento, pero luego se
puede mover usando las propiedades top, right,
bottom y left. El espacio que el elemento
ocuparía normalmente en el flujo del documento
se mantiene. Las propiedades top, right, bottom
y left desplazan al elemento desde su posición
original.

Position:fixed: Un elemento con position:fixed

se posiciona en relación con la ventana del
navegador. No se mueve cuando se hace scroll
en la página. Siempre permanece en la misma
posición dentro de la ventana del navegador.
Las propiedades top, right, bottom y left se
usan para posicionarlo. Es el tipico elemento
que se utiliza para anuncios que por mas que
bajes de la pagina, el anuncio esta ahí.
Position:absolute: Permite posicionar un elemento
en base a la referencia de otro objeto asignado. Por
defecto la posición de los elementos tiene como
referencia el body, pero con esta propiedad se puede
posicionar tomando como base un rectángulo por
ejemplo.
Se saca del flujo normal del documento, por lo que no
afecta la posición de otros elementos. Se usa en
combinación con las propiedades top, right, bottom y
left para posicionar el elemento.

NOTA: Para que el elemento toma como referencia a

otro debe ser hijo de este, es decir debe estar dentro
del mismo div. Y el que se toma como referencia debe
tener posición distinta de static..

Position:sticky: Un elemento con position:sticky se comporta como relative hasta que se desplaza a su
posición límite especificada, luego se comporta como fixed. Útil para elementos que deben "pegarse" a la
parte superior (u otra posición) de su contenedor cuando se hace scroll.
NOTA: Relative permite que el espacio, del
elemento, se siga conservando. En el siguiente
ejemplo de cajas alineadas verticalmente, a la
caja 2 se le da la position relative a 20px, como
la caja 1 ya esta ocupando ese espacio, la caja
2 va a tomar 20px debajo del espacio que
ocupa la caja 1.

Si por otro lado usaramos pisition absolute en la

caja 2, la caja 3 estaria por debajo de la caja 2
pareciendo que desapareciera.

Las propiedades top y left son mas importantes

que las otras y son las que va a tomar mas
prioridad.

NOTA2: En los valores de pisionamientos, si se usan valores positivos, se

moveran en el sentido que indica la posicion, si se usa numeros negativos se
moveran en el sentido contrario.

Z-index: Es la propiedad que ordena los elementos en el eje z. Nuestra perspectiva es vista desde
arriba, por lo tanto los valores mas altos del z-index son los que se van a ver primero. En caso de no
especificar el z-index, se toma el valor 0 para todos y se verda de acuerdo a orden escrito en el codigo;
si escribo en html una caja 1 y luego una caja 2 (con la misma posicion), la caja 2 es la que se veria ya
que es la que se “dibujo” despues.

NOTA: se aconseja poner valores de z-index valores con bastante diferencia, por ejemplo de 50 en 50 o
100 en 100 ya que si despues debe incluirse otro elemento en el medio seria muy complicado de
modificar.

El z-index presenta conflictos de padre e hijo.

 Overflow
El atributo overflow en CSS controla cómo se muestra el contenido que se desborda de un contenedor
con un tamaño fijo. Es especialmente útil cuando el contenido excede las dimensiones especificadas del
contenedor. El valor del atributo overflow puede determinar si el contenido excedente se corta, se
desplaza o se muestra de alguna otra manera.
Overflow:visible: Valor por defecto. El contenido que desborda el contenedor se muestra fuera de los
límites del contenedor.
Overflow:hidden: El contenido que desborda el contenedor se recorta y no se muestra. No se
proporcionan barras de desplazamiento. Puede causar la perdida de accesibilidad a contenido
importante que no sea visible.
Overflow:scroll: Siempre se proporcionan barras de desplazamiento, independientemente de si el
contenido desborda o no. Puede ser útil para crear interfaces que requieren desplazamiento dentro de
contenedores específicos.
Overflow:auto: Se proporcionan barras de desplazamiento solo si el contenido desborda el contenedor.
Es frecuentemente usado para agregar barras de desplazamiento solo cuando es necesario, mejorando
la usabilidad.

Overflow:visible: Overflow:hidden: Overflow:scroll: Overflow:auto:

overflow-x:Controla el desbordamiento en el eje horizontal.Valores posibles: visible, hidden, scroll,

auto.
overflow-y:Controla el desbordamiento en el eje vertical.Valores posibles: visible, hidden, scroll, auto.
Float
Se utiliza para posicionar un elemento a la izquierda o a la derecha dentro de su contenedor,
permitiendo que el contenido a su alrededor fluya a su lado. Esta propiedad es comúnmente utilizada
para crear diseños con columnas y para envolver texto alrededor de imágenes. Puede tomar el valor de
right, left y none (por defecto).

float:none float:left float:right

NOTA: Tambien existe el valor inherit, el elemento hereda el valor de float de su elemento padre.
Aunque float sigue siendo útil en ciertos casos, las técnicas de diseño modernas como Flexbox y CSS
Grid han reemplazado en gran medida su uso.
 Flexbox

Flexbox (Flexible Box Layout) es un modelo de diseño en CSS que permite una distribución y
alineación más eficiente y predecible de los elementos dentro de un contenedor, incluso cuando su
tamaño es desconocido o dinámico.
Elementos Clave:
Ÿ Contenedor flex (flex container): El elemento padre que tiene la propiedad display: flex o
display:inline-flex.
Ÿ Ítems flex (flex items): Los elementos hijos directos del contenedor flex

Cuando hablamos de un flex-container, hablamos de un elemnto HTML que contiene a uno o mas
elementos. A estos elementos anidados los llamamos flex-items. En el flex-container es en donde
configuramos la mayoria de las propiedades flex.

Flex-wrap:nowrap: Es el valor por defecto, los elementos hijos de un contenedor flex van a tratar de
entrar todos en una misma linea.

Flex-wrap:wrap: Para aclararle al contenedor que debe respetar el ancho definido de sus hijos
usamos la propierdad flex-wrap con el valor wrap.

Flex-wrap:wrap-reverse: Se utiliza para invertir la dirección en la que se envuelven los ítems flex
cuando no caben en una sola línea.
Flex-direction: determina la dirección en la que los ítems flexibles se colocan dentro de un contenedor
flex (el eje principal main axis y el eje transversal cross axis). Esta propiedad establece el eje principal, que
define la dirección del flujo de los ítems.
Flex-direction:row: Los ítems se colocan en una fila, de izquierda a derecha (dirección horizontal,
predeterminado). Main axis horizontal y cross axis vertical.

Flex-direction:row-reverse: Los ítems se colocan en una fila, pero de derecha a izquierda (dirección
horizontal invertida). . Main axis horizontal y cross axis vertical.

Flex-direction:column: Los ítems se colocan en una columna, de arriba hacia abajo (dirección vertical)..
Main axis vertical y cross axis horizontal.

Flex-direction:column-reverse: Los ítems se colocan en una columna, pero de abajo hacia arriba
(dirección vertical invertida). Main axis vertical y cross axis horizontal.

Justify-content: Se utiliza en un contenedor flex para alinear y distribuir los ítems flexibles a lo largo del
eje principal, main axis, (horizontal,en funcion de la fila, o vertical, en funcion de la columna, dependiendo
de flex-direction). Esta propiedad ayuda a controlar cómo se distribuye el espacio entre los ítems y
alrededor de ellos.
Justify-content:flex-start: Los ítems se alinean al principio del contenedor (por defecto), inicio del main
axis.
Justify-content:flex-end: Los ítems se alinean al final del contenedor, al final del main axis.

Justify-content:center: Los ítems se alinean en el centro del contenedor, del main axis.

Justify-content:space-between: Los ítems se distribuyen con espacio igual entre ellos, el primer item
sera enviado al inicio del main axis, y el ultimo sera enviado al final. El espacio libre se repartira para
separar los items.

Justify-content:space-around: Los ítems se distribuyen de una manera uniforme> el espacio libre

disponible se repartira entre todos los elementos.Del espacio que le toque a cada elemento, la mitad ira a
la derecha y la otra a la izquierda (o arriba y abajo en caso de columnas).

Justify-content:space-evenly: Los ítems se distribuyen con espacio igual entre ellos y en los extremos
del contenedor.

Align-items: Con esta propiedad alineamos los items a lo largo del cross axis. Si no aclaramos esta
propiedad, el valor por defecto es stretch, los items ocuparan todo el espacio disponible en el cross axis.

Align-items:stretch: (es la valor por defecto) Los items se ajustan para abarcar todo el contenedor. Si el
cross axis es vertical, se ajustan en funcion de la columna. Si el cross axis es horixontal, se ajustan en
funcion de la fila.
Align-items:flex-start: Los items se alinean al inicio del cross axis.

Align-items:flex-end: Los items se alinean al final del eje transversal.

Align-items:center: Los items se alinean al centro del eje transversal.

Align-items:baseline: Alinea los ítems flexibles a lo largo de la línea de base de su contenido. Esto es
particularmente útil cuando los ítems contienen texto u otros elementos en línea, y deseas que sus líneas
de base se alineen entre sí.

Align-content: Si tenemos un contenedor de una sola linea (donde flex-flow se establece como no-wrap)
utilizaremos align-items, pero en el caso de que estemos trabajando con cotenedores multilinea debemos
utilizar align-content.
Con esta propiedad alineamos los items a lo largo del cross axis cuando los contenedores flexibles
incluyen varias lineas (donde flex-flow se establece en wrap o wrap-reverse).

Align-content:stretch: Las líneas se estiran para llenar el espacio disponible (valor predeterminado).
Align-content:space-around: Las líneas se distribuyen con espacio igual alrededor de ellas.

Flex items: order. Con esta propiedad controlamos el orden de cada

item, sin importar el orden original que tenga en la estructura HTML.
Esta propiedad recibe un numero entero, positivo o negativo,como
valor.
Por defecto, todos los items flex tienen un orden: 0 implicito, aunque
no se especifique.

Order: numero positivo. Si le asignamos a la caja Q (que posee la clase caja-q) la propiedad order con
valor 1, esta pasara al final de la fila por ser el numero mas alto. Recordemos que ,por defecto, el valor
del orden de cada item es 0.

Order: numero negativo. Si ahora le asignamos a la caja D la propiedad order con un valor -1, esta pasara
al comienzo de la fila. Colocando al item con el orden mas pequeño primero.
Align-content:flex-start: Las líneas se alinean al principio del contenedor.

Align-content:flex-end: Las líneas se alinean al final del contenedor.

Align-content:center: Las líneas se alinean en el centro del contenedor.

Align-content:space-between: Las líneas se distribuyen con espacio igual entre ellas.

 Flex-grow. Con esta propiedad definimos cuanto puede llegar a crecer un item en caso de disponer de
espacio libre en el contenedor. Configura un crecimiento flexible para el elemento.

Si ambos items tienen la propiedad flex-grow con valor 1, a medida que el contenedor se agrande iran
abarcando el espacio disponible en partes iguales.

El numero que le asignamos a flex-grow determina que cantidad de espacio disponible dentro del
contenedor flexible tiene que ocupar ese item.
1 equivale al 100% del espacio disponible, y 0 al 0%. Podemos usar cualquier valor en el medio, como
0.25 para el 25%.

Align-self. Nos permite alineas, sobre el cross axis, a cada item al que le apliquemos esta propiedad,
independientemente de la alineacion que se haya definido en el contenedor flex con align-items.

Align-self:auto: Hereda el valor de align-items del contenedor (valor predeterminado).

Align-self:flex-end: El item se alinea al final del eje transversal.

Align-self:flex-start: El ítem se alinea al principio del contenedor a lo largo del eje transversal.

Align-self:center: El ítem se alinea en el centro del contenedor a lo largo del eje transversal.

Align-self:stretch: El ítem se estira para llenar el contenedor a lo largo del eje transversal.
Grid

Es un modelo de cuadricula flexible y altamente personalizable.

Para activar la cuadricula grid hay que hay que utilizar sobre el elemento contenedor la propiedad
display y especificar el valor grid o inline-grid.

Inline-grid: Establece una cuadricula con itms en linea, de forma equivalente a inline-block

Grid: Establece una cuadricula con items en bloque, de forma equivalente a block

Armar la rejilla con columnas, filas y espacios

Es posible crear cuadriculas con un tamaño explicito usando las propiedades grid-teplate-columns y grid-
template-rows, que sirven para indicar las dimensiones de cada celda de la cuadricula.
Grid-template-rows: Establece el tama;o de cada fila.

Gid-template-columns: Establece el tamaño de cada columna

Grid-gap: Crea un espacio vacio

NOTA: Trabajar con tamaños relativos, enlugar de especificaciones estaticas, permite que la cuadricula
pueda adaptarse automaticamente al de la tamaño pantalla.
NOTA2: La segunda columna, en este ejemplo, siempre sera dos veces mas grande que las otras.
NOTA3: 1fr es una medida sobre el espacio disponible (free space).
Se pueden usar unidades absolutas.

Repeat(): La funcion repeat se usa para simplificar la definición de filas o columnas repetitivas. Es
particularmente útil cuando necesitas crear una cuadrícula con un número grande de columnas o filas que
tienen el mismo tamaño.
count: el número de veces que quieres que la pista (fila o columna) se repita.
track-size: el tamaño de cada pista (fila o columna). Puede ser un valor fijo, como 100px, o una fracción
(1fr), entre otros.

Asignar areas (grid-templates-areas).

CSS grid layout permite combinar celdas en aeas y nombrarlas. Esto facilita la tarea de dividir los
elementos en la grilla. Los ajustes se hacen en el contenedor con grid-templates-areas.

En este ejemplo usamos el comando grid-templates-areas y escribimos los nombres de las celdas linea
por linea. SI no queremos asignar una celda y dejarla en blanco insertaremos un punto (.) en esta
ubicacion. Cada fila queda entrecomillada (”).

Align-self (grid)
Con align-self podemos alinear un elemento de la cuadricula dentro de una celda a lo largo del eje del
bloque (columna). Este valor se aplica al contenido dentro de un solo elemento de cuadricula.

Align-self:stretch: Estira el ítem para llenar la celda (valor por defecto).

Align-self:start: Alinea el ítem al principio de la celda (parte superior).

Align-self:end: Alinea el ítem al final de la celda (parte inferior).

Align-self:center: Centra el ítem en la celda.

NOTA: Align-self es útil cuando necesitas que un ítem individual se comporte de manera diferente a los
otros ítems en términos de alineación vertical.
NOTA2: Si no se especifica align-self, el ítem hereda el valor de align-items definido en el contenedor de la
cuadrícula

Justify-self (grid)

Nos permite alinear un elemento de la cuadriculadentro de una celda a lo largo del eje en linea (fila).
Este valor se aplica a un elemento de la cuadricula dentro de una sola celda.

Justify-self:stretch: Estira el ítem para llenar la celda (valor por defecto).

Justify-self:start: Alinea el ítem al principio de la celda (lado izquierdo).

Justify-self:end: Alinea el ítem al final de la celda (lado derecho).

Justify-self:center: Centra el ítem en la celda.

NOTA: Justify-self es útil cuando necesitas que un ítem individual se comporte de manera diferente a
los otros ítems en términos de alineación horizontal.
NOTA2: Si no se especifica justify-self, el ítem hereda el valor de justify-items definido en el contenedor
de la cuadrícula.

Justify-content (grid)
A veces, el tamaño total de su cuadricula puede ser menor que el tamaño de su contenedor de cuadricula.
Esto podria suceder si todos los elementos de su cuadricula tienen el tamaño de unidades no flexibles
como px.
En este caso, puede establecer la alineacion de la cuadricula dentro del contenedor de la cuadricula.
Esta propiedad alinea la cuadricula a lo largo del eje en linea (fila, horizontalmente).
Justify-content:stretch: El contenido de la cuadrícula se estira para llenar el espacio del
contenedor. (Nota: Este es el comportamiento predeterminado de los elementos de la cuadrícula, no
de la cuadrícula en sí.)
Justify-content:start: Alinea el contenido de la cuadrícula al principio del contenedor (lado

Justify-content:end: Alinea el contenido de la cuadrícula al final del contenedor (lado derecho).

Justify-content:center: Centra el contenido de la cuadrícula en el contenedor.

Justify-content:space-between: Distribuye el contenido de la cuadrícula con el primer ítem alineado

al inicio y el último al final, con espacios iguales entre los ítems.

Justify-content:space-around: Distribuye el contenido de la cuadrícula con espacios iguales

alrededor de cada ítem, incluyendo los bordes del contenedor.
Justify-content:space-evenly: Distribuye el contenido de la cuadrícula con espacios iguales entre
los ítems y también en los bordes del contenedor

Align-content (grid)

Se utiliza para alinear el contenido de la cuadrícula en el contenedor de la cuadrícula a lo largo del eje
vertical (eje transversal). A diferencia de align-items, que afecta a los ítems individuales, align-content
afecta a la cuadrícula en su totalidad cuando el tamaño de la cuadrícula es menor que el tamaño del
contenedor.

Align-content:stretch: Estira el contenido de la cuadrícula para llenar el espacio vertical del

contenedor. (Valor por defecto si no se especifica).

Align-content:start: Alinea el contenido de la cuadrícula al principio del contenedor (parte superior).

Align-content:end: Alinea el contenido de la cuadrícula al final del contenedor (parte inferior).

Align-content:center: Centra el contenido de la cuadrícula en el contenedor.

Align-content:space-around: Distribuye el contenido de la cuadrícula con espacios iguales alrededor
de cada ítem, incluyendo los bordes del contenedor.

Align-content:space-between: Distribuye el contenido de la cuadrícula con el primer ítem alineado al

inicio y el último al final, con espacios iguales entre los ítems.

Align-content:space-evenly: Distribuye el contenido de la cuadrícula con espacios iguales entre los

ítems y también en los bordes del contenedor.

NOTA: Align-content afecta a todo el contenido de la cuadrícula y es especialmente útil cuando el tamaño
del contenedor es mayor que la suma de las alturas de las filas de la cuadrícula.
NOTA2: Si el tamaño de la cuadrícula es igual o mayor que el tamaño del contenedor, align-content no
tendrá efecto.

Mediaquires

Permiten aplicar estilos CSS a diferentes dispositivos y condiciones de visualización. Se utilizan para
crear un diseño adaptativo (responsive design) que se ajusta a diferentes tamaños de pantalla y
características del dispositivo.

Usos mas comunes:

Ancho de pantalla: permite aplicar estilos específicos para

diferentes anchos de pantalla asignados en el archivo css.
 Orientación: Permite aplicar estilos según la orientación
del dispositivo.

Resolución: permite aplicar estilos para diferentes

resoluciones de pantalla.

Características del dispositivo: Permite aplicar estilos según características específicas del dispositivo.

NOTA: Tambien sirve para hacer una nueva distribucion del grid dependiendo de la resolucion.
Transiciones

Se utilizan para controlar la velocidad de los cambios en las propiedades CSS de los elementos. Esto se
hace mediante la definición de la propiedad que cambiará, la duración del cambio, la curva de aceleración
y el retardo opcional antes de que comience la transición.

Propiedades de Transición:
transition-property: Especifica las propiedades CSS a las que se aplicará la transición.
transition-duration: Define cuánto tiempo debe durar la transición.
transition-timing-function: Describe cómo debe progresar la transición a lo largo de su duración.
transition-delay: Especifica el tiempo de espera antes de que comience la transición.
Funciones de temporización (timing functions)

linear:
Descripción: La transición ocurre a una velocidad constante de principio a fin.
Curva: Una línea recta.
Uso: Ideal para movimientos uniformes sin aceleración ni desaceleración.

ease:
Descripción: Esta es la función de temporización por defecto. Comienza la transición lentamente, luego
acelera y finalmente desacelera hacia el final.
Curva: Suave, con una aceleración y desaceleración gradual.
Uso: Se utiliza cuando se desea una transición suave y natural.

ease-in:
Descripción: La transición comienza lentamente y luego acelera hacia el final.
Curva: Comienza plana y luego sube rápidamente.
Uso: Útil cuando se quiere que la transición tenga un inicio suave y rápido.css

ease-out:
Descripción: La transición comienza rápidamente y desacelera hacia el final.
Curva: Comienza rápidamente y luego se aplana hacia el final.
Uso: Ideal para transiciones que deben terminar suavemente.

ease-in-out:
Descripción: La transición comienza lentamente, acelera en el medio y desacelera hacia el final.
Curva: Suave, similar a ease pero con un cambio más pronunciado en el medio.
Uso: Se usa cuando se desea una transición con un inicio y un final suaves, pero más acelerada en el
medio.

NOTA: Asegúrate de verificar la compatibilidad del navegador, ya que algunas propiedades avanzadas
pueden no ser compatibles con versiones más antiguas de algunos navegadores.
Transform

Permite aplicar transformaciones visuales a los elementos, como rotar, escalar, trasladar o sesgar. Esto
puede combinarse con transiciones para crear efectos animados atractivos.

Propiedad transform:
La propiedad transform se utiliza para aplicar transformaciones 2D o 3D a un elemento. Estas
transformaciones incluyen:
translate:
Descripción: Mueve el elemento a lo largo de los ejes X, Y o Z.
Sintaxis: translate(x, y), translateX(x), translateY(y), translateZ(z)

rotate:
Descripción: Rota el elemento en torno a un punto de origen (por defecto, el centro del elemento).
Sintaxis: rotate(angle), rotateX(angle), rotateY(angle), rotateZ(angle)

scale:
Descripción: Escala el tamaño del elemento en los ejes X, Y o Z.
Sintaxis: scale(x, y), scaleX(x), scaleY(y), scaleZ(z)

skew:
Descripción: Inclina el elemento en torno a los ejes X e Y.
Sintaxis: skew(x-angle, y-angle), skewX(angle), skewY(angle)css

matrix:
Descripción: Aplica una transformación 2D utilizando una matriz de seis valores.
Sintaxis: matrix(a, b, c, d, e, f)

NOTA: Puede agregarse transform como valor a transition.

Animaciones

Las animaciones en CSS permiten animar los cambios de las propiedades CSS a lo largo del tiempo. Se
definen mediante dos componentes principales: las propiedades de animación y las reglas @keyframes.

Propiedades de Animación:
animation-name: Define el nombre de la animación.
animation-duration: Especifica la duración de la animación.
animation-timing-function: Describe cómo debe progresar la animación a lo largo de su duración
(similar a las funciones de temporización de las transiciones).
animation-delay: Especifica el tiempo de espera antes de que comience la animación.
animation-iteration-count: Define cuántas veces se debe reproducir la animación.
animation-direction: Especifica si la animación debe reproducirse en sentido normal, inverso o alternar.
animation-fill-mode: Define cómo aplicar estilos a un elemento antes y después de que se ejecute la
animación.
animation-play-state: Permite pausar y reanudar la animación.
Todas estas propiedades se agregan al elemento.

Reglas @keyframes
Las reglas @keyframes definen los estados clave de una animación y los estilos en esos estados.

Se debe poner el nombre de la animacion en las propiedades de lo que se quiere animar, en el siguiente
caso es un div que el nombre de la animacion es prueba y se le agrega el tiempo de la animacion, 3 s.
Por debajo se debe poner el @keyframes con el nombre de la animacion y entre llaves {} ponemos la
caracteristica que queremos que transiciones desde (from) y hasta donde (to).
En este ejemplo ponemos que cambie el background-color de rojo a azul.

NOTA: Los % sirven para hacerlo mas ciclicos por ejemplo, o para agregar mas animaciones dentro de
un mismo @keyframes.
NOTA2: Esta propiedad cuenta con el shorthand animation:
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay]
[animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];
Recomendaciones y buenas prácticas

Nombra correctamente los selectores

Para conseguir más claridad en el código y soporte en todos los navegadores conviene no comenzar el
nombre de los selectores con mayúsculas, números ni caracteres especiales.

Separa las palabras mediante guiones o mediante mayúsculas

Elige una única manera de escribir el nombre de los selectores. Además, no utilices guiones bajos “_” u
otros caracteres especiales ya que algunos navegadores no los soportan. Es recomendable seguir
alguna de las siguientes opciones:

Utiliza nombres descriptivos en los selectores

Utiliza nombres que te permitan averiguar fácilmente a qué elemento le estás dando estilo.

No utilices como nombre de un selector una característica visual

Al utilizar en el nombre de un selector una característica visual como el color, el tamaño o la posición y
posteriormente, modificamos esa característica, también deberíamos cambiar el nombre del selector.

Esto complica mucho el código ya que tendríamos que actualizar todas las referencias a ese selector
en HTML
Combinar elementos
Los elementos de una hoja de estilo a veces comparten propiedades. En lugar de volver a escribir el
código anterior, ¿por qué no sólo combinarlos? Por ejemplo, los elementos h1, h2 y h3 podrían compartir
la misma fuente y el mismo grosor

Utilizar varias clases

A veces es beneficioso agregar varias clases a un elemento.

Orden de declaración
Para el orden de declaración resulta mucho más cómodo usar el orden alfabético para poder buscar
luego una propiedad, por ejemplo si querés buscar un z-index sabes que siempre está al final de las
declaraciones.