CSS的某些樣式的繼承性文字加邊框

Eagle89 2017-07-24

展開全文

繼承

CSS的某些樣式是具有繼承性的，那么什么是繼承呢？繼承是一種規(guī)則，它允許樣式不僅應(yīng)用于某個特定html標(biāo)簽元素，而且應(yīng)用于其后代。比如下面代碼：如某種顏色應(yīng)用于p標(biāo)簽，這個顏色設(shè)置不僅應(yīng)用p標(biāo)簽，還應(yīng)用于p標(biāo)簽中的所有子元素文本，這里子元素為span標(biāo)簽。

p{color:red;}

<p>三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>

可見右側(cè)結(jié)果窗口中p中的文本與span中的文本都設(shè)置為了紅色。但注意有一些css樣式是不具有繼承性的。如border:1px solid red;

p{border:1px solid red;}

<p>三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>

在上面例子中它代碼的作用只是給p標(biāo)簽設(shè)置了邊框為1像素、紅色、實心邊框線，而對于子元素span是沒用起到作用的。

任務(wù)

我也來試試，為右側(cè)的段落加入一個邊框

1.在右邊編輯器的第8行，輸入：

p{border:1px solid red;}

注意p標(biāo)簽中的span標(biāo)簽是否有加入邊框樣式？

練習(xí)：

<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>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學(xué)校舉辦的活動我也沒勇氣參加。</p>
    <p id="second">到了三年級下學(xué)期時，我們班上了一節(jié)公開課，老師提出了一個很<span>簡單</span>的問題，班里很多同學(xué)都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環(huán)顧了四周，就我沒有舉手。</p>
</body>
</html>