1
respuesta

[Duda] ¿Por qué en mi código mis archivos generan herencias?

Referente al curso Arquitectura CSS: descomplicando los problemas, en el capítulo Estilizando sección Banner y Sobre y actividad Sección Banner

por HarrisonDanielValeroMartinez
| 58.9k xp | 14 posts

Buen día a todos, espero se encuentren bien.

Tengo una duda respecto mi código, estoy realizando los pasos del curso de Arquitectura en CSS, y al momento de agregar la imagen y el titulo, estos heredan los estilos de un tag, no entiendo la razón y no se como solucionarlo. dejare mi código y una foto de la herencia que se genera.

Muchas gracias por la atención.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fruta & Fruto</title>
    <link href="https://fonts.googleapis.com/css?family=Pacifico|Roboto:100,300,400,500,700,900" rel="stylesheet" />
    <link href="./assets/css/normalize.css" rel="stylesheet" />
    <link href="./assets/css/reset.css" rel="stylesheet" />
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/cabecera.css">
    <link rel="stylesheet" href="assets/css/menu/menu-item.css">
    <link rel="stylesheet" href="assets/css/menu/menu-link.css">
    <link rel="stylesheet" href="assets/css/menu/menu-lista.css">
    <link rel="stylesheet" href="assets/css/banner/banner-imagen.css">
    <link rel="stylesheet" href="assets/css/banner/banner-titulo.css">
    <link rel="stylesheet" href="assets/css/banner/banner.css">
</head>
    <body>
      <header class="cabecera">
        <img class="logo" src="assets/img/logo.jpg" alt="Fruta y Fruto">
        <nav class="menu">
            <ul class="menu__lista">
                <li class="menu__item"><a class="menu__link unico" href="#">Inicio</a></li>
                <li class="menu__item"><a class="menu__link" href="#">Recetas</a></li>
                <li class="menu__item"><a class="menu__link" href="#">Quienes Somos</a></li>
                <li class="menu__item"><a class="menu__link" href="#">Contacto</a</li>
            </ul>
        </nav>
      </header>
    </body>
    <section class="banner">
      <img src="assets/img/banner.png" alt="banner imagen" class="banner__imagen">
      <h2 class="banner__titulo">Reaproveche mejor los alimentos</h2>
    </section>
</html>

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

1 respuesta
por Rafaela Rocha
| 2874.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Harrisondanielvaleromartinez!

Gracias por compartir tu código y tu duda con nosotros. La razón por la que los elementos de tu banner heredan los estilos de otro tag es porque no estás especificando los estilos de manera adecuada.

En tu archivo CSS, estás aplicando los estilos a los tags directamente, por lo que cualquier elemento dentro de esos tags heredará los mismos estilos. Para evitar esto, es importante que especifiques los estilos de manera más específica, utilizando clases o IDs.

En el caso de tu banner, podrías agregar una clase a la sección del banner y aplicar los estilos a esa clase en lugar de aplicarlos directamente al tag "section". Por ejemplo:

<section class="banner banner-principal">
  <img src="assets/img/banner.png" alt="banner imagen" class="banner__imagen">
  <h2 class="banner__titulo">Reaproveche mejor los alimentos</h2>
</section>

.banner-principal {
  background-color: #f2f2f2;
  padding: 20px;
  text-align: center;
}

.banner__imagen {
  width: 100%;
}

.banner__titulo {
  font-size: 36px;
  font-weight: bold;
  margin-top: 0;
}

De esta manera, los estilos solo se aplicarán a la sección con la clase "banner-principal" y no se heredarán a otros elementos en la página.

Espero que esta respuesta haya sido útil para ti. ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)