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.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café — Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}

Escribe el primer comentario