Question

大家好我试图通过继承使我的所有页面字体大小为16px，但是h1，h2和h3无法继承它，也请随意检查我的代码是否有任何其他我做错了，请建议任何改变你发现更合适。感谢帮助。

这是我的代码段：

body {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: normal;
}


/*************************HEADER*****************************************/

header {
  background-color: burlywood;
  display: flex;
  flex-direction: column;
  padding-left: 20px;
}

.header {
  margin: 0px;
}

#login {
  background-color: red;
  align-self: flex-end;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

h3 {
  align-self: flex-end;
}

#menuList {
  list-style-type: none;
  margin: 0px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-right: 20px;
}

.menuListItem {
  display: inline-block;
  margin-right: 15px;
}


/*************************SECTION****************************************/

section {
  background-color: crimson;
  display: flex;
  flex-direction: row;
}


/*************************FOOTER*****************************************/

footer {
  background-color: indianred;
  display: flex;
  flex-direction: column;
}

<!Doctype html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="test-style.css" />
</head>

<body>

  <!-------------------------------HEADER------------------------------------------------------>
  <header>
    <h1 class="header">Bienvenue</h1>
    <h2 class="header">Achat et Vente</h2>
    <form id="login" class="header" method="post" action="engine.php">
      <div id="emailContainer"><label for="email">E-mail</label><input type="email" name="email" id="email" /></div>
      <div id="passContainer"><label for="pss">Mot de passe</label><input type="password" name="pass" id="pass" /></div>
    </form>
    <h3 class="header"><span><a href="#">Connexion</a><span> ou  <span><a href="#">Créer un compte</a></span></h3>
    <nav class="header" id="MenuBar">
      <ul id="menuList">
        <li class="menuListItem">Acceuil</li>
        <li class="menuListItem">Categorie</li>
        <li class="menuListItem">Service</li>
        <li class="menuListItem">Contact</li>
      </ul>
    </nav>
  </header>

  <!-------------------------------SECTION----------------------------------------------------->
  <section>
    <nav id="navInSection">
      <ul id="navList">
        <li>Acceuil</li>
        <li>Categorie</li>
        <li>Service</li>
        <li>Contact</li>
      </ul>
    </nav>
    <div id="underSectionContainer" <form id="searchZone">
      <label for="search">Recherche</label><input type="search" name="search" id="search" />
      </form>
    </div>
  </section>
  <!-------------------------------FOOTER------------------------------------------------------>
  <footer>
    <h4>Réseaux Sociaux</h4>
  </footer>

</body>
<html>

Answer 1

将font-size应用于<body>中的每个元素。使用body * {}选择器。

＆＃13;

body * {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: normal;
}


/*************************HEADER*****************************************/

header {
  background-color: burlywood;
  display: flex;
  flex-direction: column;
  padding-left: 20px;
}

.header {
  margin: 0px;
}

#login {
  background-color: red;
  align-self: flex-end;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

h3 {
  align-self: flex-end;
}

#menuList {
  list-style-type: none;
  margin: 0px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-right: 20px;
}

.menuListItem {
  display: inline-block;
  margin-right: 15px;
}


/*************************SECTION****************************************/

section {
  background-color: crimson;
  display: flex;
  flex-direction: row;
}


/*************************FOOTER*****************************************/

footer {
  background-color: indianred;
  display: flex;
  flex-direction: column;
}

＆＃13;

<!Doctype html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="test-style.css" />
</head>

<body>

  <!-------------------------------HEADER------------------------------------------------------>
  <header>
    <h1 class="header">Bienvenue</h1>
    <h2 class="header">Achat et Vente</h2>
    <form id="login" class="header" method="post" action="engine.php">
      <div id="emailContainer"><label for="email">E-mail</label><input type="email" name="email" id="email" /></div>
      <div id="passContainer"><label for="pss">Mot de passe</label><input type="password" name="pass" id="pass" /></div>
    </form>
    <h3 class="header"><span><a href="#">Connexion</a><span> ou  <span><a href="#">Créer un compte</a></span></h3>
    <nav class="header" id="MenuBar">
      <ul id="menuList">
        <li class="menuListItem">Acceuil</li>
        <li class="menuListItem">Categorie</li>
        <li class="menuListItem">Service</li>
        <li class="menuListItem">Contact</li>
      </ul>
    </nav>
  </header>

  <!-------------------------------SECTION----------------------------------------------------->
  <section>
    <nav id="navInSection">
      <ul id="navList">
        <li>Acceuil</li>
        <li>Categorie</li>
        <li>Service</li>
        <li>Contact</li>
      </ul>
    </nav>
    <div id="underSectionContainer" <form id="searchZone">
      <label for="search">Recherche</label><input type="search" name="search" id="search" />
      </form>
    </div>
  </section>
  <!-------------------------------FOOTER------------------------------------------------------>
  <footer>
    <h4>Réseaux Sociaux</h4>
  </footer>

</body>
<html>

＆＃13;

Answer 2

标题元素不会继承font-size，因为它们在浏览器样式表中设置了此属性。此设置取决于浏览器，但通常浏览器使用HTML规范中描述的“expected” settings。它们包括：

h1 { font-size: 2.00em; }
h2 { font-size: 1.50em; }
h3 { margin-top: 1.00em; }

如果您想让他们继承父亲的font-size，您可以设置：

h1, h2, h3 { font-size: inherit; }

在这种情况下，您可以使用值inherit或值1em代替100%，但结果相同，但可能会出现一些浏览器错误。

未能继承

2 个答案: