Lenguaje de
Marcas:
Introducción CSS3
2024-2025
Unidades de medida
El tamaño de los elementos de una web se puede expresar en unidades absolutas y relativas.
Unidades absolutas
Las unidades absolutas mantienen su aspecto y se visualizan siempre igual independientemente de
las características del dispositivo.
px Píxeles
in Pulgadas (1 pulgada = 2.54 cm)
cm Centímetros
mm Milímetros
pt Puntos (1 pt = 1/72 pulgadas)
pc Picas (1 pica = 12 puntos)
Unidades de medida
Unidades relativas
Las unidades relativas se ajustan a cada tipo de dispositivo ya que dependen de la resolución de
cada pantalla.
Relativo al tamaño de la fuente del elemento ( 2 em significa 2 veces el tamaño de
em
la fuente actual)
% Porcentaje (relativo al elemento padre)
Medidas relativas de acuerdo al viewport 1vh = 1% de la altura del viewport 100vh
vh y vw
= altura del viewport
Flexible Grid Units (fr) Se utiliza en Grid Layout y representa una fracción del
fr
espacio disponible en un contenedor
Unidades de medida
Usos de unidades
Normalmente es recomendable usar unidades relativas en la medida de lo posible, ya que mejora
la accesibilidad de la página web y permite que los documentos se adapten fácilmente a cualquier
medio.
Unidad em
Es especialmente útil para establecer tamaños proporcionales al tamaño de fuente. Aunque no hay un
criterio definido, el organismo W3C, recomienda el uso de la unidad em para indicar el tamaño del
texto.
El tamaño de los ems se establece en base al tamaño que tenga definido el navegador.
Usualmente el tamaño de una fuente por defecto en los navegadores es de 16px. Por tanto,
tendríamos que 16px = 1em y podríamos definir la siguiente conversión entre unidades.
Unidades de medida
px em %
12 0,75 75
14 0,875 87,5
16 1 100
18 1,125 112,5
20 1,25 125
La unidad REM (rem) es muy útil en diseño web. A diferencia de EM, que se basa en el tamaño de
fuente del elemento padre, REM toma como referencia el tamaño de fuente del elemento raíz
(normalmente el <html>). Esto permite mantener un diseño más coherente, ya que todos los elementos
escalan en función del tamaño de la fuente raíz
Unidades de medida
Píxeles (px)
Unidad común que representa un punto en la pantalla. Se usa para tamaños fijos, permitiendo control
preciso en diseños estáticos.
Porcentaje (%)
Indica una proporción relativa al tamaño del contenedor padre, ideal para diseños fluidos y
adaptativos.
Viewport Width (vw) y Viewport Height (vh)
Unidades que representan un porcentaje del ancho o alto de la ventana del navegador, útiles en
diseños responsivos.
Unidades de Grilla Flexible (fr)
Usadas en Grid Layout, representan fracciones del espacio disponible, facilitando la distribución
flexible entre elementos.
Unidades de medida
Unidades vh y vw en CSS
En CSS, las unidades vh y vw son unidades de medida relativas que se basan en el tamaño de la ventana de
visualización del navegador (viewport height y viewport width).
• vw (Viewport Width): Representa un porcentaje del ancho de la ventana. 1vw equivale al 1% del ancho del
viewport.
▪ Por ejemplo, si el ancho de la pantalla es de 1000 píxeles, 1vw = 10 píxeles.
▪ 50vw equivale al 50% del ancho de la pantalla.
• vh (Viewport Height): Representa un porcentaje de la altura de la ventana. 1vh equivale al 1% de la altura
del viewport.
▪ Por ejemplo, si la altura de la pantalla es de 800 píxeles, 1vh = 8 píxeles.
▪ 100vh equivale al 100% de la altura de la pantalla.
La diferencia principal entre usar vh, vw y % radica en la referencia de dimensionamiento. Mientras que % se
basa en el tamaño del elemento contenedor, vh y vw se refieren al tamaño del viewport
(área visible del navegador).
Fondo a pantalla completa:
.fondo-completo {
width: 100vw; /* 100% del ancho del viewport */
height: 100vh; /* 100% de la altura del viewport */
background-color: lightblue;
}
Texto que ocupa el 5% del ancho de la pantalla:
.texto {
font-size: 5vw; /* 5% del ancho de la pantalla */
}
Div centrado ocupando la mitad de la pantalla:
.centrado {
width: 50vw; /* 50% del ancho del viewport */
height: 50vh; /* 50% de la altura del viewport */
margin: auto;
background-color: lightgreen;
}
Colores y fondo en CSS
En CSS, el color y el fondo de los elementos se definen utilizando propiedades como color,
background-color, y background para personalizar el diseño de una página web.
Propiedad color
h1 {
color: blue; /* Define el color del texto como azul */
}
Puedes especificar los colores de varias maneras:
•Nombres de colores: red, blue, green, etc.
•HEX: #ff5733 (para representar colores en formato hexadecimal).
•RGB: rgb(255, 87, 51) (define el color usando valores de rojo, verde y azul).
•RGBA: rgba(255, 87, 51, 0.5) (igual que RGB pero con transparencia; el último valor es la
opacidad, de 0 a 1).
•HSL: hsl(120, 100%, 50%) (define el color por tono, saturación y luminosidad).
Colores y fondo en CSS
Propiedad Descripción Valores
RGB | HSL | HEX | nombre del color | RGBA |
color Color del texto HSLA
RGB | HSL | HEX | nombre del color | RGBA |
background-color Color de fondo HSLA | transparent
background-image Imagen de fondo url(«…») | none
background-repeat Repetición de la imagen de fondo repeat | repeat-x | repeat-y | no-repeat
background-attachment Desplazamiento de la imagen de fondo scroll | fixed
background-position Posición de la imagen de fondo percentage | length | left | center | right
background-size Tamaño de la imagen de fondo auto | cover | contain | valor
Opacity Transparencia de un elemento [ 0 – 1 ] (0 → totalmente transparente)
Colores y fondo en CSS
Propiedad background-color
background-color establece el color de fondo de un elemento.
div {
background-color: #ff5733; /* Fondo naranja */
}
Propiedad background-image
La propiedad background-image se utiliza para establecer una imagen como fondo de un elemento HTML.
Puedes proporcionar la ruta de la imagen usando el formato url("..."). El valor none se utiliza para eliminar
cualquier imagen de fondo.
section {
background-image: url("[Link]");
}
Colores y fondo en CSS
Propiedad background-repeat
La propiedad background-repeat controla la forma en que la imagen de fondo se repite en el elemento.
Puedes elegir entre repeat (repetir en ambas direcciones), repeat-x (repetir solo horizontalmente), repeat-y
(repetir solo verticalmente) y no-repeat (no repetir la imagen).
header {
background-image: url("[Link]");
background-repeat: repeat-x; /* Repetir solo horizontalmente */
}
Propiedad background-attachment
La propiedad background-attachment controla si la imagen de fondo se desplaza con el contenido de la página
(scroll) o permanece fija en su posición mientras se desplaza el contenido (fixed).
body {
background-image: url("[Link]");
background-attachment: fixed; /* Fondo fijo en la ventana */
}
Colores y fondo en CSS
Propiedad background-position
La propiedad background-position se utiliza para definir la posición inicial de la imagen de fondo dentro del
elemento. (center, top, left, right, bottom)
div {
background-image: url("[Link]");
background-position: center top;
}
div {
background-image: url("[Link]");
background-position: 50px 30px; /* 50px desde la izquierda, 30px desde arriba */
}
div {
background-image: url("[Link]");
background-position: 25% 75%; /* 25% desde la izquierda, 75% desde arriba */
}
Colores y fondo en CSS
Propiedad background-size
La propiedad background-size se utiliza para controlar el tamaño de la imagen de fondo en relación con el elemento
que la contiene.
header {
background-image: url("[Link]");
background-size: valor;
}
Donde «valor» puede ser uno de los siguientes:
auto: Este es el valor predeterminado. La imagen de fondo conserva su tamaño original y se repite si es necesario
para llenar el contenedor.
cover: La imagen de fondo se escala para que cubra completamente el contenedor, recortando cualquier exceso
que no quepa. Esto puede dar como resultado que la imagen se estire o recorte.
contain: La imagen de fondo se escala para que quepa completamente dentro del contenedor sin recortarla. Puede
haber espacio vacío alrededor de la imagen si el contenedor tiene una relación de aspecto diferente a la imagen.
valor personalizado: Puedes especificar el tamaño de la imagen de fondo utilizando valores de longitud (píxeles,
em, porcentaje) o usando auto para una de las dimensiones (ancho o alto) y un valor específico para la otra dimensión.
Colores y fondo en CSS
Propiedad opacity
La propiedad opacity se utiliza para controlar la transparencia de un elemento. Un valor de 1 representa opacidad
completa (sin transparencia), mientras que un valor de 0 hace que el elemento sea completamente transparente.
Los valores entre 0 y 1 permiten un grado variable de transparencia.
.caja-transparente {
background-color: #000; /* Fondo negro */
opacity: 0.7; /* 70% de opacidad */
}
Ejemplo conjunto:
.imag-bg{
background-image: url("[Link]");
height: 600px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
¿Preguntas?
