Lección 9: Medidas
Al construir una página web disponemos de diferentes medidas para especificar un tamaño. Las más utilizadas son:
- Tamaño de la letra del elemento raíz (
rem). - Porcentaje (
%). - Píxeles (
px).
Las medidas se distinguen entre relativas y absolutas.
Las relativas solo debería interesarte rem o el porcentaje. Y respecto a las absolutas deberías únicamente utilizar, y casos excepcionales, los píxeles (cuando se trabaja con posicionamiento absoluto y fijo).
.texto {
/* Medida relativa: Tamaño de la letra del navegador. Por defecto suele ser 16px */
font-size: 1rem; /* 1 * 16 = 16px */
font-size: 0.5rem; /* 0,5 * 16 = 8px */
font-size: 2rem; /* 2 * 16 = 32px */
font-size: 3.2rem; /* 3.2 * 16 = 51.2px o 51px ya que no existen los decimales en las pantallas */
/* Medida relativa: Tamaño de letra del elemento padre. No recomendada. */
/* El elemento padre es "font-size: 10px" */
font-size: 1rem; /* 1 * 10 = 10px */
font-size: 0.5rem; /* 0,5 * 10 = 5px */
font-size: 2rem; /* 2 * 10 = 20px */
font-size: 3.2rem; /* 3.2 * 10 = 32px */
/* Medida absoluta: 1px = 1/96 de 1 pulgada o 0,26 milímetros */
font-size: 12px;
}
width
Solo funciona con elementos de bloque.
.elemento {
width: 20rem;
}
Porcentajes: %, vw, vh
.elemento {
/* Espacio disponible en el elemento */
width: 100%;
/* Anchura del navegador */
width: 100vw;
/* Altura del navegador */
height: 100vh;
}
min-width
Bloquea el elemento a una anchura mínima.
.elemento {
min-width: 5rem;
}
max-width
Bloquea el elemento a una anchura máxima.
.elemento {
max-width: 5rem;
}
height
Altura de un elemento de tipo bloque.
.elemento {
height: 12rem;
}
min-height
Bloquea el elemento a una altura mínima.
.elemento {
min-height: 12rem;
}
max-height
Bloquea el elemento a una altura máxima.
.elemento {
max-height: 12rem;
}
Actividad 1
A partir del siguiente texto, crea una Web. Cambia el tamaño de la letra según consideres.
Lavadora Dual Agitador y apertura superior (Una imagen) Model: NTW4516FW SKU: 5369600 494,99 euros
Actividad 2
Crea varios párrafos y dale a todos un color de fondo. Después cambia sus anchuras para crear un efecto de escalera.
Actividad 3
Da estilos a un párrafo con un color de fondo. Además obliga para que no pueda crecer en altura más de 10rem y pueda cambiar su altura a menos de 5rem.
A continuación añade texto hasta que no pueda crecer más.
Actividad 4
Crea un párrafo con texto y añade strong a cualquier palabra.
Después declara una clase con estilos suficientes para que cuando sea asignado al strong de un efecto de subrayado: fondo amarillo semitransparente.
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Me invitas a un café? ☕
Puedes hacerlo usando el terminal.
ssh customer@andros.dev -p 5555
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios