css：選擇器（標籤、類、ID、萬用字元）
1、css概述
主要的使用場景就是美化網頁，佈局頁面
（1）html的侷限性
它只關注內容的語義，只能做一些簡單的樣式，並且非常的臃腫和繁瑣
（2）css對網頁美化的作用
css是層疊樣式表的簡稱，它和html是一樣的，都是一種標記語言，css主要用於設定html頁面的文字內容（字型、大小、對齊方式等）圖片的外形（寬度、高度、邊框樣式、邊距等）以及版面的佈局和外觀顯示樣式。css可以美化html使得頁面更加漂亮，頁面的佈局更加簡單。
（3）html與css
html主要做結構，顯示元素內容，css美化html，佈局網頁。因此，html專注結構呈現，css做樣式，即結構與樣式相分離
2、css語法規範
（1）程式碼
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
color: red;
font-size: 20px;
}
</style>
</head>
<body bgcolor="aquamarine">
<h2>靜夜思</h2>
<p>
床前明月光，疑似地上霜
</p>
<p>
舉頭望明月，低頭思故鄉，
</p>
</body>
</html>（2）測試
在style標籤中，p被稱為選擇器，用於指定css的html標籤，花括號內部是對該物件設定的具體樣式
屬性和屬性的值，以鍵值對的形式出現
屬性和屬性的值以冒號隔開
每一個鍵值對以分號相隔開
3、選擇器
就是根據不同的需求，把不同的標點選出來。
（1）標籤選擇器
標籤選擇器是指用標籤名稱作為選擇器，按照標籤名稱分類，為頁面中某一標籤制定統一的樣式。優點是能夠快速地為頁面同類型的標籤，統一設定樣式。但是標籤選擇器不能滿足差異化樣式，只能同時設定同一型別的標籤
程式碼：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
color: red;
font-size: 20px;
}
div{
color:black;
font-size: 25px;
}
</style>
</head>
<body bgcolor="aquamarine">
<h2>靜夜思</h2>
<p>
床前明月光，
</p>
<p>
疑似地上霜，
</p>
<div>
舉頭望明月，
</div>
<div>
低頭思故鄉，
</div>
</body>
</html>測試：
標籤選擇器，是根據標籤的不同來對樣式進行設定的
（2）類選擇器
標籤選擇器不能實現差異化的設定，但是類選擇器可以，它可以單獨選一個或者幾個標籤
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.myclass1{
color: red;
font-size: 20px;
}
.myclass2{
color:black;
font-size: 25px;
}
</style>
</head>
<body bgcolor="aquamarine">
<h2>靜夜思</h2>
<p class="myclass1">
床前明月光，
</p>
<p class="myclass2">
疑似地上霜
</p>
<div class="myclass1">
舉頭望明月，
</div>
<div class="myclass2">
低頭思故鄉
</div>
</body>
</html>
測試：
在使用類選擇器之後，即使是相同的標籤，也可以實現不同的樣式。如果說標籤選擇器是為了區別不同的標籤的話，那麼類選擇器，則可以進一步對眾多的同一種標籤進行區分
類命名規則：
頭：header
內容：content
尾：footer
導航：nav
側欄：column
選單：menu
類選擇器實現盒子模型：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.red{
width: 50px;
height: 20px;
background-color: red;
}
.yeloow{
width: 50px;
height: 40px;
background-color: yellow;
}
</style>
</head>
<body bgcolor="aquamarine">
<h2>類選擇器實現盒子模型</h2>
<div class="red"></div>
<div class="yeloow"></div>
<div class="red"></div>
</body>
</html>
在同一種標籤中，通過class的不同實現不同的佈局
類選擇器的多類名：一個標籤的class屬性有多個值
可以把一些標籤元素相同的元素放到一個類裡面：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.myclass1{
width: 250px;
height: 60px;
background-color: blanchedalmond;
}
.myclass2{
width: 250px;
height: 60px;
background-color:red;
}
</style>
</head>
<body>
<h2>類選擇器實現盒子模型</h2>
<div class="myclass1">
床前明月光，疑是地上霜.
</div>
<div class="myclass2">
舉頭望明月，低頭思故鄉，
</div>
</body>
</html>
在這個案例中，兩句話顯示的區域的大小是相同的，可以把他們抽取出來，重新建立一個新的class
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.myclass1{
background-color: blanchedalmond;
}
.myclass2{
background-color:red;
}
.area{
width: 250px;
height: 60px;
}
</style>
</head>
<body>
<h2>類選擇器實現盒子模型</h2>
<div class="myclass1 area">
床前明月光，疑是地上霜.
</div>
<div class="myclass2 area">
舉頭望明月，低頭思故鄉，
</div>
</body>
</html>
這樣的話可以節省css程式碼，統一修改也非常方便
（3）id選擇器
ID選擇器和類選擇器的使用方法基本相同，但是定義方式不同，最大的區別就是ID選擇器只能使用一次
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#color{
color: red;
}
</style>
</head>
<body>
<div id="color">
床前明月光，疑是地上霜.
</div>
</body>
</html>
（4）萬用字元選擇器
*：修改所有標籤的樣式
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<div id="color">
床前明月光，疑是地上霜.
</div>
<p>
舉頭望明月，低頭思故鄉.
</p>
</body>
</html>
&n