知識點三、樣式的層疊性:運行以下代碼,可以發現,文字的最終顏色為綠色,字體為:simsun;字體大小為:12px;
那為什么,樣式里同樣寫了div的屬性,可為什么字體不是紅色?但卻是繼承了字體為12像素的大小呢?原因是因為樣式的層疊性。
層疊指的是樣式的優先級,當產生沖突時以優先級高的為準。1. 開發者樣式>讀者樣式>瀏覽器樣式(除非使用!important標記 )2. id選擇符>(偽)類選擇符>元素選擇符3. 權重相同時取后面定義的樣式
所以.box這個類選擇器就比div這個元素選擇器的優先級要高,但是.box同屬div元素,所以文字的顏色是綠色,同時也繼承了字體大小為12像素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{padding: 0;margin:0;}
.box{
color:green;
font-family: "simsun";
}
div{
color:red;
font-size: 12px;
}
</style>
</head>
<body>
<div class="box">我恨帥氣,我很溫柔,也很理智。</div>
</body>
</html>
知識點四、首行縮進:利用文字樣式text-indent:1em;可以對文本進行首行縮進??s進的單位可以是px、em等常用數值單位。em是該文本的實際像素。
<style>
p{width: 500px;text-indent: 2em;font-size: 12px;}
</style>
知識點五、詞間距:Word-spacing。使用這個屬性我們可以定義或者設置單詞之間的距離 。
<style>
p{word-spacing: 20px;}/*詞間距*/
</style>
知識點六、PRe標簽:預格式化文本標簽。使用此標簽可以把代碼中的空格和換行直接顯示到頁面上。但是 < 、 > 和 & 等特殊文字需要用 < 、 > 和 & 的方式記述。
<pre>
空格 可以 保留,換行符也可以
保留。
</pre>
新聞熱點
疑難解答