2017-03-16 10 views
-1

Hallo alle Ich versuche, alle meine Seite Schriftgröße 16px durch Vererbung, aber h1, h2 und h3 nicht erben, auch zögern Sie nicht, überprüfen Sie meinen Code für andere Dinge, die ich falsch mache und Bitte schlagen Sie jede Änderung vor, die Sie für angemessener halten. DANKE FÜR HILFE.Fehler beim Erben

Hier ist mein Code-Schnipsel:

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>

Antwort

0

Wenden Sie das font-size auf jedes Element innerhalb <body>. Verwenden Sie body * {} Selektor.

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>

+0

Danke Pugazh, aber sollten nicht die Tags innerhalb des Body-Tags die Font-Größe erben, wie sie die Font-Familie geerbt haben? – AllenWalker

+0

@AllenWalker - Hier ist die Antwort auf Ihre Frage http://stackoverflow.com/questions/35736718/css-body-properties-not-inherited-by-h1-tag – Pugazh

+0

Bedeutet diese Auswahl h3.header bedeutet: Wählen Sie h3 innerhalb Header ? – AllenWalker

0

Die Überschrift Elemente erben nicht font-size, weil sie diese Eigenschaft in einem Browser-Stylesheet festgelegt haben. Diese Einstellung hängt vom Browser ab, aber normalerweise verwenden Browser die in HTML-Spezifikationen beschriebene “expected” settings. Dazu gehören:

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

Wenn Sie sie erben machen wollen ihre Eltern font-size, die Sie einstellen können:

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

Statt inherit, können Sie den Wert 1em oder den Wert 100% in diesem Fall benutzen, mit identischen Ergebnissen, außer vielleicht für einige Browserfehler.

+0

Vielen Dank Jukka K. Korpela!, Jetzt verstehe ich, warum es nicht funktioniert hat. – AllenWalker