Quelle règle en CSS me guidera pour comprendre quelle classe div utiliser pour styliser les balises h1 et p?

Question

Je veux donc styliser les éléments h1 et p sans affecter les éléments p à l'intérieur du div .container à l'intérieur du div .main.

<div class="header">
      <div class="container">
        <h1>Cats are from Mars and Dogs are from Venus</h1>
        <p>Which planet do you prefer to go visit?</p>
        <a class="btn" href="#">Learn More</a>
      </div>
    </div>

    <div class="nav">
      <div class="container">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="display-exercise.html">display</a></li>
          <li><a href="float-exercise.html">float</a></li>
        </ul>
      </div>
    </div>

    <div class="main">
      <div class="container">
        <img src="https://tf-assets-prod.s3.amazonaws.com/tf-curric/WEB-DEV-001/2.4.3_the_position_property/icon.png" alt="cat image">
        <h2>The Innovation Cloud Conference</h2>
        <p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions
          to challenging problems.</p>
        <p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most
          challenging projects.</p>
        <p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
      </div>
    </div>

Je comprends intuitivement que je devrais ajouter les styles de texte h1 et p dans le sélecteur .header, mais je ne sais pas comment expliquer pourquoi.

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
}

.container {
  margin: 0 auto;
  max-width: 940px;
  padding: 0 10px;
}

.header {
  background: url(https://tf-assets-prod.s3.amazonaws.com/tf-curric/WEB-DEV-001/2.4.3_the_position_property/outerspace_landscape.jpeg) no-repeat center center fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/
  height: 800px;
  text-align: center;
  color: white;
}

Cela a-t-il à voir avec l'héritage?

html css

0

user8359832 28 nov. 2017 à 03:38

Answer 1

Il s'agit plus de spécificité que d'héritage.

Avec mes règles ci-dessous, chacune devient plus spécifique.

h1 {color:#F00;}
.container h1 {color: #0F0;}
.header .container h1 {color:#00F;}

<h1>"Naked" H1</h1>
<div class="header">
  <div class="container">
    <h1>Cats are from Mars and Dogs are from Venus</h1>
    <p>Which planet do you prefer to go visit?</p>
    <a class="btn" href="#">Learn More</a>
  </div>
</div>

<div class="nav">
  <div class="container">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="display-exercise.html">display</a></li>
      <li><a href="float-exercise.html">float</a></li>
    </ul>
  </div>
</div>

<div class="main">
  <div class="container">
    <h1>H1 Out of the header</h1>
    <img src="https://tf-assets-prod.s3.amazonaws.com/tf-curric/WEB-DEV-001/2.4.3_the_position_property/icon.png" alt="cat image">
    <h2>The Innovation Cloud Conference</h2>
    <p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
    <p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
    <p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
  </div>
</div>

0

Jon P 28 nov. 2017 à 01:21

Answer 2

Peut être simplement donner #id ou .class aux lemenets que vous voulez styliser quelque chose comme ceci:

<div class="header">
  <div class="container">
    <h1 id="Cat_from_mars">Cats are from Mars and Dogs are from Venus</h1>
    <p id="planet_you_prefer">Which planet do you prefer to go visit?</p>
    <a class="btn" href="#">Learn More</a>
  </div>
</div>

Puis ajoutez votre css si je vous comprends bien

0

Alexandru Popescu 28 nov. 2017 à 01:15

Answer 3

Je ne sais pas si c'est l'explication que vous recherchiez. Cependant, j'ai changé votre code en un exemple très simple. Je cible tous les h1 qui se trouvent à l'intérieur du .container pour avoir une couleur verte. et tous les h1 qui sont à l'intérieur du .header pour avoir une couleur rouge. C'est un élément fondamental de la spécificité CSS.

.header h1 {
  color:red;
}

.container h1 {
  color:green;
}

<div class="header">
        <h1>Cats are from Mars and Dogs are from Venus</h1>
      <div class="container">
      <h1>This is a header not being inherited with color red. It's outside of the container</h1>
        <p>Which planet do you prefer to go visit?</p>
        <a class="btn" href="#">Learn More</a>
      </div>
    </div>

    <div class="nav">
      <div class="container">
      <h1>This is a header not being inherited with color red. It's outside of the container</h1>
      </h1>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="display-exercise.html">display</a></li>
          <li><a href="float-exercise.html">float</a></li>
        </ul>
      </div>
    </div>

    <div class="main">
      <div class="container">
      <h1>This is header not being inherited by the color red. It's outside of the container</h1>
      </h1>
        <img src="https://tf-assets-prod.s3.amazonaws.com/tf-curric/WEB-DEV-001/2.4.3_the_position_property/icon.png" alt="cat image">
        <h2>The Innovation Cloud Conference</h2>
        <p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions
          to challenging problems.</p>
        <p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most
          challenging projects.</p>
        <p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
      </div>
    </div>

0

Jorden 28 nov. 2017 à 01:00

Quelle règle en CSS me guidera pour comprendre quelle classe div utiliser pour styliser les balises h1 et p?

3 réponses

De nouvelles questions

html