01 css 須知&標籤查詢
阿新 • • 發佈：2021-08-09
css 須知&標籤查詢
1. css註釋
# 註釋
/*單行註釋*/
/*
多行註釋1
多行註釋2
多行註釋3
*/
通常我們在寫css樣式的時候也會用註釋來劃定樣式區域(因為HTML程式碼多所以對呀的css程式碼也會很多)
/*這是部落格園首頁的css樣式檔案*/
/*頂部導航條樣式*/
...
/*左側選單欄樣式*/
...
/*右側選單欄樣式*/
...
2. css語法結構
# css的語法結構
選擇器 {
屬性1:值1;
屬性2:值2;
屬性3:值3;
屬性4:值4;
}
3. css三種引入方式
1.style標籤內部直接書寫(在head標籤裡面書寫) <style> h1 { color: burlywood; } </style> 2.link標籤引入外部css檔案(最正規的方式 解耦合) <link rel="stylesheet" href="mycss.css"> 3.行內式(一般不用) <h1 style="color: green">hello css</h1>
3. css選擇器（標籤查詢）
3.1 基礎選擇器
3.1.1 id選擇器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基礎選擇器-id選擇器</title> <style> /*樣式#定義，結構id呼叫、只能呼叫一次、被人不可呼叫*/ #yellow { color: yellow; font-size: 30px; } </style> </head> <body> <div id='yellow'>wesley</div> <!--linda不可呼叫yellow選擇器--> <!-- <div id='yellow'>linda</div> --> </body> </html>
3.1.2 類選擇器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基礎選擇器-類選擇器</title> <style> /*類選擇：樣式點定義 結構類class呼叫 一個或多個 開發最常用*/ /*.類名{屬性：值}*/ .yellow { color: yellow; } .div1 { color: pink; } </style> </head> <body> <p class="yellow">1</p> <p>2</p> <p>3</p> <div class="yellow">4</div> <div class="div1">5</div> <div>6</div> </body> </html>
3.1.3 元素/標籤選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基礎選擇器-標籤選擇器</title>
<style>
/*標籤選擇器{屬性：值}*/
p {
color: green;
}
div {
color: pink;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<div>4</div>
<div>5</div>
<div>6</div>
</body>
</html>
3.1.4 通用選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基礎選擇器-萬用字元選擇器</title>
<style>
/*下面不需要呼叫*/
/* *將html body div span ul 所有的標籤都改成紅色 */
* {
color: red;
}
</style>
</head>
<body>
<div>hhh</div>
<span>ddd</span>
<ul>
<li>fsdf</li>
<li>ffff</li>
</ul>
</body>
</html>
3.2 組合選擇器
- 後代選擇器
- 兒子選擇器
- 毗鄰選擇器
- 弟弟選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
/*後代選擇器*/
div span {
color: red;
}
/*兒子選擇器*/
/*div>span {
color: yellowgreen;
}*/
/*/*毗鄰選擇器 同級別緊挨著的下面第一個*/
/*div+span {
color: navajowhite;
}*/*/
/*弟弟選擇器 同級別下面所有的span*/
/*div~span {
color: royalblue;
}*/
</style>
<body>
<span>span1</span>
<span>span2</span>
<div style="background: yellow;">div
<p>div p</p>
<p>div p
<span>div p span</span>
</p>
<span>span</span>
<span>span</span>
</div>
<span>span</span>
<span>span</span>
<p>p</p>
<span>span</span>
</body>
</html>
3.3 屬性選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*將所有屬性名是username的標籤背景色改色*/
/*[username] {
background-color: firebrick;
}*/
/*[username='wesley'] {
background-color: firebrick;
}*/
input[username='wesley'] {
background-color: firebrick;
}
</style>
</head>
<body>
<!--屬性選擇器
1. 含有某個屬性
2. 含有某個屬性並且有某個值
3. 含有某個屬性並且有某個值的某個標籤
[]作為標誌
-->
<input type="text" username/>
<input type="text" username='wesley' />
<input type="text" username='linda' />
<p username='leo'>leo</p>
<div username='lalala'>lalala</div>
<span username='wesley'>lalalalala</span>
</body>
</html>
分組與巢狀
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* , 是同級別關系 並列的意思*/
/*div,p,span {
color: yellow;
}*/
#d1,.c1,span {
color: hotpink;
}
</style>
</head>
<body>
<div id='d1'>div
<p>div>p</p>
</div>
<p class='c1'>p</p>
<span>span</span>
</body>
</html>
偽類選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>偽類選擇器</title>
<style>
a:link {
color: blueviolet /*初始*/
}
a:hover {
color: aqua; /*滑鼠懸浮*/
}
a:active {
color: black; /*滑鼠點選不鬆開*/
}
a:visited {
color: gray; /* 點選過後*/
}
input:focus { /*獲取焦點 點文字框*/
background-color: royalblue;
}
</style>
</head>
<body>
<a href="https://www.jd.com">百度</a>
<input type="text" />
</body>
</html>
偽元素選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>偽元素選擇器</title>
<style>
/*第一個字調樣式*/
/*p:first-letter {
font-size: 48px;
color: orange;
}*/
/*通過css在文字前加文字， 滑鼠不能選擇*/
/*before和after通常用來除掉浮動帶來的影響：父標籤塌陷問題*/
p:before {
content: '你說得對';
color: orange;
}
/*後面加文字*/
p:after {
content: '?';
color: orange;
}
</style>
</head>
<body>
<p>豬bongbongbong</p>
</body>
</html>
選擇器優先順序
1.選擇器相同 書寫順序不同
就近原則:誰離標籤更近就聽誰的
2.選擇器不同 ...
行內 > id選擇器 > 類選擇器 > 標籤選擇器