Índice:

1. Introducción
2. Selectores
3. Formato de Texto
4. El modelo de caja
5. Layouts
6. Media Querys
7. Animaciones

Tipos de cajas

display:

[ inline | inline-block | block | none ]

Tamaño

width:

height:

¿qué pasa con el contenido?

¿qué pasa con el contenido?

desborde

overflow:

[ visible | hidden | scroll | auto ]

overflow: hidden;

overflow: auto;

margenes externos

margin:

4 valores: arriba derecha abajo izquierda

2 valores: arriba-abajo derecha-izquierda

margin-top: | margin-right: | margin-bottom: | margin-left:

TIP

Centrar horizontalmente un bloque

margin: auto

margenes internos

padding:

4 valores: arriba derecha abajo izquierda

2 valores: arriba-abajo derecha-izquierda

padding-top: | padding-right: | padding-bottom: | padding-left:

Bordes

border:

color estilo tamaño

border-top: | border-right: | border-bottom: | border-left:

Bordes con imagenes

Contorno

outline:

color estilo tamaño

Separación entre borde y outline

outline-offset:

Esquinas

border-radius:

radioHorizontal/radioVertical

arriba-izq arriba-der abajo-der abajo-izq

Color

background-color:

Colores solidos

Fondo con imagen

background-image:

url( )

Configuración:

background-repeat: | background-attachment: | background-position:

background-clip: | background-origin: | background-size:

Fondo con Degrade

background-image:

linear-gradient( )

radial-gradient( )

Sombras

box-shadow:

hacia afuera: Por defecto

hacia adentro: inset

Sombras

box-shadow:

offset-x | offset-y | blur-radius | spread-radius | color

<style>
	.afuera { box-shadow: 0 0 30px 5px black; }
	.adentro { box-shadow: inset 0 0 30px 5px black; }
</style>
						

Sistemas de diseño

Material Design

HIG

Fluent Design System

Atomic design