2017-03-16 3 views
-1

こんにちは誰も私のすべてのページをフォントサイズ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>

答えて

0

<body>内のすべての要素にfont-sizeを適用します。

は、ここに私のスニペットです。セレクタbody * {}を使用してください。

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

ありがとうPugazh、bodyタグ内のタグはfont-familyを継承したようにfont-sizeを継承してはいけませんか? – AllenWalker

+0

@AllenWalker - あなたの質問への回答は次のとおりです:http://stackoverflow.com/questions/35736718/css-body-properties-not-inherited-by-h1-tag – Pugazh

+0

この選択はh3.headerは意味しますか?select h3 insideヘッダー? – AllenWalker

0

彼らは、ブラウザのスタイルシートでこのプロパティを設定しているので、見出し要素は、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%を使用することができ、おそらくいくつかのブラウザのバグを除いて、同じ結果が得られます。

+0

Jukka K. Korpela!あり​​がとうございました! – AllenWalker

関連する問題