0. 前文我們講過如果僅僅依靠div是無法做出漂亮的樣式的,我們得依靠CSS.所以我們首先來了解一下什麼是選擇器.說得通俗易懂就是對HTML文檔中出現的標籤,元素進行分組,并給他設置格式
1. 元素選擇器,也被稱為類型選擇器,顧名思義就是通過元素的名字對其進行分類
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>選擇器</title>
<style>
/*元素選擇器,以元素作為篩選的對象*/
div {
font-size: 10px;
color: pink;
}
</style>
</head>
<body>
<div>姻緣呢,上天安排的最大嘛!</div>
<div>哇,跑都跑得那麼帥,我真信服.</div>
<div>血紅的月光映照著我的生命以及你的死期.</div>
</body>
</html>
注意:
- 元素選擇器是寫在head中的
- 元素選擇器(不僅是元素選擇器,後面的類選擇器,id選擇器都是如此)的所有代碼都要寫在<style>標籤當中
- 基本格式為: 元素{屬性1:屬性值1; 屬性2:元素值2......}
- 屬性-屬性值對之間要使用";"隔離,而屬性和屬性值之間使用":"隔離,有點像python的字典
2. 類選擇器:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>選擇器</title>
<style>
/*元素選擇器,以元素作為篩選的對象*/
div {
font-size: 10px;
color: pink;
}
/*類選擇器*/
.div2 {
font-size: 15px;
color: black;
}
</style>
</head>
<body>
<div>姻緣呢,上天安排的最大嘛!</div>
<div class='div2'>哇,跑都跑得那麼帥,我真信服.</div>
<div>血紅的月光映照著我的生命以及你的死期.</div>
</body>
</html>
說明: 元素選擇器會把第一個和第三個div變為10px的粉色字體,而類選擇器會把第二個標籤設置為黑色,10px.
3. id選擇器:通過id選擇元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>選擇器</title>
<style>
/*元素選擇器,以元素作為篩選的對象*/
div {
font-size: 10px;
color: pink;
}
/*類選擇器*/
.div2 {
font-size: 15px;
color: black;
}
/*id選擇器*/
#div3 {
font-size: 20px;
color: purple;
}
</style>
</head>
<body>
<div>姻緣呢,上天安排的最大嘛!</div>
<div class="div2">哇,跑都跑得那麼帥,我真信服.</div>
<div id="div3">血紅的月光映照著我的生命以及你的死期.</div>
</body>
</html>
查看結果:
每一個的格式都和選擇器中設置的一樣.
4. 層級選擇器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>選擇器</title> <style> div p { font-size: 40px; color: purple; } </style> </head> <body> <div>姻緣呢,上天安排的最大嘛!</div> <div class="div2">哇,跑都跑得那麼帥,我真信服.</div> <div id="div3">血紅的月光映照著我的生命以及你的死期.</div> <span> 用户名：<input type="text" /> </span> <span> 密码:<input type="password" /> </span> <div> <p> 這不是神經病,是理想. </p> </div> </body> </html>
說明:層級選擇器就像是脫衣服一樣,一層一層往裡面找,注意中間div和p之間是空格,如果有","表示並列,兩個元素都需要做那樣的改變
5. 屬性選擇器:通過標籤的屬性取得
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>選擇器</title> <style> input[type='text'] { /*屬性選擇器*/ background-color: red; } input[type='password'] { background-color: yellowgreen; /*背景*/ } </style> </head> <body> <div>姻緣呢,上天安排的最大嘛!</div> <div class="div2">哇,跑都跑得那麼帥,我真信服.</div> <div id="div3">血紅的月光映照著我的生命以及你的死期.</div> <span> 用户名：<input type="text" /> </span> <span> 密码:<input type="password" /> </span> <div> <p> 這不是神經病,是理想. </p> </div> </body> </html>
最後說明:
我使用的編輯器是vscode,而html預覽我用的不是瀏覽器,是使用vscode的插件:HTML Preview, 使用快捷鍵Ctrl+Shift+V就能快速實現預覽,所以在一些截圖上看起來可能和你們看起來不一樣,請不要感到奇怪.