CSS

Niveles de jerarquía

1. ¡important
2. Estilos en línea
3. Identificadores
4. Clases, pseudoclases, atributos
5. Elementos y pseudoelementos

Para modificar un elemento por id, se usa el # en CSS y si se hace por clase se hace con un .

Metodologia BEM

Basarse en las clases para saber que estamos usando

Se utiliza por bloques y se pone la clase del bloque, dos guiones bajos y despues el tipo de elemento que
es

Para normalizar los css se busca normalize css en google, se descarga rel archivo de css y despues se
guarda y se importa en el head del html

Se deben de hacer ciertas configuraciones. La primera, anadir en el selector img un max-width: 100%

Y despues a todos los elementos hacer un box-sizing: border-box con un padding y un margin igual a 0

Teoria de cajas

La propiedad display de los elementos nos ayuda a definir tipo en línea o en bloque de los mismos, esto
es, su tama;o horizontal respecto a la pantalla. Los elementos de bloque tendrán el ancho de la pantalla,
mienras que los de enlinea solo tendrá el ancho de lo que tiene el contenido.
Propiedades de caja

Padding

Distancia entre el borde d ela caja y el texto

Margin

Distancia exterior entre borde de las cajas

Hay un box model que comprende

a. Content : se modifica con el line-height

b. Padding : se modifica con el padding
c. Border: se modifica con el border
d. Margin: se modifica con el margin

Pseudoelementos

Son elementos que no forman parte del DOM (Modelo de objeto de documento). Se escriben en el
archivo de CSS como selector de la siguiente manera:

.nombre_clase::nombre_pseudoelemento

Lista de pseudoelementos:

a. First-line ejemplo de descripción en CSS: .text::first-line

b. First-letter

Los pseudoelementos que requieren de la etiqueta “content” no forman parte del DOM.

c. Placeholder: lo que se escurbe dentro de un input text o password

d. Selection: se genera cuando se selecciona algo

Pseudoclases

Son escuchas para una acción, algunos ejemplos son los siguientes:
 a. :hover
b. :link
c. :visited
d. :active
e. :focus
f. :lang

Object-fit

Utilizado para imágenes y tiene varios valores, que son los siguientes:

a. Contain, valor por defecto, hace que las resoluciones de la imagen se ajusten al contenido
b. Cover: no crea márgenes a los lados de la imagen u objetos dentro de un contenedor
c. None
d. Scale-down

Object-position

Nos ayuda a establecer la posición de la imagen dentro de un contenedor tienes las propiedades de top,
bottom, right y left

Grid

Grid-container es todo el contenedor de la grilla o grid

Grid-item: son todos los elementos que están dentro de grid-container

Grid-cell: son las celdas de cada una de las grillas

Grid-track: 2 tipos (column y row)

Grid-area: área definidas por el programador

Grid-line: son las líneas divisorias de las columnas y de las filas

Propiedades

Grid-template-rows (se aplica a los grid-container) cuantas filas queremos que haya

Grid-template-cols (se aplica a los grid-container) cuantas columnas queremos que haya

Grid-column (especificar cuantas celdas ocupa un grid-item)

Grid-row lo mismo que grid-column pero con las filas

Podemos usar el “span” para especificar el numero de filas o columnas que queremos que ocupe el grid-
item para no tener que contarlas

Hay una función repeat() en css que recibe dos parámetros, el primero, el numeor de veces a repetir y el
segundo lo que queremos repetir

Grid-explicito y grid-implicito
Para poder describir las cualidades de las filas automaticas de un grid-implicito usamos las siguientes
propiedades:

a. Grid-auto-rows: para modificar las propiedades de las filas implícitas (las que se generan
automaticamente)
b. Grid-auto-columns: lo mismo pero con columnas

Con la configuración predeterminada, al hacerse un grid implícito, se crearan filas en lugar de columnas,
para cambiar esta configuración usamos:

a. Grid-auto-flow: column;

Si existen espacios vacios dentro de una caja grid podemos usar el comando

a. Grid-auto-flow: dense;

Para rellenar los espacios vacios

Grid dinámicos

Algunas funciones son el

Max-content y min-content

Asi como minmax()

Generalmente se utilizan en los repeat

Justify-items: center  esto centraliza el texto de los grid-items

Con start en la variable de justify-items se posicionan al principio y con end se posicionan al final

Con la propiedad align-items se hace lo mismo pero verticalmente usando start, center o end el valor
por defecto es stretch.

Con las propiedad justify-content: start, center, end se modifica la posición de las columnas en el grid-
container

Con la propiedad align-content: start, center, end se modifica la posición de las filas del grid-container y
se pueden utilizar propiades de los flex como : space-around, space-between y space-evenly

Con la propiedad align-self, se modifican los ítems de la grilla para start, center o end asi mismo con la
propiedad justify-self.

Place-self se utiliza para shorthand de align-self y justify-self

Order es como un z-index pero a la dirección que apunten los elemtnos del grid-container

Grid-area

Son conjuntos de celdas que están una enseguid a ala otra

Responsive Desing

Estructuras flexibles
Media queries

a. Ancho y alto de la ventana gráfica

b. Ancho y alto del dispositivo
c. Orientación
d. Resolución

4 tipos de media queries:

1. All (para todos los dispositivos)

2. Print (destinaod a material impreso)
3. Screen (destinado principalmente a pantallas)
4. Speech (destinado a sintetizadores de voz)

Su sintaxis es la siguiente:

@media tipo_media AND (condición)

Transition

Propiedad que nos permite hacer transacciones entre los elementos

Las propiedades de transition son las siguientes:

a. Transition-property: property/ies, all, none

b. Transition-duration: duration/s
c. Transition-delay: delay/s
d. Transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|
steps(int, start|end)|initial|inherit;
e. Transition:

Las propiedades transition-property y la transition-duration necesitan si o si un valor

Animaciones

Parecidas a las transiciones

Es necesario que se utilice la propiedad

@KeyFrames nombre{

From{

To{

Despues se debe de asignar a un ítem con la propiedad:

Animation-name: nombre;

Y posteriormente se puede establecer la duración con la propiedad

Animation-duration: 5s

Existe otra propiedad para establecer cuantas veces se va a repetir la animación

Animation-iteration-count: infinite

Existe otra propiedad para cambiar la dirección de la animación, esta es la siguiente:

Animation-direction: reverse o alternate o alternate-reverse

Hay otra propiedad que define el estado final de la animación, esta es:

Animation-fill-mode: none o normal, backwards, forwards

El forwards indica que se queda como la ultima posición

Cubic-bezier es una curva que modifca el tiempo de la animación o de la transición.

Transform es una propiedad que nos permite tranformar el objeto

Esta el traslate para trasladarlo en los jees, x, y o z

a. Transform: traslateX(10px o 100%)

b. Transform: traslateY(10px o 100%)
c. Transform: traslate(x, y)

Esta el scale para escalarlo

a. Transform: scale(2)
b. Transform: scaleX(lo que sea)
c. Transform: scaleY(lo que sea x2)

Lo podemos concatenar con un transition de la siguiente manera

a. Ponemos en el selector de css transition: transform 1s y en la acción, por ejemplo del hover,
transform: scale(2) traslate(2)

Lo podemos hacverde ladito con la propiedad skew

a. Transform: skew(10deg)

Con clip-path podemos darle la forma que queramos de acuerdo al código que se genera en internet

Ejemplo

a. clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Existe la propiedad filter sirve para aplicar filtros a las imágenes, tiene los siguientes valores:

a. blur(px)
b. brightness(0-1)
c. contrast(number or %)
d. drop-shadow(medidas)
e. grayscale(%)
f. hue-rotate(deg)
g. invert(%)
h. opacity(%)
i. satúrate(%)
j. sepia(%)
k. url(“filters.svg#filter-id)

la propiedad scroll-behavior:smooth al dársela al body, hace que, por ejemplo, cuando hacemos un
enlace que nos rediriga a una parte mas debajo de la página, lo haga de manela suave y con la
aparición de la barra de scroll al lado derecho.