CSS.

1. CSS (Cascading Style Sheets). Sirve para dar estilos a las estructuras HTML.

2. Enlazar CSS a HTML. Existen cuatro formas.

a) Archivo externo. Se incorporar en el head la etiqueta <link rel=“stylesheet” type=“text/css” href=“ruta al
archivo”>. Se recomienda utilizar esta forma dado que reduce la posibilidad de código spaghetti.
b) Línea. Se incorpora en HTML con la etiqueta style como atributo. No es recomendable.
c) Definido por etiqueta. Se incorpora en HTML con la etiqueta style como un elemento separado. No es
recomendable.
d) Import. Se incorpora en HTML con la etiqueta @import. No es recomendable.

3. Estructura CSS. Selector {propiedad: valor;}. Se comenta con /*Comentario*/.

4. Selectores.
a) Universal (*). Selecciona todos los elementos. Se debe escribir el asterisco. Por ejemplo *{color:yellow;}.
b) Tipo (Elemento). Se selecciona por el tipo de elemento. Por ejemplo, h1, input, p, div, button, entre otros.
Se debe escribir directamente el nombre del mismo. Por ejemplo, h1{color: blue;}.
c) Clase (.). Se selecciona por la clase dentro de los elementos. Por ejemplo, class=principal. Se debe
escribir un punto y el nombre de la clase. Por ejemplo, .subtitle{color: green;}.
d) ID (#). Se selecciona por el ID. Por ejemplo, id=“principaltitle”. Se debe escribir un asterisco y el nombre
del id. Por ejemplo, #principaltitle{color: grey;}.
e) Atributo [Atributo=Valor]. Se selecciona por el atributo dentro de los elementos. Por ejemplo,
value=“afirmativo”. Se deben escribir corchetes y dentro se escribe todo, es decir, el atributo y su valor. Por
ejemplo, [value=“afirmativo”]{color:Orange;}.
f) Descendientes (Ascendiente Descendiente). Sirve para seleccionar elementos que se encuentren dentro de
otro contenedor. Por ejemplo, <div><p></p></div> (un p dentro de un div). Se debe escribir primero el
elemento contenedor y luego el elemento contenido. Por ejemplo div p{color: violet;}. El ascendiente puede
ser tanto un tipo como una clase, un id o un atributo.
g) Pseudo-Clases (Elemento/Clase/ID/Atributo: Pseudoclase). Sirve para seleccionar pseudoclases. Por
ejemplo, un hover. Se debe escribir el elemento/clase/id/atributo, dos puntos y la pseudoclase. Por ejemplo,
h2:hover{color: brown;}.
Se pueden observar todos los selectores en el siguiente link
https://www.w3schools.com/cssref/css_selectors.asp.
*Las CLASES pueden ser compartidas por varios elementos mientras que los ID no dado que son únicos.

5. Especificidad. Consiste en la importancia que tiene un selector sobre otros. Es la manera mediante la cual
los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo
tanto, serán aplicados. La jerarquía que tiene en cuenta CSS, de mayor a mayor, es la que podemos ver a
continuación.

!important > Estilos en Línea > ID > Clases/Atributos > Elementos.

*Si hay dos selectores que se encuentran en el mismo nivel de jerarquía, se aplicará el efecto cascada de
CSS, es decir, prevalecerá el último. El !important se escribe al lado del valor y luego se cierra con ;.

6. Metodología BEM. Sirve para evitar conflictos de especificidad entre clases. Se aplica cuando tenemos un
contenedor con elementos dentro. Por ejemplo, si tenemos un div con la class principal y adentro un h1, la
class del h1 debería hacer referencia a su contenedor, lo que podemos ver a continuación.

<div class=“principal”>
 <h1 class=“principal__title”></h1>
</div>

Se resolvería el problema de la especificidad dado que estaríamos trabajando únicamente con clases. Nos
permite distinguir fácilmente, a través de la clase, que el h1 se encuentra dentro del div. No olvidar que se
deben utilizar dos guiones bajos. Si tenemos varios elementos iguales dentro de un contenedor y queremos,
por ejemplo, distinguir al primero, podemos hacer dos cosas.
a) Incorporar en CSS luego del selector :first-child para distinguirlo. A su vez, si queremos seleccionar un
second child, o sucesivo, debemos incorporar luego del selector :nth-child(numero de hijo).
b) Incorporar en HTML --active al final de la clase para distinguirlo y luego seleccionarlo en CSS.

*Si hay más elementos dentro del contenedor, no debemos agregar uno por uno mediante dos guiones bajos
sino que podemos utilizar un guión medio. Se puede ver a continuación.

<div class=“principal”>
<h1 class=“principal__title”></h1>
<p class=“principal__title-p”></p>
</div>

Otras metodologías son camelCase (segunda palabra en maýusculas) y kebab-case (segunda palabra
separada por un guión medio).

7. Unidades.
a) Absolutas. Pixeles, centímetros, milímetros, puntos.
b) Relativas.
- Em. Si consideramos el tamaño de 1em, por defecto, son 16 pixeles. Cabe destacar que ese es el valor por
defecto, pero la medida de 1em va a depender del contenedor. Por ejemplo, si en el contenedor pongo font-
size: 20px; y en el elemento contenido font-size: 5em, cada em valdrá 20px, por ende, el font-size del
elemento será de 100px.
- Rem. Es muy similar a em, pero no depende del contenedor (elemento padre), sino del elemento raíz del
documento, el elemento HTML. Rem significa Root Em, o sea, es un em basado en la raíz.
- Porcentaje. Consiste en el porcentaje de la caja que contiene al elemento. Por ejemplo, width: 50% sería el
50% del ancho de la caja que contiene al elemento y height: 50% sería el 50% del alto de la caja que
contiene al elemento.
- Viewport (vw). Consiste en el porcentaje de la pantalla. Por ejemplo, width: 50vw sería el 50% del ancho
de la pantalla y height: 50vh sería el 50% del alto de la pantalla.
*Se recomienda utilizar unidades relativas debido a que, si el sitio se debe adaptar a una versión mobile y
utilizamos unidades absolutas, las letras no modificarán su tamaño y no se podrá ver todo adecuadamente.

Medida Relativa. Resumen.

Em. El valor de 1em se hereda del contenedor.
Rem. El valor de 1 rem se hereda de la raíz (HTML).
Porcentaje. Porcentaje del contenedor.
Viewport. Porcentaje de la pantalla.

8. Propiedades de Texto.
a) Font-size. Tamaño de la letra.
b) Font-family. Tipografía. Se puede elegir una de las que vienen en el sistema o agregarlas tanto desde una
carpeta interna como desde la web. Si se quiere buscar una carpeta interna, debemos descargarnos la fuente.
Si se quiere buscar en la web, no debemos descargarnos la fuente. Existen dos formas de incluir la tipografía
en nuestra página. Mediante un fragmento de código HTML, marcando la opción <link>, o mediante un
fragmento de código CSS, marcando la opción @import. Se recomienda utilizar Google Fonts para ambos
casos. Tener en cuenta que, desde la web, las pueden dar de baja. Por ende, siempre es mejor descargarlas e
incorporarlas desde una carpeta interna. Siempre se recomienda incorporar más de una font-family por si el
navegador no logra encontrar la principal.
c) Line-height. Altura que ocupa cada letra. Si el valor es 1, ocupa el tamaño de 1 letra. Si el valor es 2,
ocupa media letra más hacia arriba y media letra más hacia abajo. Si el valor es 3, ocupa el tamaño de tres
letras, 1 espacio hacia arriba, 1 espacio donde se encuentra la letra y 1 espacio hacia abajo.
d) Font-weight. Grosor de la letra.
e) Color. Color de la letra.
f) Text-align. Alineación del texto.
h) Text-shadow. Sombra del texto.

9. Normalize. Fichero CSS que apenas ocupa 8 KB, cuyo principal objetivo es mantener los estilos similares
en los navegadores, ya que cada uno agrega sus propios estilos por defecto, por ejemplo te suelen agregar
distintos paddings, margins, font-sizes,etc. Con Normalize CSS lo que hacemos es regularizarlos y que
nuestra web se vea igual independientemente del navegador donde se visualice. Al tratarse de una hoja de
estilo (.css), debe ser tratado como tal, y por tanto simplemente hay que referenciarlo en el <head> del
documento html <link rel="stylesheet" href="normalize.css" />. Muy importante colocar la referencia a este
fichero antes que cualquier otro estilo.

10. Teoría de Cajas. Hay dos tipos de cajas.

a) En bloque. Ocupan todo el ancho de su contenedor. Los elementos que vengan después aparecerán
debajo.
- Se colocan siempre en su propia línea, debajo de los elementos anteriores.
- Se expanden hasta ocupar toda la anchura disponible (la del elemento contenedor).
- La altura se ajusta al contenido.
- Pueden contener otros elementos inline o block.
- Se les puede dar height y width.
- Se les puede asignar margin y padding con CSS.
- Ignoran la propiedad CSS vertical-align.
b) En línea. Ocupan únicamente el ancho de su contenido. Los elementos que vengan después aparecerán a
continuación.
- No crean una nueva línea. Se colocan en línea con otros elementos.
- No se les puede dar height ni width.
- Sólo podemos fijar margin-left y margin-right. Ignoran margin-top y margin-bottom.
- Sólo pueden contener otros elementos inline.
- Debe respetar la propiedad white-space de CSS.
- Respeta vertical-align.

¿Se puede hacer que las cajas en bloque se comporten como elementos en línea y viceversa? Sí, se puede. Si
queremos que una caja en bloque se comporte como una caja en línea, debemos incorporar en CSS la
propiedad display y seleccionar la opción inline o inline-block. Lo veremos más adelante en positions.

11. Propiedad de Cajas.

a) Box-sizing. Indica cómo se deben calcular las medidas de un elemento.

- Content-box (valor por defecto). Significa que si le añadimos un padding o un border el tamaño de la caja
será: width + padding + border. Por ejemplo, si tenemos 250px de width, 10px(*2) de padding y 10px(*2)
de border, tendríamos una caja de 290 px.
- Border-box (incorporado por defecto en normalize). El valor border-box en el box-sizing hace que el
padding y el border pasen a formar parte del cálculo del ancho de la caja y no lo suman posteriormente, lo
que simplifica nuestro trabajo bastante ya que si queremos una caja que mida 250px de esta forma
tendremos la seguridad que será de la medida que le hemos indicado sin importar si usamos bordes o
paddings.
b) Height. Altura de la caja.
c) Width. Anchura de la caja.

d) Box Model. Jerarquía en la que se van insertando las propiedades.

- Content. Consiste en el contenido de la caja. Se modifica con el line height.
- Padding. Distancia entre los bordes de la caja y el contenido interno. Hay cuatro paddings: top, right,
bottom y left. Si escribimos un solo valor en margin, aplica a los cuatros lados. Si escribimos cuatro valores
en margin, siguen el mismo orden si incluimos todos juntos a través de padding sin especificar. Por ejemplo,
padding: 1px, 2px, 1px, 2px. Si saco uno de los cuatro, hace espejo con su opuesto. Por ejemplo, si hay 1px
de top y nada de bottom, se replica 1px.
- Border. Borde de la caja. Se encuentra fuera del padding. Puede ser solid (línea sólida), dashed (línea
punteada), double (doble línea punteada) o groove, ridge, inset, outset, entre otros. A su vez, la propiedad
puede ser border-radius, la cual sirve para redondear el borde de la caja.
- Margin. Distancia entre los bordes de la caja y el contenido externo. Hay cuatros margins: top, right,
bottom y left. Su funcionamiento de valores es igual al del padding. Si establecemos un margin con el valor
auto, lleva los elementos al centro del eje horizontal.

e) Background-color. Establece el color de fondo de la caja.

f) Background-image. Establece una imagen de fondo para la caja.
g) Box-shadow. Sombra de la caja.
h) Transform. Grados de rotación.

12. Outline. Se parece a border, pero no ocupa un espacio real, es decir que, si lo aplicamos, ningún
elemento se vería desplazado de su lugar. En cambio, si aplicamos un border, el espacio del border desplaza
a los demás elementos. Si el outline tiene 1px, no desplaza a ningún elemento dado que no ocupa espacio, en
cambio, si el border tiene 1px, desplaza a los demás elementos en 1px dado que ocupa espacio.

13. Position. Sirve para afectar el flujo HTML, es decir, el orden de los elementos. Cuando posicionamos un
elemento, hacemos que adquiere cinco propiedades nuevas: top, right, bottom, left y z-index. Considero que,
una de sus funciones más importantes, es establecer un punto de referencia.

a) Static (valor por defecto). No hay posición.

b) Relative.
- Espacio (se reserva). Sirve para que, al mover una caja de lugar, el espacio en el que se encontraba no sea
ocupado por otro elemento y se reserve. Si agregamos, por ejemplo, un top, right, bottom o left, se moverá la
caja, pero el espacio en el que se encontraba no será ocupado.
- Punto de referencia para mover la caja. El lugar en el que se encontraba. Si queremos utilizar un margin
auto para que se centre en el eje horizontal, se debe utilizar position relative.
- No se ajusta el tamaño de la caja al contenido.

c) Absolute. Tiene la misma función que position relative, pero con tres cosas que cambian.
- Espacio (no se reserva). Al mover una caja de lugar, el espacio en el que se encontraba pasa a estar
ocupado por otro elemento. Por ejemplo, si tengo la caja 1, la caja 2, y la caja 3, una arriba de otra y le
aplico position absolute a la caja 2, la caja 3 va a subir a su lugar dado que el espacio que tenía la caja 2 ya
no se encontrará reservado como sí sucedería con position relative.
- Punto de referencia para mover la caja. El viewport o el contenedor (si está posicionado). Si no se
encuentra dentro de un contenedor, el punto de referencia será el viewport, en cambio, si se encuentra dentro
de un contenedor y, el mismo se encuentra con position relative o position absolute, el punto de referencia
será el contenedor. Si el contenedor no está posicionado, las cajas no lo van a tomar como punto de
referencia y van a salir del mismo.
- Se ajusta el tamaño de la caja al contenido.

d) Fixed. Tiene la misma función que absolute, pero la caja queda fijada en un lugar, lo que podemos notar
al hacer scroll. Si scrolleamos hacia abajo, la caja nos seguirá y se encontrará, siempre, en el mismo punto
fijo. Se usa para navs, ventanas emergentes, publicidad, entre otras cosas. Si queremos crear una nav
superior y aplicamos position fixed, tendremos un problema. Lo que haya abajo se superpondrá con el nav
debido a que el espacio no se reserva (como en position relative). Si lo queremos solucionar, debemos
agregarle a la caja que se encuentre debajo del nav (probablemente main) un padding-top, de por ejemplo
100px, y al nav un margin de -100px.

e) Sticky. Funciona como relative si se encuentra en la parte superior y funciona como fixed si se encuentra
en el medio de la página.

*Sirve para lo mismo dar un un top de 20px que un bottom de -20px y viceversa. Si agrego un top y un
bottom al mismo tiempo, se aplica únicamente el top. Lo mismo sucede con left y right, se aplica
únicamente el left.

14. Z-Index. Sirve para poner un elemento por encima de otro, es decir, ordena los elementos a lo largo del
eje Z. El valor más alto del z-index estará por delante. Solo se aplica en elementos posicionados. No se
recomienda dejar un número entre un z-index y otro. Se recomienda ir, por ejemplo, de 10 en 10 por si
debemos agregar un z-index entre medio. Así no necesitaremos cambiar manualmente los anteriores y
podemos incorporar entre medio lo que queramos. Si vamos de 1 en 1, no tenemos espacio en medio para
incorporar nada.

Conflicto del Z-Index entre padres e hijos. No se puede poner a una caja padre por sobre una caja hijo. La
única forma para hacerlo es al hijo darle un z-index: -1 y al padre no darle ninguno. Lo importante para que
funciona es que el z-index del padre no se encuentre definido.

15. Display. Sirve para modificar el comportamiento de las cajas.

a) Block. Sirve para que una caja se comporte como un elemento en bloque.
b) Inline. Sirve para que una caja se comporte como un elemento en línea. Se utiliza para textos. No se
puede modificar el ancho ni el alto.
c) Inline-block. Sirve para que una caja se comporte tanto como un elemento en bloque como un elemento
en línea. Es un elemento en línea, pero se puede modificar el ancho y el alto. A su vez, se pueden incorporar
elementos al costado.
d) Flex. Indica la capacidad de un elemento flexible para alterar sus dimensiones y llenar el espacio
disponible. Los elementos flexibles pueden ser estirados para utilizar el espacio disponible proporcional a su
factor de crecimiento flexible o su factor de contracción flexible para evitar desbordamiento.
16. Overflow. Si hay contenido que sobresale de una caja, el overflow determinará cuál será el
comportamiento de la misma.
a) Inherit (valor por defecto). El contenido se sobresale de la caja y no queda bien.
b) Auto. El contenido no se sobresale de la caja y se incorpora un scroll (eje y).
c) Scroll. El contenido no se sobresale y se incorporan dos scroll (uno en cada eje) por más que no sean
necesarios.
d) Hidden. Si agregamos un scroll, se incorporan dos scroll (uno en cada eje) por más que no sean
necesarios, si queremos borrar uno, podemos incorporar overflow-x o u overflow-y con el valor hidden para
eliminar el scroll que no es necesario.
*Si aplicamos overflow, las imágenes nunca sobresalen de la caja. Se autoajustan.

17. Float. Aunque ya conocemos la propiedad position, que nos permite organizar la posición de elementos
dentro de una página web, esta propiedad no es lo suficientemente flexible como para lograr diseños
atractivos y que se visualicen correctamente en todo tipo de dispositivos. Vamos a estudiar el denominado
“posicionamiento flotante”, que amplía las posibilidades para organizar los elementos en la web. La
propiedad float posiciona una caja moviéndola todo lo posible a la izquierda o derecha de su posición
original. La principal característica del posicionamiento float es que el resto de elementos de la página se
adaptan para fluir alrededor de la caja flotante.

a) Left. El elemento se desplazará hacia la izquierda. Se desplazará dentro de su línea de posición y dentro
de su contenedor tanto como sea posible y que los elementos que vienen a continuación se situarán
rodeándolo (en este caso lo rodearán por la derecha, ya que el elemento estará completamente a la
izquierda). Los elementos anteriores no cambian su comportamiento.
b) Right. El elemento se desplazará hacia la derecha. Se desplazará dentro de su línea de posición y dentro
de su contenedor tanto como sea posible, y que los elementos que vienen a continuación se situarán
envolviéndolo (en este caso lo rodearán por la izquierda, ya que el elemento estará completamente a la
derecha). Los elementos anteriores no cambian su comportamiento.
c) None (valor por defecto). El elemento se comportará de la forma habitual dentro del flujo del documento
html. Si el float es none, decimos que no es flotante.

Texto Envolvente. El float no se suele utilizar mucho dado que lo que antes se resolvía con dicha
herramienta (la maquetación), ahora se hace con flex y grid, pero hay un uso del float que nos puede ayudar.
Sirve para envolver una imagen en texto. Se debe crear un div en el html, dentro del mismo, agregar la
imagen y escribir debajo, también dentro del div, el texto. Cabe destacar que el texto no debe estar dentro de
ningún subelemento del div. La imagen debe estar primero y, luego en el css, debemos incorporarle el float.
Se puede observar a continuación.

18. Pseudo-Elementos. Se añaden a los selectores y permiten añadir estilos a una parte concreta del
documento. Cabe destacar que los pseudo elementos se aplican sobre elementos.
a) Aplicables únicamente a elementos block o inline-block.
- ::First-letter. Sirve para modificar únicamente la primera letra. Por ejemplo, p::first-letter{}.
- ::First-line. Sirve para modificar únicamente la primera línea. Por ejemplo, p::first-line{}.
b) Placeholder. Sirve para modificar el placeholder de un input. Las propiedades aplicables son color y
background-color. Por ejemplo, input::placeholder{}.
c) ::Selection. Sirve para alterar lo seleccionado con el mouse. Por ejemplo, input::selection{}.
d) ::Before y ::After. Sirven para incorporar texto antes (before) y después (after) de un elemento. Son hijos
del elemento. Se aplican a elementos inline. Requieren la etiqueta content. No forman parte del DOM.

19. Pseudo-Clases. Se añaden a los selectores y especifican un estado especial del elemento seleccionado.
a) :hover. Sirve para modificar el estilo cuando está el mouse encima. Se suele aplicar a los navs. Se debe
añadir en el selector principal (el que no tiene :hover) la propiedad transition para determinar el tiempo de
transición. El valor de transition puede ser all 1s.
b) :link. Sirve para modificar un link que todavía no visitamos.
c) :visited. Sirve para modificar un link que ya visitamos.
d) :active. Sirve para modificar un elemento al ser presionado y dejar de ser modificado cuando deja de ser
presionado. Sirve para los menús.
e) :focus. Sirve para aplicarle un estilo a un elemento cuando está enfocado/seleccionado por el mouse. Se
utiliza para los inputs.
f) :lang. Sirve para modificar un elemento que tenga cierto lenguaje. Solo va a funcionar si, previamente, se
le agrega el atributo lang al elemento en el html. No se suele utilizar.

20. Object-Fit. Se aplica sobre etiquetas de imagen para modificar su resolución. No olvidar el overflow en
su contenedor.
a) Fill. Sirve para modificar el tamaño de la imagen para llenar el contenedor.
b) None. Sirve para que se usen las propiedades por defecto de la imagen.
c) Contain (valor por defecto). Sirve para que la imagen se ajuste al contenedor.
d) Cover. Sirve para que la imagen se ajuste al contenedor y recorte los bordes que no son ocupados por la
imagen. Es la de mayor utilidad.
e) Scale-Down. Sirve para que el css se quede con el valor con menor resolución entre contain, cover y
none.

21. Object-Position. Sirve para seleccionemos la parte de la imagen que queremos que se muestre al utilizar
el object-fit: cover.
a) Left-right-top-button.
b) PX-EM-%.
22. Cursor. Sirve para cambiar el color cuando nos situamos por encima de un elemento. Se puede encontrar
una lista de cursores en el siguiente link. https://www.w3schools.com/cssref/tryit.asp?
filename=trycss_cursor.

23.Colores. Se puede encontrar una lista de colores en el siguiente link.

https://www.mclibre.org/consultar/amaya/css/css-color.html.

a) Color name. Se definen los colores a través de su nombre. No se recomienda dado que, en distintos
navegadores, los colores pueden tener distintas tonalidades.
b) Hexadecimal.
c) RGB/RGBA (Red Green Blue Alfa). Alfa significa transparencia. Por ejemplo, {color: rgb(100,200,100)}
o {color: rgba(100,200,100,0.7). Los números de color van entre 0 (nada de ese color) y 255 (todo de ese
color) y los números de alfa van entre 0 y 1.
d) HSL/HSLA. No se suele utilizar.

24. Historia de la Maquetación de Páginas Web. Tablas > Float > Flexbox y Grid.

25. Flexbox. Consiste en un valor de la propiedad display. Sirve para maquetar las páginas web. Requiere de
dos elementos. Se necesitan cuatro conceptos básicos para trabajar con flexbox.

a) Flex container (contenedor de cajas flexibles). Contenedor. Se le debe aplicar la propiedad display: flex.
b) Flex ítem (cajas flexibles). Contenido. Son únicamente los hijos directos.

Ejes de Flexbox.

a) Main Axis (Y/Horizontal). Va de izquierda (main start) a derecha (main end).

b) Cross axis (X/Vertical). Va de arriba (cross start) hacia abajo (cross end).

Propiedades que se aplican al Flex Container. Son 6.

a) Display: flex (obligatoria). Se debe aplicar al flex container (contenedor) para que flexbox funcione.
Indica la capacidad de un elemento flexible para alterar sus dimensiones y llenar el espacio disponible. Los
elementos flexibles pueden ser estirados para utilizar el espacio disponible proporcional a su factor de
crecimiento flexible o su factor de contracción flexible para evitar desbordamiento. Para los diseñadores es
la mejor solución, la caja padre contiene cajas que se pueden colocar en cualquier dirección y tienen
dimensiones flexibles, se adaptan al espacio visible, con flex nos olvidamos de float y clear. El orden de los
elementos puede alterarse y ser diferente en el código HTML que en su representación visual. Si aplicamos
la propiedad display flex al contenedor de dos divs (que si a su contenedor le ponemos la propiedad display
block estarían uno arriba del otro), se situarían uno al lado del otro. Las alturas de cada div siempre van a ser
las mismas a pesar de que uno tengo más contenido que el otro. Flebox dimensiona el ancho de las cajas con
el objetivo de que la altura de ambas sea la misma. Por ende, no hay problemas de altura. No olvidar que a
las cajas se les debe dar width. Si agrego un min-width, en vez de width, al flex-item, me ocupa todo el
ancho.

b) Flex-direction. Sirve para especificar cómo colocar los objetos flexibles en el contenedor flexible
definiendo el eje principal y la dirección (normal o al revés).
- Row (valor por defecto). El contenido del flex container (flex ítems) se comporta como fila de izquierda a
derecha. Si queremos que se comporte como una fila, pero de derecha a izquierda, debemos utilizar row-
reverse.
- Column. El contenido del flex container (flex ítems) se comporta como columna de arriba hacia abajo. Si
queremos que se comporte como una columna, pero de abajo hacia arriba, debemos utilizar columna reverse.

c) Flex-wrap. Sirve para especificar si las cajas flexibles son obligadas a permanecer en una misma línea o
pueden fluir en varias líneas.
- No-wrap. Sirve para que las cajas flexibles sean obligadas a permanecer en una línea.
- Wrap. Sirve para que las cajas flexibles puedan fluir en varias líneas. Si la resolución se achica, la última
caja va hacia la próxima línea.
- Wrap-reverse. Sirve para que las cajas flexibles puedan fluir en varias líneas. Si la resolución se achica,
todas las cajas, menos la última, van hacia la próxima línea.

d) Flex-flow. Abrevia flex-direction y flex-wrap. Por ejemplo, flex-flow: column wrap;. La primera
propiedad sería flex-direction y la segunda propiedad sería flex-wrap. Se recomienda utilizar únicamente
cuando se vayan a modificar ambas propiedades.

e) Justify-content. Sirve para definir cómo el navegador distribuye el espacio entre y alrededor de los ítems
flex, a lo largo del eje principal de su contenedor.
- Center. Se centran las cajas.
- Space-arround. Distribuye los ítems uniformemente. Los ítems tienen el mismo espacio a su alrededor.
- Space-between. Distribuye los ítems uniformemente. El primer ítem al inicio, el último al final. Deja la
mayor cantidad de espacio entre las cajas.
- Space-evenly (main axis). Sirve para lo mismo que el space-around.

f) Align-items. Sirve para alinear en el cross axis (X/vertical). Se utiliza para cuando hay únicamente una
línea de flex ítems. Si se utiliza align-item y hay más de una línea, se aplicará únicamente a la primera. Por
ende, si hay varias, siempre sería mejor aplicar align-content y no align-items.
- Stretch (valor por defecto). Si no hay height, se ajusta a lo largo de toda la página.
- Center. Sirve para centrar en el cross axis. Antes no había forma de centrar verticalmente.
- Flex-start. Sirve para centrar al principio en el cross axis. Se diferencia al stretch debido a que, si no hay
height, no se ajusta a lo largo de toda la página.
- Flex-end. Sirve para centrar al final en el cross axis.
- Baseline (cross axis). Sirve para cuando hay un wrap-reverse y queremos tirarlo para abajo.
*Si hay más de una línea de flex-items, se debe utilizar la propiedad align-content en vez de align-items.

Propiedades que se aplican a los Flex Ítems. Son 8.

a) Align-self. Sirve para alinear en el cross axis, es decir, de manera vertical. Se mantiene en su columna,
pero va al punto del cross axis que nos interese.

Funcionamiento del Margin. El margin de una caja flexible se comporta de una forma distinta al margin
común.

b) Margin-(direction): auto. Se comporta de manera opuesta, por ejemplo, si aplicamos un margin-top: auto,
la caja irá hacia la parte inferior del contenedor. Si aplicamos un margin-left: auto, la caja irá hacia la
derecha del contenedor. Si aplicamos, al mismo tiempo, un margin-top: auto y un margin-bottom: auto, la
caja se centra. A su vez, si queremos darle los cuatro margins para centrar la caja en ambos ejes, solo
debemos darle margin: auto.

c) Flex-grow. Sirve para otorgar a una caja, o más, además de su espacio asignado, el sobrante. Por ejemplo,
si hay un renglón en el que hay 3 cajas (con min-width de 100px) y sobran 300, al añadir por ejemplo, flex-
grow: 1, se le otorga una parte del espacio sobrante a cada caja. Por ende, pasarían a medir 100px (min-
width) más 100px (sobrante 300px/3). Si queremos que el espacio sobrante se divida entre todas las cajas, la
propiedad debe estar en la class de todas las cajas, por ejemplo, en .flex-item{flex-grow: 1}, en cambio, si
queremos que el espacio sobrante se le otorgue a una sola caja, la propiedad debe estar en la class específica
de dicha caja, por ejemplo, en .box3{flex-grow: 1}. Si queremos repartir el sobrante entre, por ejemplo, 2
cajas de 4, la propiedad debe estar en la class específica de ambas cajas. A su vez, si queremos repartir más
sobrante a una caja que a otra, los valores deben ser diferentes, por ejemplo, 3 (75% del sobrante) y 1 (25%
del sobrante). Si se achica la resolución a menos del min-width por caja, la ventana tapará a la misma dado
que no se achicará más, en este caso, debemos agregar un flex-wrap: wrap para que se vaya al siguiente
renglón.

d) Flex-basis. Su función es la misma que la del width, pero con mayor prioridad.

e) Flex-shrink (lo contrario a flex-grow). Sirve para decir qué espacio va a ceder cada caja. Por ejemplo, si
hay 3 cajas con 100px de width, pero hay una resolución (espacio) de 600px, tendrán que ceder 100px cada
una para llegar a los 600px entre las 3 dado que el contenedor tiene la propiedad flex. La propiedad flex-
shrink determina cuánto va a ceder cada caja. Si le agrego a la caja 1, un flex-shrink: 2, significa que va a
ceder el doble, por ende, tendrá 250px de width, mientras que, la caja 2 y 3 tendrán 175px de width. La caja
1 cederá 150px (el dobe) y las cajas 2 y 3 cederán 75px (la mitad). Si a flex-shrink le ponemos el valor 0, la
caja no cederá nada.

f) Flex. Abreviatura de flex-grow, flex-shrink y flex-basis. Al menos, un parámetro es obligatorio.

g) Order. Sirve para lo mismo que el Z-Index, pero en el eje en el que apunta el axis (recordar que se puede
modificar hacia adónde apunta el main/cross axis con row-reverse o columna-reverse). Por ende, el
funcionamiento de order, siempre va a depender del lugar al que apunte el axis. Si apunta hacia la derecha,
el order 1 estará primero que el order 4, en cambio, si apunta a la izquierda, el order 4 estará primero que el
order 1. Si apunta hacia abajo, el order 1 va a estar arriba del order 4, en cambio, si apunta hacia arriba, el
order 4 va a estar arriba del order 1.

26. Grid. Consiste en un valor de la propiedad display. Sirve para trabajar a través de grillas. Se necesitan
seis conceptos básicos para trabajar con grid.
a) Grid container. Se refiere al contenedor que abarca todo, es decir, la misma definición que flexbox.
b) Grid cell. Se refiere a cada una de las divisiones del grid container. Cabe destacar que pueden ser tanto
cuadrados como rectángulos.
c) Grid área. Se refiere a grupos de celdas que seleccionamos. Cabe destacar que las áreas no están definidas
por defecto. Nosotros somos los que debemos determinarlas. El requisito principal de las áreas es que deben
ser consecutivas tanto horizontalmente como verticalmente.
d) Grid ítem. Se refiere a cada elemento. Cabe destacar que cada elemento puede ocupar una o más celdas,
incluso compartir la celda con otro elemento. A su vez, hay que tener en cuenta que los grid ítems son los
contenedores, es decir, los hijos directos de los grid container, por ejemplo, si dentro del grid container
tengo un p dentro de un div, el grid ítem es el div.
e) Grid tracks (row y column). Se refiere a las filas y a las columnas. La cantidad de grid tracks se obtiene
sumando las filas y las columnas.
f) Grid line (row line y column line). Se refiere a las líneas divisorias.

Propiedades que se aplican al Grid Container. Son 6.

a) Display: grid (obligatoria). Se debe aplicar al grid container (contenedor) para que grid funcione.
b) Grid-template-rows. Cantidad de filas a crear. Por ejemplo, si queremos crear 3 filas de 150px de alto, su
valor será 150px 150px 150px.
c) Grid-template-columns. Cantidad de columnas a crear. Por ejemplo, si queremos crear 3 columnas de
150px de ancho, su valor será 150px 150px 150px.
*Cabe destacar que si tengo 9 elementos y agrego 3 rows y 3 columns se organizarán en una grilla 3x3. Si
agrego 3 más, debo incorporar otro valor a grid-template-rows o a grid-template-columns dependiendo si
quiero que los 3 elementos nuevos sean filas o columnas.
d) Grid-row-gap (similar a margin). Distancia entre filas (no respecto al contenedor).
e) Grid-column-gap (similar a margin). Distancia entre columnas (no respecto al contenedor).
f) Grid-gap. Abreviatura (shorthand) de (d) y (e).

Propiedades que se aplican a los Grid Ítems.

a) Grid-row. Se aplica para determinar en qué row line va a empezar y en qué row line va a terminar. Por
ejemplo, si aplico grid-row: 1 / 3, empezará el ítem en la línea 1 (contenedor) y terminará en la 3, es decir,
obtendrá el espacio que tenía la celda que se encontraba debajo suyo.
b) Grid-column. Se aplica para determinar en qué column line va a empezar y en qué column line va a
terminar.
*Tip. Si nos confundimos con los valores, podemos incorporar la palabra span. Por ejemplo, con grid-row: 1
/ 3 le estamos diciendo al ítem que queremos que empiece en la row line 1 y termine en la row line 3, es
decir, que ocupe 2 columnas, pero lo podemos hacer agregando span, es decir, grid-row: 1 / span 2, en este
caso, le estamos diciendo al ítem que queremos que empiece en la row line 1 y ocupe 2 filas. El resultado de
ambos métodos será el mismo.
*Cabe destacar que si a dos ítems le damos el mismo grid-row, el segundo se pondrá al lado del primero, en
cambio, si a dos ítems le damos el mismo grid-column, el segundo se pondrá debajo del primero. Si no
queremos que esto sucede, debemos darle, por ejemplo, al ítem 1 un grid-row: 1 / 3 y, al segundo, un grid-
row: 3 / 5, es decir, continuar con el grid-row/columna en la line en la que terminó el ítem anterior.
*Grid-row y grid-column son shorthands se las siguientes 4 propiedades. Se pueden usar unas u otras. Por
ende, es lo mismo si escribo grid-row: 1 / 3 o grid-row-start: 1 y grid-row-end: 3.
c) Grid-row-start.
d) Grid-row-end.
e) Grid-column-start.
f) Grid-column-end.

Unidades “auto” y fr. Sirven para darle vida al Grid. Cumplen la misma función que flex-grow, es decir,
reparten entre filas o columnas (generalmente entre columnas) la distancia disponible. Por ejemplo, en el
caso de grid-template-columns, en vez de que su valor sea 150px 150px 150px, su valor podría ser 1fr 1fr
1fr o, si queremos que se estire una sola columna, 150px 150px 1fr.

Repeat. Sirve para no tener que repetir código. Por ejemplo, para crear filas, en vez de hacer grid-template-
rows: 150px 150px 150px 1fr;, podemos hacer grid-template-rows: repeat(3 , 150px) 1 fr;.

Grid Explícito e Implícito. El grid explícito (definido explícitamente) hace referencia a lo que se encuentra
dentro de nuestra grilla, por ejemplo, si creamos 9 ítems y hacemos un container de 3 filas y 3 columnas,
todos los ítems tendrán lugar, pero si agregamos, por ejemplo 2 ítems más, no lo tendrían. Por ende, los 2
ítems extra serían considerados grid implícito. Cabe destacar que los nuevos ítems incorporados fuera del
grid explícito ingresan como fila (luego veremos que los podemos transformar en columna). Hay una serie
de propiedades, las cuales se deben incorporar en el grid-container, para establecer el comportamiento del
grid implícito.
a) Grid-auto-rows (igual que el template). Especifica el tamaño de la nueva fila creada de forma implícita.
b) Grid-auto-columns (igual que el template). Especifica el tamaño de la nueva columna creada de forma
implícita.
c) Grid-auto-flow. Especifica el comportamiento que tendrán los nuevos ítems creados considerados grid
implícito.
- Row (default).
- Column.
- Dense. Sirve para rellenar espacios vacíos en el caso de que se produzca. Serán rellenados con el elemento
más cercano.

Grid Dinámico (estructura autoajustable). Hasta ahora, no hemos armado una estructura dinámica con grid.
Si queremos otorgarle dinamismo al container, debemos agregarle las siguientes propiedades. Todas van en
el repeat.
a) Minmax(). Nos permite establecer el máximo y el mínimo que va a medir un ítem. Por ejemplo, grid-
template-columns: repeat (3, minmax(100px, 1fr));. 100px representaría la altura y 1fr representaría la
anchura. A su vez, se podría reemplazar el 100px con min-content y el 1fr con max-content.
b) Min-content(). El tamaño del ítem se va a ajustar hasta ser el mismo que el del contenido de menor
tamaño que tenga dentro. Por, ejemplo, ajustarse hasta que quede una sola palabra por renglón. Por ejemplo,
grid-template-columns:repeat(3, min-content).
c) Max-content(). El tamaño del ítem se va a ajustar hasta ser el mismo que el del contenido de mayor
tamaño que tenga dentro. Por, ejemplo, ajustarse hasta que quede la frase completa en el renglón sin
cortarla. Por ejemplo, grid-template-columns:repeat(3,max-content).
d) Auto-fit. La propiedad la podemos usar dentro de la función repeat() en vez de poner numeración. Auto-
fit va a ajustar los elementos del grid hasta rellenar el contenedor. Se utiliza para hacer galerías.
e) Auto-fill. La propiedad la podemos usar dentro de la función repeat() en vez de poner numeración. Auto-
fill va a ajustar los elementos del grid hasta colocarlos en la grilla dejando un hueco libre o vacío en caso de
no rellenar todo el contenido. Se utiliza para hacer galerías.
*Se puede observar la diferencia entre auto-fill y auto-fit en el siguiente link.
https://www.youtube.com/watch?v=uBFEryQY1fU

Alineación y Control de Flujo. Se diferencia con Flexbox debido a que la alineación es dentro de cada celda
y no una alineación total del flex container. En otras palabras, cada ítem de Grid sería un flex-container.

Propiedades del Grid Container.

a) Alineación de TODOS LOS ÍTEMS dentro de cada celda. Por ejemplo, podría haber celdas 9x9 arriba a
la izquierda en un contenedor enorme. Si aplicamos estas propiedades, las celdas 9x9 seguirían arriba a la
izquierda, pero los ítems que tienen dentro se alinearían. En la imagen, cada cuadrado verde (celda), tendría
un ítem (o más) dentro y, al aplicar estas propiedades, la alineación se produciría DENTRO de cada
cuadrado verde (celda). Se mueve el ítem, pero no la estructura (cubo rubik).
- Align-items (verticalmente). Stretch (valor por defecto), start, center y end.
- Justify-items (horizontalmente). Stretch (valor por defecto), start, center y end.
- Place-items. Shorthand para align-items y justify-items.
*Me funciono al aplicarla dentro de los ítems y no dentro del grid container. Tuve que agregarle display:
grid-inline previamente.
b) Alineación de TODAS LAS CELDAS dentro del contenedor. Por ejemplo, podría haber celdas 9x9 arriba
a la izquierda en un contenedor enorme. Si aplicamos estas propiedades, todas las celdas 9x9 se moverían
juntas. En la imagen, se puede observar el desplazamiento respecto a la imagen previa. Cabe destacar que, si
las celdas entran exactamente dentro del contenedor, es decir, no hay espacio para que se muevan, ninguna
propiedad funcionará dado que no tendrán espacio hacia donde moverse.
- Align-content (verticalmente). Stretch (valor por defecto), start, center y end.
- Justify-content (horizontalmente). Stretch (valor por defecto), start, center y end.
*A su vez, ambas propiedades tienen lo mismos valores que flex: space-around, space-between y space
evenly.

Propiedades de Ítem.

c) Alineación de UNA SOLA CELDA dentro del contenedor. En las imágenes previas, se desplazaría un
solo cuadrado verde (celda) dentro del contenedor.
- Align-self (verticalmente). Stretch (valor por defecto), start, center y end.
- Justify-self (horizontalmente). Stretch (valor por defecto), start, center y end.
- Place-self. Shorthand. Aligne-self y justify-self.

Order. Su funcionalidad es la misma que en Flexbox.

Grid Área. Conjunto de celdas. Si queremos establecer áreas hay dos pasos que seguir.

a) Crear las áreas. Se crean en el grid-container con la propiedad grid-template-areas. Por ejemplo, grid-
template-areas:
“header header header”
“aside main main”
“aside main main”
“footer footer footer”
- Tamaño de las áreas. Si le queremos dar tamaño a dichas filas, debemos incorporar la propiedad grid-
template-rows. Por ejemplo, grid-template-rows: 1fr 1fr 1fr 1fr (se repite cuatro veces el 1fr debido a que
hay 4 filas).
b) Incorporar un elemento a cada área. Se incorpora con la propiedad grid-area en cada elemento. Por
ejemplo, .grid-header{grid-area:header}.
*Se puede trabajar sin las áreas directamente con grid-template-columns y grid-template-rows.

Nombrar Grid Lines. Al crear las filas o columnas en el container, se pueden nombrar. Por ejemplo, grid-
template-rows:
[first-line]
150px
[second-line]
150px
[third-line]
150px
Luego, ítem por ítem, en su grid row (o column si así fuera), podríamos escribir, en vez de grid-row: 1 / 3 ,
grid-row: first-line / third-line.

Grid Shothands. No se recomiendan.

a) Grid-template: row / columns. No olvidar que va en el grid-container.
b) Grid-template: área/unidad.
c) Grid. Abrevia absolutamente todo.

27. Responsive Web Design. Consiste en una técnica para adaptar el contenido de una página web a las
resoluciones de diferentes dispositivos. Su objetivo es lograr que la página web se vea bien sin importar el
dispositivo en el que se abra.

Se debe complementar con JavaScript. Hay dos tipos de metodologías al trabajar con responsive web design.
a) Mobile first. Se crea la web, primero para mobile y luego se la adapta a resoluciones mayores.
b) Desktop first. Se crea la web, primero para escritorio y luego se la adapta a resoluciones menores.
c) Content first. Se arma el contenido y luego se estructura. No es responsive como tal.

Media Queries. Consiste en un módulo que permite aplicar el RWD. Se utiliza @media en consultas de
medios para aplicar diferentes estilos para diferentes tipos/dispositivos de medios. Aplicaríamos distintos
estilos dependiendo de las siguientes características que pueden ir variando de dispositivo a dispositivo.
a) Ancho y alto de la ventana gráfica.
b) Ancho y alto del dispositivo.
c) Orientación (la tableta/teléfono está en modo horizontal o vertical?).
d) Resolución.

Clases de Media Queries.

a) All. Apto para todos los dispositivos.
b) Print. Destinado a material impreso y visualización en el modo de vista previa de impresión.
c) Screen. Destinado principalmente a pantallas. Será la que estudiemos.
d) Speech. Destinado a sintetizadores de voz.

Incorporar RWD en CSS.

a) Incorporar la etiqueta meta viewport en HTML. <meta name="viewport" content="width=device-
width, initial-scale=1.0">
b) Incorporar en CSS el RWD. Por ejemplo, @media only screen and (max-width: 800px){}. En dicho caso,
le solicitamos al CSS que, cuando la resolución de la pantalla sea inferior a 800px realice ciertos cambios,
los cuales aclaramos dentro de las {}. Los breakpoints más comunes son los siguientes.
- Desktop. @media screen and (min-width: 992px) { … }
- Tablet. @media screen and (min-width: 768px) and (max-width: 991px) { … }
- Celular. @media screen and (max-width: 767px){ … }

28. Transiciones. Consiste en el cambio del estado de un elemento a otro. Por ejemplo, si un elemento
cambia de azul a rojo. Siempre vamos a necesitar un evento que dispare la transición, por ejemplo, un hover
y un transform.
a) Transition-property. Se establece cuál es la propiedad que se va a alterar. Su valor puede ser, por ejemplo,
background. A su vez, podríamos establecer el valor all, pero no se recomienda dado que consume muchos
recursos.
b) Transition-duration. Se establece la duración de la transición. Su valor puede ser, por ejemplo, 1s.
*Si o si deben estar las primeras dos propiedades.
c) Transition-delay. Se establece el delay con el que iniciará la transición. Su valor puede ser, por ejemplo,
1s.
d) Transition-timing-function. Se establece el ritmo de la aceleración del cambio, es decir, su función (curva
en sentido matemático). Su valor puede ser, por ejemplo, linear, ease (valor por defecto), ease-in, ease-out-
ease-in-out, step-start, step-end, steps (in,start/end) o initial.
e) Transition. Shorthand.

29. Animaciones. Consiste en el cambio del estado de un elemento al igual que en las transiciones, pero
definiendo frame por frame. Se debe incorporar @keyframes nombre de la animación{} y luego hay dos
formas de armar la misma.

Animación From-To. Animación por Porcentaje.

@keyframes desplazamientocaja{ @keyframes desplazamientocaja{
from{propiedades iniciales} 0%{propiedades iniciales}
to{propiedades finales} 25%{propiedades al 25%}
50%{propiedades al 50%}
100%{propiedades finales}

Incorporar Animaciones. Luego de armar el @keyframes, debemos incorporar en el elemento al que

queremos que se le aplique la aplicación, la propiedad animation-name. En el caso del ejemplo, sería
animation-name: desplazamientocaja.

a) Animation-name. Se incorpora la animación al elemento a través del nombre que se le otorgó en

@keyframes.
b) Animation-duration. Se detetermina la duración de la animación. Su valor puede ser, por ejemplo, 1s.
c) Animation-delay. Se establece el delay con el que iniciará la animación. Su valor puede ser, por ejemplo,
1s.
d) Animation-timing-function. Se establece el ritmo de la aceleración del cambio, es decir, su función (curva
en sentido matemático). Su valor puede ser, por ejemplo, linear, ease (valor por defecto), ease-in, ease-out-
ease-in-out, step-start, step-end, steps (in,start/end) o initial.
e) Animation-iteration-count. Se establece la cantidad de veces que se repite la animación. Se ingresar, como
valor, un número o la palabra infinite para que se repita en loop.
f) Animation-direction. Se establece el sentido en el que se ejecuta el keyframe. Por ejemplo, si empieza en
el punto A y termina en el punto B, se puede determinar, a través del valor reverse, que empiece en el punto
B y termine en el punto A. A su vez, se puede determinar, a través del valor alternate, que el efecto vaya y
vuelva. Por su parte, también existe el valor alternate-reverse, que hará lo mismo que alternate, pero
iniciando desde el punto B.
g) Animaltion-fill-mode. Se establece el frame final de la animación. Sus valores pueden ser none, forwards
(se queda como finaliza), backwards, both, initial o inherit. El valor forwards es el que más nos puede servir,
pero lo que hay que tener en cuenta es que la finalización va a depender del valor establecido en la
propiedad animation-iteration-count. Otro de los valores que nos puede servir es both.

Diferencia entre Transición y Animación. Una transición ocurre cuando un elemento pasa de un estado a
otro a partir de un evento, como por ejemplo :hover . Por lo tanto tendríamos 2 estados. Un estado inicial y
un estado final. Una animación, al contrario, puede tener; cuatro, cinco, veinte o tantos estados como
deseemos teniendo un mayor control sobre ella.

30. Cubic Bezier. Consiste en un valor del animation-timing-function. Se puede establecer la curva en el
siguiente link https://cubic-bezier.com/#.17,.67,.83,.67. Luego, al establecer, la propiedad animation-timing-
function, incorporar el valor obtenido del link. Por ejemplo, animation-timing-function: cubic-bezier(valor
obtenido en el link).

31. Transform. Sirve para transformar objetos. Se DEBEN utilizar transformaciones a la hora de crear
transiciones y animaciones dado que transform afecta únicamente al elemento y no rompe el layout. Hay
varios tipos de transformación.
a) Trasladando al elemento. Transform: translateX(x), translateY(y) o translate(x-y). Si usamos porcentajes,
son porcentajes relativos al elemento, es decir, si trasladamos un objeto 100%, se traslada por el mismo
tamaño que tiene dicho objeto. Se recomienda para animar.
b) Modificando el tamaño del elemento. Transform: scaleX(x), scaleY(y) o scale (xy - x,y). Si establecemos
la escala 1, queda igual, mientras que, si establecemos la escala 2, su tamaño se duplica.
c) Rotar al elemento. Transform: rotateX(angleunit), rotateZ(angleunit), rotate(angleunit) o
rotate3D(angleunit). El valor angle unit puede estar expresado en deg, grad, rad o turn.
d) Estirar al elemento en un eje.. Transform: skew(angleunit).
*Se pueden encontrar más propiedades en el siguiente link
https://www.w3schools.com/cssref/css3_pr_transform.asp.
*Se puede agregar una sola vez la propiedad transform y luego ir agregando todos los valores. Se puede
incorporar en @keyframes o :hover.

32. Clip Path. Sirve para darle formas complejas a los elementos. Se incorpora, en el elemento, a través de la
propiedad clip-path. Se pueden obtener formas en el siguiente link https://bennettfeely.com/clippy. Por
ejemplo, nos puede facilitar hacer triángulos, hexágonos, octágonos, entre otras.

33. Background.
a) Background-color. Sirve para dar color al fondo.
c) Background-image: url(). Sirve para incorporar una imagen al fondo a través de una URL.
c) Background-size. Si incorporo una imagen, sirve para lo mismo que object-fit. Sus valores pueden ser x,
y, auto, cover y contain. El valor que más nos va a servir es cover. A su vez, si no utilizamos cover y se
repite la imagen, podemos modificarlo desde la propiedad background-repeat.
d) Background-clip. Sirve para decir desde donde se va a mostrar la imagen. Recorta la imagen. Sus valores
pueden ser border-box, padding-box y content-box.
g) Background-origin. Sirve para lo mismo que el background-clip, pero sin cortar la imagen. No recorta la
imagen. Sus valores pueden ser border-box, padding-box y content-box.
e) Background-position. Sirve para posicionar el background dentro del contenedor. Si ocupa todo el
contenedor, de nada servirá moverlo. Se deben incorporar dos valores: top-right-bottom-left-center + top-
right-bottom-left-center.
f) Background-attachment. Sirve para determinar si la posición de la imagen de fondo será fija dentro de la
pantalla o se desplazará con su bloque contenedor. Sus valores pueden ser scroll, fixed o inherit.

34. Variables. Consisten en espacios almacenados en la memoria.

a) Globales. Se pueden utilizar en todo el CSS. Se definen en css con :root{--nombredelavariable:valor;}.
Por ejemplo, :root{--color-rojo:#f40;}. Luego, cada vez que necesitemos ese color, podemos escribir color:
var(--color-rojo); y se pintará del color #f40. Son de gran utilidad, por ejemplo, al elegir cierto tono de azul
para usarlo en distintas partes del CSS.
b) Locales. Se pueden utilizar únicamente en el elemento dentro del que son creadas. Se definen dentro del
elemento directamente escribiendo --color-rojo:#f40;. Cabe destacar que únicamente funcionarán dentro de
dicho elemento. No tienen mucha utilidad.

35. Filtros. Se utiliza la propiedad filter y sus valores pueden ser los siguientes.
a) None.
b) Blur(px).
c) Brightness(0-1).
d) Contrast (%). No funciona si no hay un background-color.
e) Drop-shadow(medidas).
f) Grayscale (%).
g) Hue-rotate(deg).
h) Invert (%).
i) Opacity (%).
j) Saturate (%).
k) Sepia (%).
l) Url(“filters.svg#filter-id”).
m) Box-shadow y drop shadow.

Se pueden probar todos los filtros en el siguiente link https://cssgenerator.org/filter-css-generator.html.

36. Direction. Similar a text-align. Sus valores son ltr (valor por defecto), rtl, initial e inherit.

37. Letter Spacing. Sirve para determinar el espaciado entre las letras. Su valor puede ser, por ejemplo, 5px.

38. Scroll Behavior. Sirve para modifica la intensidad del desplazamiento del scroll. Se aplica en el body.

39. User Select. Sirve para prohibirle al usuario seleccionar el texto. Se debe incorporar user-select: none.

40. Text Shadow. Sirve para incorporarle sombra al texto.

Generadores. La mayoría de las propiedades tienen generadores en internet que nos permiten modificar
formas, tamaños, estructuras, animaciones, transformaciones, entre otras cosas. Los desarrolladores suelen
utilizarlos dado que facilitan el trabajo.
Aclaración Final. Se torna imposible explotar CSS al 100% sin JavaScript dado que no se puede utilizar de
manera dinámica.