tft每日頭條

 > 生活

 > 前端使用css

前端使用css

生活 更新时间:2025-02-12 23:45:40

終于學習完了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>

前端使用css(前端CSS基礎部分的幾個注意事項和有疑惑的點)1

群組選擇器中可以用後代選擇器

群選擇器中可以用元素選擇器、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>

前端使用css(前端CSS基礎部分的幾個注意事項和有疑惑的點)2

設置多種字體時,如果兩種以上字體需要用雙引号,該怎麼處理?

每個需要用雙引号的字體單獨用雙引号,字體之間用逗号隔開就可以了。

示例代碼如下:

<!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>

前端使用css(前端CSS基礎部分的幾個注意事項和有疑惑的點)3

字體粗細差别太小,是不是因為字體太小,看得不太明顯?

字體粗細設置成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>

前端使用css(前端CSS基礎部分的幾個注意事項和有疑惑的點)4

改成100px大小後,還是看不出來明顯的差别:

前端使用css(前端CSS基礎部分的幾個注意事項和有疑惑的點)5

頂劃線真的沒有用嗎?

某些數學和物理公式上,可能會有用處,示例代碼如下:

<!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>

前端使用css(前端CSS基礎部分的幾個注意事項和有疑惑的點)6

固定定位和絕對定位的區别

絕對定位的特點:

(1)絕對定位如果不設定任何偏移值,元素位置不會有任何改變(後面的就不一定了)

(2)絕對定位會使得元素脫離文檔流。

(3)絕對定位是相對于離他最近的開啟了定位的元素進行定位的,如果都沒有,則相對于body進行定位(所以通常給父元素也加一個定位)。

(4)絕對定位也會使得元素提升一個層級。

(5)絕對定位會改變元素的性質。行内元素會變成塊狀元素(因為會脫離文檔流,也就是脫離文檔流的特性)。

固定定位的特點:

(1)固定定位也是絕對定位的一種,擁有絕對定位的大部分特點。

(2)但是他是相對于浏覽器窗口的位置進行定位,比如漂浮的客服,回到頂部。這類的按鈕都是使用的固定定位。

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved