學習筆記，僅供參考，有錯必糾
CSS
CSS語法
由上圖可知，CSS語法由選擇器, 屬性聲明, 花括號, 冒號, 分號組成，且css對換行和空格不敏感。
比如：
p {
color: green; /*設置前景色，也就字體的顏色爲綠色*/
background-color: red;/*設置背景色爲紅色*/
}
CSS簡單屬性
- 常用屬性
| 屬性 | 含義 |
|---|---|
| width | 設置寬度,單位px像素 |
| height | 高度 |
| color | 前景色(文字顏色) |
| background-color | 背景色 |
| font-size | 字體大小 |
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS屬性</title>
<style>
div {
width: 200px;
height: 200px;
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<div>
俺是div標籤
</div>
</body>
</html>
頁面：
CSS註釋
語法：
/*單行註釋*/
/*
多行註釋
*/
注意，註釋不能嵌套。
CSS選擇器
通配符選擇器
通配符選擇器用*星號表示，他是所有選擇器中作用範圍最廣的，能匹配頁面中所有的元素，其基本語法格式如下：
* {
屬性1: 屬性值1;
屬性2: 屬性值2;
}
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style>
* {
margin: 0; /*外邊距*/
padding: 0; /*內邊距*/
color: green;
}
</style>
</head>
<body>
<h1>通配符選擇器</h1>
<p>
歡迎光臨！
</p>
<span>OK!</span>
</body>
</html>
頁面：
- 注意事項
通配符的穿透能力很強，優先級高於繼承的樣式，會覆蓋繼承的樣式。
ID選擇器
ID選擇器，可以幫助我們選擇當前頁面中唯一的id值的標籤，也就是根據標籤的id屬性值進行選取，進而設置樣式。ID選擇器的符號用#井號表示
如果我們的頁面中有兩個p標籤，我想設置上面一個標籤的像素爲30px，下面一個p標籤的像素爲10px，那麼我們可以通過設置標籤id+標籤選擇器的方式實現，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style>
#p1 {
font-size: 30px;
}
#p2 {
font-size: 10px;
}
</style>
</head>
<body>
<h1>ID選擇器</h1>
<p id="p1">
我是第1個p標籤
</p>
<p id="p2">
我是第2個p標籤
</p>
</body>
</html>
頁面：
- ID選擇器的命名規範
- 只允許出現字母(大小寫嚴格區分)，數字，下劃線
- 只允許以字母開頭
- 命名沒有長度限制，但不能太長
- 不允許出現標籤名
類選擇器
類選擇器，是對HTML標籤中class屬性進行選擇。css類選擇器的選擇符爲.，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style>
.Web {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h1>類選擇器</h1>
<p class="Web">
我是第1個p標籤
</p>
<p>
我是第2個p標籤
</p>
<p class="Web">
我是第3個p標籤
</p>
<ul>
<li>小黃</li>
<li class="Web">小白</li>
<li>小黑</li>
</ul>
</body>
</html>
頁面：
標籤可以的class屬性可以包含多個值，這些值在class標籤中用空格隔開：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style>
.Web {
color: green;
font-size: 20px;
}
.data {
background-color: yellow;
}
</style>
</head>
<body>
<h1>類選擇器</h1>
<p class="Web">
我是第1個p標籤
</p>
<p class="data">
我是第2個p標籤
</p>
<ul>
<li>小黃</li>
<li class="Web data">小白</li>
<li>小黑</li>
</ul>
</body>
</html>
頁面：
- ID選擇器和類選擇器的區別
相同的class屬性值，可以在HTML頁面中出現多次，而ID屬性值，則只能在HTML頁面中出現一次；
一個class屬性可以有多個值，也就是說一個標籤可以有多個class值；
建議大家可以多實用類選擇器(不是我建議的)。
CSS複合選擇器
複合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的，詳情見下面的知識點。
標籤指定式選擇器(既…又…)
標籤指定式選擇器又稱交集選擇器，由兩個選擇器構成，其中第一個爲標記選擇器，第二個爲class選擇器或者id選擇器，兩個選擇器之間不能有空格，例如：
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style>
p.Web {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h1>複合選擇器</h1>
<p class="Web">
我是第1個p標籤
</p>
<p class="data">
我是第2個p標籤
</p>
<ul>
<li>小黃</li>
<li class="Web">小白</li>
<li>小黑</li>
</ul>
</body>
</html>
頁面：
後代選擇器(包含選擇器)
後代選擇器用來選擇元素或元素組的後代，其寫法就是把外層標記寫在前面，內層標記寫在後面，中間用空格分隔。當標記發生嵌套時，內層標記就成爲外層標記的後代，例如：
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style>
.box li {
color: green;
font-size: 20px;
}
div a {
background-color: yellow;
}
</style>
</head>
<body>
<h1>複合選擇器</h1>
<div class="box">
<ul>
<li>小黃</li>
<li>小黑</li>
<li>小白</li>
</ul>
<ul>
<li>北京</li>
<li>上海</li>
</ul>
<p>
俺是p標籤
</p>
</div>
<div>
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
<a href="#">俺是a標籤</a>
</div>
</body>
</html>
頁面：
並集選擇器
並集選擇器是各個選擇器通過逗號連接而成的，任何形式的選擇器(包括標記選擇器、class類選擇器、id選擇器等)，都可以作爲並集選擇器的一部分，如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用並集選擇器爲它們定義相同的CSS樣式，例如：
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style>
p, h2, span {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<h1>複合選擇器</h1>
<p>
俺是p1
</p>
<h2>俺是h2</h2>
<span>俺是span</span>
<ul>
<li>小白</li>
<li>小黑</li>
<li>小黃</li>
</ul>
</body>
</html>
頁面：
子元素選擇器
子元素選擇器，是讓選擇器只能選擇兒子輩的元素，而不會選擇孫子輩的元素。例如：
h1>strong { color: red; }
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style>
div>p {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<h1>複合選擇器</h1>
<div>
<p>俺是p1</p>
<p>俺是p2</p>
<p>俺是p3</p>
<ul>
<li><p>俺是列表裏的p1</p></li>
<li><p>俺是列表裏的p2</p></li>
<li><p>俺是列表裏的p3</p></li>
</ul>
</div>
<p>俺是P</p>
</body>
</html>
頁面：
屬性選擇器
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style>
h2[id] { color: red; }
/*把同時擁有id和class屬性的h2標題選出來然後設置字體大小爲30px*/
h2[id][class] { font-size: 50px; }
input[type="text"] { background-color: purple; }
input[type="password"][class*="know"] { background-color: yellow; }
</style>
</head>
<body>
<h1>屬性選擇器</h1>
<h2 id="aside-title">俺是一直小白兔</h2>
<h2 id="aside-title" class="aside-msg">愛喫提草和兔糧</h2>
<input type="text" class="whoknow">
<input type="password" class="whocare">
<input type="password" class="whoknow">
</body>
</html>
頁面：
