Teoría
Teoría

Valores absolutos y relativos

Vamos a poner el avatar a la moda: lo haremos redondo. Podemos aumentar border-radius hasta la mitad del tamaño de la imagen, es decir, 40px, para obtener un círculo. Pero si después usamos un avatar de otro tamaño, tendremos que volver a cambiar el estilo. ¿Hay una solución que se adapte? ¡Sí! Usar porcentajes:

border-radius: 50%;

Si expresamos el radio de las esquinas en porcentajes, se calcula en relación con las dimensiones del elemento y cambia junto con ellas. Si lo expresamos en píxeles, el radio mantiene el mismo valor absoluto. Las unidades de CSS se dividen precisamente en absolutas y relativas.

Las unidades absolutas tienen relaciones fijas entre sí. Estos son algunos ejemplos:

font-size: 1cm;  /* 1 centímetro */
font-size: 10mm; /* 1 centímetro equivale a 10 milímetros */
font-size: 38px; /* 1 centímetro equivale a unos 38 loros píxeles */

Los píxeles, px, son los más usados; las demás unidades absolutas se usan mucho menos.

Las unidades relativas expresan valores que dependen de otros valores. Por ejemplo, el ancho en porcentaje de un elemento depende del ancho de su bloque contenedor, y su ancho en em depende de su propio tamaño de fuente.

Entre las unidades relativas están em, rem, vh, vw y algunas más. Y, por supuesto, los porcentajes. Cada una tiene sus usos. Por ejemplo, los porcentajes sirven para crear diseños fluidos, y em puede usarse en sitios de organismos públicos con requisitos especiales de ampliación del texto.

La especificación incluye la lista de unidades absolutas y sus equivalencias. También incluye la lista de unidades relativas y explica cómo se calculan.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Sitio de un principiante en HTML y CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Sitio de un principiante en HTML y CSS</h1> </header> <main>  <img class="avatar" src="img/raccoon.svg" width="80" alt="Avatar"> <nav> <h2>Entradas del blog</h2> <ul> <li><a href="day-1.html">Día 1. Cómo olvidé darle de comer al gato</a></li> <li><a href="day-2.html">Día 2. Quiero dedicarme a HTML y CSS</a></li> <li><a href="day-3.html">Día 3. Mi gato está enojado conmigo</a></li> <li><a href="day-4.html">Día 4. Casi me enfermo</a></li> <li><a href="day-5.html">Día 5. Un descanso</a></li> <li><a href="day-6.html">Día 6. No entendí nada</a></li> <li><a href="day-7.html">Día 7. Cupcake me encargó una tarea</a></li> <li><a href="day-8.html">Día 8. Un día muy serio</a></li> <li><a href="day-9.html">Día 9. O mejor dicho, noche</a></li> <li><a href="day-10.html">Día 10. Un primer balance</a></li> <li><a href="day-11.html">Día 11. Sin exagerar</a></li> <li><a href="day-12.html">Día 12. A todos les gustan las galletas</a></li> <li><a href="day-13.html">Día 13. Encontré un artículo</a></li> <li><a href="day-14.html">Día 14. Un formato nuevo</a></li> <li><a href="day-15.html">Día 15. Una galería de selfis</a></li> </ul> </nav> <section> <p>¡Hola a todos! Les doy la bienvenida a mi primer sitio web. Hace poco no tenía ni idea de cómo se crean las páginas web, pero ahora encontré <a href="https://htmlacademy.org/courses">cursos interactivos de HTML y CSS</a> y me propuse aprender a crearlas. Hasta tengo un instructor: Cupcake, que no me dejará bajar el ritmo y estará atento a mis avances.</p> <p>Mi primera tarea es llevar un diario y contar con sinceridad todos mis logros.</p> </section> <section> Sección de habilidades </section> </main> <footer> Pie de página </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: "Arial", sans-serif; color: #222222; background: #ffffff url("img/bg-page.png") no-repeat top center; } h1 { font-size: 36px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } /* Cambia el valor en la regla de abajo */ .avatar { border-radius: 10px; } nav { margin-bottom: 30px; padding: 20px; background-color: #4470c4; border: 5px solid #2d508f; color: #ffffff; } nav a { color: #ffffff; } ul { list-style: none; padding-left: 0; } footer { margin-top: 30px; }

ObjetivosRealizado

En la regla .avatar, cambia el valor de border-radius a 40px.
Después, en el HTML, cambia a 160 el valor del atributo width de la imagen .avatar.
Vuelve a cambiar border-radius de .avatar, ahora a 50%.
Después, restaura el ancho original de 80 en el HTML de la imagen.