Day_6.(2)

2024-04-27 15:06:02

字體：大中小

來源：轉載

供稿：網友

知識點三、樣式的層疊性：運行以下代碼，可以發現，文字的最終顏色為綠色，字體為：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；可以對文本進行首行縮進。縮進的單位可以是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>