終于學習完了CSS,感覺還是挺簡單的,沒有太多需要說明的。在這裡隻記錄一些注意事項,或者有疑惑的問題。
後代選擇器後代選擇器中的父元素和子元素都可以用id、class或者元素标簽指示。
下面的例子中體現了這一點。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#father1 div {color: red;}
.father2 .abc {color: blue;}
</style>
</head>
<body>
<div id="father1">
<div>我是一個兵。</div>
<div>I am anther soldier.</div>
</div>
<div class="father2">
<p>這是第一段</p>
<p class="abc">This is the second paragraph.</p>
<span class="abc">你們說的對。</span>
</div>
</body>
</html>
群選擇器中可以用元素選擇器、id選擇器、class選擇器,也可以用後代選擇器,隻要用逗号隔開就行了。
代碼示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span,#father1 div,#abc {color: red;}
</style>
</head>
<body>
<div id="father1">
<div>我是一個兵。</div>
<div>I am anther soldier.</div>
</div>
<div class="father2">
<p>這是第一段</p>
<p id="abc">This is the second paragraph.</p>
<span class="abc">你們說的對。</span>
</div>
</body>
</html>
每個需要用雙引号的字體單獨用雙引号,字體之間用逗号隔開就可以了。
示例代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p {font-family: "葉根友毛筆行書2.0版","宋體","Times New Roman";}
</style>
</head>
<body>
<div class>
<p>這是第一段</p>
<p>This is the second paragraph.</p>
<span>你們說的對。</span>
</div>
</body>
</html>
字體粗細設置成100和400,700和900,在字體大小為15px時沒有明顯的差别。示例代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p {font-size: 15px;}
#p1 {font-weight: 100;}
#p2 {font-weight: 400;}
#p3 {font-weight: 700;}
#p4 {font-weight: 900;}
</style>
</head>
<body>
<div class>
<p id="p1">字體粗細:100</p>
<p id="p2">字體粗細:400</p>
<p id="p3">字體粗細:700</p>
<p id="p4">字體粗細:900</p>
</div>
</body>
</html>
改成100px大小後,還是看不出來明顯的差别:
某些數學和物理公式上,可能會有用處,示例代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div class>
平均速度的公式:<span style="text-decoration: overline;">v</span>=s/t
</div>
</body>
</html>
絕對定位的特點:
(1)絕對定位如果不設定任何偏移值,元素位置不會有任何改變(後面的就不一定了)
(2)絕對定位會使得元素脫離文檔流。
(3)絕對定位是相對于離他最近的開啟了定位的元素進行定位的,如果都沒有,則相對于body進行定位(所以通常給父元素也加一個定位)。
(4)絕對定位也會使得元素提升一個層級。
(5)絕對定位會改變元素的性質。行内元素會變成塊狀元素(因為會脫離文檔流,也就是脫離文檔流的特性)。
固定定位的特點:
(1)固定定位也是絕對定位的一種,擁有絕對定位的大部分特點。
(2)但是他是相對于浏覽器窗口的位置進行定位,比如漂浮的客服,回到頂部。這類的按鈕都是使用的固定定位。
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!