Lección 6: Medidas | Curso CSS

Lección 6: 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?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se liquida 1 mes del Servidor Web.
  • 3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Acepto la política de Protección de Datos.

Escribe el primer comentario