1、css概述 主要的使用場景就是美化網頁，佈局頁面 （1）html的局限性 它只關註內容的語義，只能做一些簡單的樣式，並且非常的臃腫和繁瑣 （2）css對網頁美化的作用 css是層疊樣式表的簡稱，它和html是一樣的，都是一種標記語言，css主要用於設置html頁面的文本內容（字體、大小、對齊方式 ...
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>
