Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

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

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

¡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! :)