學習條件
- 了解css/css3常見選擇器
學習目標
- 了解選擇器權重的計算
- 了解瀏覽器默認樣式
- 了解樣式的繼承
- 了解樣式的層疊
樣式的層疊即樣式權重、瀏覽器默認樣式、以及樣式繼承三方影響的最后計算結果
學習資源
習題
- 習題一:根據如下代碼計算div、ul、和li的最終樣式
//html代碼
<div class="list list-member">
<ul>
<li>member ID1</li>
<li>member ID2</li>
<li>member ID3</li>
</ul>
</div>
//css代碼
.list li {
margin: 10px 0 0 0;
font-size: 14px;
color: #666;
}
.list-member li {
font-size: 12px;
}
提示:需要考慮瀏覽器默認樣式,樣式權重,以及樣式繼承。先思考,給出一個答案,在寫一個簡單的網頁,將代碼復制上去到瀏覽器驗證
下面可以學
- 頁面布局