2017-03-16 62 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

應用font-size每一個元素中<body>。使用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,但是身體標記中的標記不應該像繼承font-family一樣繼承字體大小嗎? – 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