Saltar al contenido principal
Codigo Heroe
Tarea anterior
CSS: selectores, herencia y cascada6/15
A la lista de tareas
  1. 1. Reglas CSS
  2. 2. Selectores
  3. 3. Propiedades y valores
  4. 4. Herencia
  5. 5. Propiedades heredables
  6. 6. Propiedades no heredables
  7. 7. Propiedades abreviadas
  8. 8. Valores absolutos y relativos
  9. 9. Selectores de etiqueta y de clase
  10. 10. Selectores descendientes
  11. 11. Estilos predeterminados
  12. 12. La cascada
  13. 13. Conflictos entre propiedades
  14. 14. Varias clases en un elemento
  15. 15. Estilos en línea: el atributo style
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Propiedades no heredables

En el ejercicio anterior enumeramos las principales propiedades heredables. Pero no todas se heredan. Entre las que no se heredan están las que controlan la posición, las dimensiones, los márgenes, los rellenos, el fondo y los bordes:

background, border, padding, margin, width, height, position y otras.

Y tiene sentido que sea así. Si un bloque tiene un relleno, no hace falta aplicar automáticamente ese mismo relleno a cada elemento que contiene. Estas características suelen ser propias de cada bloque.

Veamos qué pasaría si el borde también se heredara. Así se vería nav en la página principal al agregarle un borde con la propiedad border:

Entradas del blog

  • Día 1. Cómo olvidé darle de comer al gato
  • Día 2. Quiero dedicarme a HTML y CSS
  • Día 3. Mi gato está enojado conmigo

Ahora usemos esa misma propiedad border para comprobar que no se hereda.

  • 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" height="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; } h1 { font-size: 36px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .avatar { border-radius: 10px; } nav { margin-bottom: 30px; padding: 20px; /* Agrega la propiedad abajo */ background-color: #4470c4; color: #ffffff; } nav a { color: #ffffff; } ul { list-style: none; padding-left: 0; } footer { margin-top: 30px; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Agrega a nav la propiedad border con el valor 5px solid #2d508f.
    Codigo Heroe

    © 2023-2026, codigoheroe.com