9-1繼承（權值可為0.1） · 初識HTML+CSS

## 繼承 CSS的**某些樣式**是具有繼承性的，那么什么是繼承呢？繼承是一種規則，它允許樣式不僅應用于某個特定html標簽元素，而且應用于其后代。比如下面代碼：如某種顏色應用于p標簽，這個顏色設置不僅應用p標簽，還應用于p標簽中的所有子元素文本，這里子元素為span標簽。 ~~~ p{color:red;} <p>三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p> ~~~ 可見右側結果窗口中p中的文本與span中的文本都設置為了紅色。但注意有一些css樣式是不具有繼承性的。如border:1px solid red; ~~~ p{border:1px solid red;} <p>三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p> ~~~ 在上面例子中它代碼的作用只是給p標簽設置了邊框為1像素、紅色、實心邊框線，而對于子元素span是沒用起到作用的。 ### 任務 **我也來試試，為右側的段落加入一個邊框** 1.在右邊編輯器的第8行，輸入： ~~~ p{border:1px solid red;} ~~~ 注意p標簽中的span標簽是否有加入邊框樣式？ ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>繼承</title> <style type="text/css"> p{color:red;} p{border:1px solid red;} </style> </head> <body> <h1>勇氣</h1> <p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p> <p id="second">到了三年級下學期時，我們班上了一節公開課，老師提出了一個很<span>簡單</span>的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p> </body> </html> ```