Cascading

Style
Sheets

Selectores:

• Id
• Clase
• Tag

Medidas Relativas: em

Por defecto 1em = 16px

Heredado:

.contenedor {
margin: 20px;
padding: 10px;
}
.h2 {
margin: 2em; /*(= 40px)*/
padding: 5em; /*(=50px)*/
font-size: 1em; /*(=16px)*/
}
Propiedades del texto:

• font-size
• font-family
• line-height --> Tamaño de la caja
• font-weight
• font-stretch
• font-variant --> caps, Ejemplo EJEMPLO

Normalize:

Hoja de estilos que cambia los valores por defecto del navegador,
ejemplo: Google pone un margin por defecto y normalize lo deja en
0px.

Cajas:

• Block- Ocupa toda la página.

• Inline- Se ajusta al contenido.

Padding:

Distancia entre el contenido y los bordes de la caja.

tag {top right bottom left;}
height: Altura de la caja.

width: Ancho de la caja.

margin: Distancia entre dos cajas.

Border:
border-weight

border-style

border-color

border: weight style color;

border-radius que tan redondeado está

Opacity: transparencia del objeto (del 0 al 1)

Position:

• Static: default.
• Relative: Adquiere propiedades: Top, Right, Left, Bottom.
Se puede mover, pero sin afectar al resto de elementos, se
superpone.
• Absolute: Es igual al relative, pero pierde el espacio reservado
en la página (DOM). El punto de referencia es el borde de arriba
de la página.
• Fixed: Es igual al absolute, pero el elemento se fija en la
pantalla sin importar el scroll.
• Sticky: El espacio en el DOM se conserva y cuando se scrollea y
queda tocando el borde de arriba se queda fijada a ahí y se
pega.

Display:

• block
• inline
• inline-block --> Es como un inline pero se puede cambiar el
tamaño
• etc

Overflow:

• Visible: Se superpone a el resto del contenido si el contenido se

desborda.
• Hidden: No se muestra el contenido que se desborde.
• Scroll: Pone un scroll si el contenido se desborda.
Float:

• Left
• Right
• None

Pseudo-Elementos:

− ::first-line --> selecciona el contenido del 1 reglón, se adapta al

tamaño.
− ::first:letter --> selecciona la primera letra.
− ::placeholder --> selecciona el placeholder de un input.
− ::selection --> afecta la selección de un texto
− tag::before --> Son hijos del tag, no forma parte del DOM,
necesita el atributo content donde dice que texto se le agrega
anterior al tag.
− tag::after --> es igual al ::before pero se le agrega después al
tag.

Pseudo-Clases:

− tag:hover --> afecta a un elemento cuando esta sobre el mouse.

− a:link --> cambia un link todavía no visitado por el usuario.
− a:visited --> cambia un link todavía ya visitado por el usuario.
− tag:active --> cambia un tag cuando este está apretado.
− input:focus --> cambia un input cuando esta seleccionado.

Object-fit: En imágenes
 • Contain: Por defecto, se ajusta al contenido dejando márgenes
si es necesario.
• Cover: se ajusta dejando al máximo tamaño posible dejando
partes sin verse.
• None: Deja el tamaño original de la imagen.
• Scale-Down: si contain es más chico que none usa contain pero
si no al revés.

Grid (Grilla en Español):

display: grid;
Definir Rows / Columns:

grid-template-columns: 150px 150px 150px (crea 3 columnas de

150px), también se puede poner repeat(3, 150px).

También se puede poner solo en las columnas en vez de px un 1fr

que completa el espacio que sobra.

grid-gap: Distancia entre celda, funciona como margin.

En los elementos se tiene que especificar en de que grid line a cuál se

ubica el elemento. Ejemplo:

.header {
grid-column: 1 / 3; /* el header va a ir de la
column line 1 a la 3 */
grid-row: 2 / span 1; /* el header va a ir de la
row line 2 y va a ocupar una línea */
}

Transitions:

transition: propiedad segundos, propiedad2 segundos2;

Ejemplo:

.div {
background-color: red;
color: green;
transition: background-color 2s;
}
.div:hover {
background-color: white;
color: blue;
}

En el ejemplo anterior cuando el usuario pasa el cursor por encima el

color de fondo va a cambiar en 2 segundos, mientras que el color de
la letra cambia instantáneamente porque no está en el transition.
Animaciones:

.img{
animation: 3s infinite animacion2;
}

@keyframes animacion1 {
from {
left: 0px;
}
to {
left: 200px;
}
}

@keyframes animacion2 {
0% {
width: 100px;
}
20% {
width: 10px;
}
100% {
width: 600px;
}
}

Transform:

• scale(1)
• translate(px)
• skew(deg)
• rotate(deg)
• perspective(px)
• matrix(1.0)
Clip-Path:

Recorta elementos con formas geométricas.

https://bennettfeely.com/clippy/