UNIDADES DE MEDIDAS EN CSS

Vista previa del material en texto

UNIDADES DE MEDIDAS EN CSS
UNIDADES ABSOLUTAS
cm: Aumenta el tamaño de nuestro texto o elemento en centímetros
mm: Aumenta el tamaño de nuestro texto o elemento en milímetros
in: Aumenta el tamaño de nuestro texto o elemento en pulgadas (1in = 96px = 2.54cm)
px: Aumenta el tamaño de nuestro texto en pixeles (Dependiendo del dispositivo, este elemento se clasifica también en Unidades Relativas. Aunque también depende de la versión de CSS que se maneje)
pt: Aumenta el tamaño de nuestro texto en puntos (1pt = 1/72 de 1in)
pc: Aumenta el tamaño de nuestro texto en picas (1pc = 12 puntos aprox)
UNIDADES RELATIVAS
em: Relativo al tamaño de fuente de un elemento. Si, por ejemplo, utilizamos 3em (font-size: 3em); mi texto aumentará 3 veces su tamaño en relación al tamaño que se esté utilizando por defecto.
ex: Aumenta el tamaño de mi letra en cuanto a su altura.
Rem: Es igual a (em) con la diferencia de que este actúa en la raíz. O sea, en la letra que esté utilizando por defecto.
MARGIN
Agrega espacio entre los elementos de la pagina web. Muchas 
etiquetas ya poseen una margen por defecto, la cual se
Puede sobrescribir. Ejemplo: los encabezados(h1, h2,…), 
los párrafos(p), etc. Ejemplo:
Margen superior .elemento { margin-top: 1rem; } 
Margen derecho .elemento { margin-right: 2rem; }
Margen inferior .elemento { margin-bottom: 3rem; }
Margen izquierda .elemento { margin-left: 4rem; } 
Define varios lados de la margen
.elemento { /* Todos los lados */ margin: 5rem; /* Arriba y abajo: 6rem Derecha e izquierda: 1rem */ margin: 6rem 1rem; /* Arriba: 6rem Derecha e izquierda: 3rem Abajo: 1rem */ margin: 6rem 3rem 1rem; /* Arriba: 1rem Derecha: 2rem Abajo: 3rem Izquierda: 4rem */ margin: 1rem 2rem 3rem 4rem; } 
PADDING
Añade relleno entre el elemento y su contenido. ocupa espacio y aumenta la anchura o altura del elemento.
Relleno superior: .elemento { padding-top: 1rem; }
Relleno derecha: .elemento { padding-right: 2rem; }
Relleno inferior: .elemento { padding-bottom: 3rem; }
Relleno izquierdo: .elemento { padding-left: 4rem; }
Padding: permite definir varios lados en una sola línea: .elemento { /* Todos los lados */ padding: 5rem; /* Arriba y abajo: 6rem Derecha e izquierda: 1rem */ padding: 6rem 1rem; /* Arriba: 6rem Derecha e izquierda: 3rem Abajo: 1rem */ padding: 6rem 3rem 1rem; /* Arriba: 1rem Derecha: 2rem Abajo: 3rem Izquierda: 4rem */ padding: 1rem 2rem 3rem 4rem; }
BORDER
Crea bordes al rededor de un elemento.
.elemento { /* border: [tamaño] [estilo] [color]; */ border: 1px solid black; }
Borde arriba .elemento { /* border-top: [tamaño] [estilo] [color]; */ border-top: 1px solid black; }
Borde derecha .elemento { /* border-right: [tamaño] [estilo] [color]; */ border-right: 1px solid black; }
Borde abajo .elemento { /* border-bottom: [tamaño] [estilo] [color]; */ border-bottom: 1px solid black; }
Borde izquierda .elemento { /* border-left: [tamaño] [estilo] [color]; */ border-left: 1px solid black; }
Tamaño del borde .elemento { border-width: 2rem; }
Estilo del borde .elemento { /* Más utilizados */ border-style: solid; border-style: none; /* Otros */ border-style: hidden; border-style: dotted; border-style: dashed; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; }
Color del borde .elemento { border-color: orange; }
Redondear las esquinas .elemento { border-radius: 4rem; }
Imagen personalizada .elemento { border: 4rem solid; border-image: linear-gradient(#f6b73c, #4d9f0c) 1; }