首先我們要知道，html相當於把我們每個人的身體輪廓描述了出來，但除了基本的功能外，它更像是一個裸替的人，不美觀，也不和諧。所有我們要給他穿上漂亮的衣服----CSS。
基本寫法：
1、一般測試或者偷懶是使用的最基本方法，很顯然，如果正式環境這么寫維護起來特別不方便，而且也變得十分臃腫。
<body >
<div style="background-color: cadetblue;height: 50px">頭</div>
<div style="background-color: black;height: 50px">上身</div>
<div style="background-color: green;height: 50px">下身</div>
</body>
進階寫法
這里面有兩個問題：
1、首先是在head里面加上style標簽，如下寫法，這id選擇器里面寫上樣式，然后再標簽里面應用這個id的樣式。
注意：但是id選擇器原則上只能被調用1次，像下面的寫法就會提示紅色的波浪線。
終極寫法
1、在同級目錄下面新建css目錄，然后在里面創建common.css(這個名字自己隨便寫，自己認得就行)。
2、在css/common.css文件里面寫上你要的樣式，如下圖。
3、然后在head標簽里面用link標簽把common.css這個css樣式的文件應用到當前的html里面，其他都是固定寫法。
4、在想應用的標簽里面應用這個樣式，如下圖寫法：
注意：大家可以觀察，其實很多網站都是這么寫的，大一點的網站都不會在同級目錄下創建css文件，都會是一個鏈接。
各種選擇器
1、上面我們學習了怎么來寫css樣式，但是應用的手法還是不太一樣的，下面我們就學習一下各種選擇器。
2、這里為了方便給大家演示，我們就用進階的寫法介紹各種選擇器的簡單應用。
前面我們學習了各種標簽，比如span、div、a等等的標簽，標簽選擇器顧明思意就是給固定的標簽應用樣式。
1、我們寫了一個div標簽，要想直接給這個標簽應用樣式，可以在style里面如下的寫法寫，這樣不管有多少個div標簽，都會應用這個樣式。個人感覺這么用其實挺虎的，估計也沒人這么用。
class選擇器
1、上面終極寫法其實就是class選擇器的應用。
2、寫法如下，點代表是class選擇器，后面跟的是名字。大括號里面寫的是樣式。應用的話直接在標簽里面寫上class=“c1”就行。
id選擇器
1、進階寫法里面寫的其實就是id選擇器。
2、#代表的是當前的樣式類別是id選擇器，i1是名字，大括號里面是樣式。標簽里面寫上id=“i1”就應用上了樣式。
3、一個id選擇器只能被應用一次，否則提示錯誤，也幾乎沒人這么用的。
關聯選擇器
1、關聯選擇器，我其實一直理解為它可以改名叫層級選擇器，我們知道html里面可以標簽套標簽，這里的關聯選擇器其實就是找到誰下面的誰給他應用樣式，如下：
2、如下所示，我們定義了一個class選擇器，並且只有標簽的class=“c1”，且下面有span標簽的才會生效。
3、這里不單單可以寫.c1 span，其實就是層級關系，你可以寫div span等等，多少級都行，為了好維護，不建議寫太深。但是記得中間是有空格隔開的。
組合選擇器
1、組合選擇器，顧名思義就是一組或組合起來的意思，如下圖：
2、我們寫了一個.c1,.c2的樣式，也就是說所有應用了class選擇器c1和c2標簽都生效，當然也可以寫成.c1,.c2,#i1,#i2等等。其實就是說應用了這些樣式的標簽的樣式是一樣的，就不用再逐個寫了，直接整合到一起。
屬性選擇器
1、屬性選擇器，那肯定是跟屬性有關系了。如下，我們給的所有input標簽且type=“text”的標簽應用一個樣式。
2、這個屬性不一定非要是系統自帶的，也可以我們自己創建的。如下，我們給class=“c2”的標簽，且name=“haha”的標簽應用一個樣式，也是可以的。以此類推，可以靈活應用。
應用的優先級
我們用的最多的可能是class選擇器，每個標簽很可能應用多個選擇器的樣式，那么哪個優先呢，其實就一句話“就近原則”，誰距離這個標簽進就先應用誰的樣式。基礎寫法最優先，其次是進階寫法。進階寫法里面誰距離標簽進，就是誰最優先。
常用CSS樣式
1、邊框
2、float
1、float即飄的意思，就是讓標簽飄動到哪里的意思。
2、我們在寫html的時候注意要有結構化，比如一個界面大致可以分為頭、身、尾。在頭里面可以再定義頭發、眉毛、眼睛等細小的屬性。
3、如下，我們先寫一個div，在div里面描述出來整個頭部的基本框架。
4、我們在寫css樣式的時候，寬度不建議直接寫死，一般都是屏幕的百分之多少，整個寬度是百分之百。
5、如下，div是塊級標簽，他一個div就能占用整行。所以我們讓收藏本站一行的左邊，登陸和注銷按鈕的div飄到整行的右邊。pading-right就是內邊距，好比你家的房子和鄰居家的房子，兩棟房子的距離叫外邊距。你家的桌子距離你家牆的距離叫內邊距。
6、細心的同學發現body里面我直接寫了一個margin:auto，這個margin就是外邊距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>htmltest</title>
<style>
.page-header {
height: 35px;
background-color: #dddddd;
line-height: 35px;
}
.c1 {
float: left;
padding-left: 100px;
}
.c2 {
float: right;
padding-right: 200px;
}
</style>
</head>
<body style="margin: auto">
<div class="page-header">
<div class="c1">
♥收藏本站
</div>
<div class="c2">
<a>登陸</a>
<a>注銷</a>
</div>
</div>
</body>
</html>
float進階用法
1、使用場景，比如我們在頁面的一個位置，例如電商平台有很多商品。我們可以像下面這種做，定義一個父級div標簽，規定商品存放的范圍。然后讓每個商品都讓它float:left，父級標簽固定寬度就是400px，每個商品是一個頁面，寬度是100。這樣的4個商品是剛好是一行，如果超出去了就直接跑到下一行開始。
2、默認情況下，里面的頁面float起來以后，父級標簽的border就被撐沒了，所以需要在所有標簽的最后面加上clear：both，父級標簽的border才不會丟失，否則就會變成下圖二。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>htmltest</title>
<style>
.page-header {
background-color: #dddddd;
width: 400px;
border: 1px solid red;
}
.c1 {
background-color: cadetblue;
float: left;
width: 100px;
}
.c2{
clear: both;
}
</style>
</head>
<body style="margin: auto">
<div class="page-header">
<div class="c1">頁面1</div>
<div class="c1">頁面2</div>
<div class="c1">頁面3</div>
<div class="c1">頁面4</div>
<div class="c1">頁面5</div>
<div class="c2"></div>
</div>
</body>
</html>
圖一：
圖二：
dispaly:
1、display:none；隱藏，也就是不顯示這個標簽，有些視頻網站的開燈關燈會用到，還有彈窗之類的。
2、display:inline；讓當前標簽變成行內標簽。
3、display:block; 讓當前標簽變成塊級標簽。
4、display:inline-block; 讓當前標簽具有行內標簽和塊級標簽的屬性，比如我們知道的行內標簽是無法設置寬度和高度的，如果我們要設置，就可以在當前標簽加上這個屬性，就可以讓它能夠設置這些屬性。
邊距
1、padding（內邊距）
1、內邊距其實簡單理解內部邊距，我們做個案例就知道。
結論：
1、我們給class的c1和c2都設置了高度是150px，但是padding內邊距變成50以后，高度明顯就不只是150px了，所以可以得出結論，padding更像是自我膨脹，數字越大，自己越大。
2、他跟margin唯一想象的是padding:0，上下左右也都是等於0。
3、padding:10px的時候代表上下左右擴充10像素，注意要是行內標簽的話，需要display等於inline-block，才能顯示出來。如果padding：0 10px，代表是上下是0，左右是10像素，寫全的話是padding：0 10px 0 10px，就是上右下左。
2、margin（外邊距）
首先我們定義了一個頭的div，然后我們在div里面再創建一個大的div，寬度設置為980px，在這div里面里面再創建兩個div。分別是收藏本站和登陸注銷按鈕。我們設置收藏本站飄左邊，登陸注銷飄右邊。然后我們讓這個980px的div居中，如下圖，這樣就很漂亮的讓它呈現出來。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>htmltest</title> <style> .page-header { height: 35px; background-color: #dddddd; line-height: 35px; } .c1 { float: left; } .c2 { float: right; } </style> </head> <body style="margin: auto"> <div class="page-header"> <div style="width: 980px;margin: 0 auto"> <div class="c1"> ♥收藏本站 </div> <div class="c2"> <a>登陸</a> <a>注銷</a> </div> <div style="clear: both"></div> </div> </div> </body> </html>
1、margin有很多屬性，常用的margin:0 auto就是說上下間距為0，左右自動。當然也可以單個設置，前面我們知道body其實也是塊級標簽，默認他也是有8px外邊距，怎么讓他去掉這個外邊距呢，就是在body里面加上style="margin:0",或者margin: 0 auto，通過查看屬性我們知道其實都一樣。
2、默認body是的margin:8px，也就是上下左右都是8px。所以以后做html上來就可以設置margin:0；
3、做個案例吧；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>htmltest</title> <style> .c1 { background: red; height: 150px; } .c2 { background: green; height: 150px; margin: 0px; padding: 0px; } </style> </head> <body> <div> <div class="c1">內邊距</div> <div class="c2">外邊距</div> </div> </body> </html>
3、我們先看外邊距
結論：
1、margin:0，這個0是多少，確實就是上下左右都是多少(margin-top: 50px;margin-right: 50px;margin-bottom: 50px;margin-left: 50px;)，如下圖設置：
2、相對第一個div，外邊距就是距離另外一個div的實際距離，相對別人的距離。
3、數字越大，自己就會變得越來越小。
注釋
CSS樣式的注釋是在選擇器的前后加上/*和*/就代表是注釋
/*.c1 {
background: red;
height: 150px;
}
*/
擴展
1、CSS樣式重用的問題。
首先我們要明確的一個問題是，一個標簽可以同時應用多個class，寫法如下，多個class名字中間用空格隔開。我們提列出來通用的樣式可以同時應用多個class。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="common.css">
<style>
.c1 {
width: 500px;
}
.c2{
width: 800px;
}
.c3{
height: 38px;
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="c1 c3"></div>
<div class="c2 c3"></div>
</body>
</html>
2、頁面縮小放大以后樣式變了。
問題：左右寬度不建議直接寫上百分比，否則頁面肯定會變形。
解決辦法：
1、首先我們在設置最外層先設置一個固定的寬度，然后再在固定寬度里面寫好百分比，這樣基本就不會變形了。
3、自適應
問題：菜單里面橫向寫了很多按鈕，一旦點頁面小到一定程度，按鈕就沒了，會一種全新的方式顯示。
示例：
解決思路：
1、當頁面小於一定的跨度，比如600px就會應用一個新的樣式。
4、雙擊圖標是一個超鏈接，直接跳轉到圖標的網頁里面，這里會用到a標簽好img標簽，這里需要注意老一點的IE都會顯示一個邊框，怎么去掉呢。只需要在img標簽里面設置邊框為零即可。注意，所有是0像素的樣式都不用加px單位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="common.css">
</head>
<body>
<a href="https://www.baidu.com" target="_blank">
<img src="123.png" style="border: 0">
</a>
</body>
</html>
position
fixed屬性使用場景
需求：
我們進場看到好論壇之類的網站，往下拉好幾頁的時候右下角有個返回頭部的按鈕，還有好多官網有一個客服的框永遠都在右邊最中間或者下面。那這個時候就用到了position就可以實現了。
1、返回頂部，position: fixed;就代表分層，right: 50px;bottom: 80px，就是靠右邊起往左50像素，從最底下往上80像素，要是top:0;的話，就是距離窗口最上面往下0像素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="common.css">
</head>
<body style="margin: 0">
<div style="height: 50px;width: 50px;background-color: cadetblue;color: brown;position: fixed;right: 50px;bottom: 80px">返回頂部</div>
<div style="height: 5000px;background-color: aliceblue"></div>
<script>
</script>
</body>
</html>
2、“凍結首行”，就是頁面的上線固定。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="common.css"> <style> .pg-header { height: 38px; top: 0; right: 0; left: 0; color: brown; position: fixed; background-color: darkblue; } .pg-body{ height: 5000px; background-color: aliceblue; margin-top: 38px; } </style> </head> <body style="margin: 0"> <div class="pg-header">頭部</div> <div class="pg-body">身體</div> <script> </script> </body> </html>
2、absolute屬性使用場景
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="common.css"> <style> .pg-header { height: 100px; width: 100px; color: brown; position: absolute; background-color: cadetblue; right: 40px; bottom: 500px; } .pg-body{ height: 5000px; background-color: aliceblue; } </style> </head> <body style="margin: 0"> <div class="pg-header">固定窗口</div> <div class="pg-body">身體</div> <script> </script> </body> </html>
固定窗口會永遠固定在網頁的這個問題，上下拉動會跟着網頁一起上下移動。而fixed則會永遠漂浮在某個位置，隨便怎么移動，它都會在那個位置。
3、absolute+relative
absolute在哪取決relative，也就是說absolute只能在relative范圍里面的某個位置，不會超出relative的范圍。一句話absolute相對relative在什么位置，如下示例一。
注意：如果right、top、bottom等於負數，它實際上也是相對relative在什么位置，看上去是超出去了，但還是相對relative，如下示例二。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="common.css"> <style> .pg-header { height: 500px; width: 500px; border: 1px solid red; position: relative; margin: 0 auto; } .pg-body-1 { position: absolute; top: 0; left: 0; width: 50px; height: 50px; background-color: aquamarine; } .pg-body-2 { position: absolute; bottom: 0; right: 0; width: 100px; height: 100px; background-color: chartreuse; } </style> </head> <body style="margin: 0"> <div class="pg-header"> <div class="pg-body-1"></div> <div class="pg-body-2"></div> </div> <script> </script> </body> </html>
示例一：
示例二：
4、三層基礎
1、這里面我們學到了幾個屬性，第一就是透明度opacity: 0.5;等於0.5的時候個人感覺最合適。
2、如果position都等於fixed的時候，誰在前誰在后呢？z-index: 5;誰的z-index值大，誰就在最前面。
3、下圖中黑色陰影部分上下左右都等於0的時候，才能完全遮住瀏覽器。
4、border-radius: 3%;我們平時寫的對話框都方方正正賊丑，用這個參數會和諧一點。
5、怎么才能讓中間白色的框放到正中間呢？如下，它的高和寬等於多少，margin-top和margin-left都得除以2的負數，才能在正中間對其。
height: 400px; width: 600px; margin-top: -200px; margin-left: -300px;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="common.css"> <style> .c1{ background-color: green; width: 100%; height: 2000px; } .c2{ z-index: 5; background-color: black; opacity: 0.5; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } .c3{ z-index: 10; position: fixed; height: 400px; width: 600px; margin-top: -200px; margin-left: -300px; background-color: white; border-radius: 3%; top: 50%; left: 50%; } </style> </head> <body style="margin: 0"> <div class="c1">最后一層</div> <div class="c2"></div> <div class="c3"></div> <script> </script> </body> </html>
效果：
overflow
1、overflow的主要作用就是當圖片太大的時候，為了不撐壞當前的樣式，給他自動加了一個橫豎的拉動框。
overflow: auto;拉動框
overflow: auto;沒有拉動框，最外層限制多少，就顯示圖片的多少。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="common.css">
<style>
.c1{
margin: auto;
background-color: green;
width: 200px;
height: 220px;
overflow: auto;
}
</style>
</head>
<body style="margin: 0">
<div class="c1">
<img src="123.png">
</div>
<script>
</script>
</body>
</html>
效果：
hover
1、當鼠標移動當前標簽以后，顏色就會變了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="common.css"> <style> .c1{ margin: 50px 500px; background-color: cadetblue; border-radius: 10%; height: 45px; width: 70px; line-height: 45px; color: aliceblue; } .c1:hover{ background-color: forestgreen; } </style> </head> <body style="margin: 0"> <div class="c1"> <div>變色按鈕</div> </div> <script> </script> </body> </html>
正常顯示
鼠標放上去以后顯示。
background-image
1、默認background-image上下左右都會不斷復制，一直到左右占滿位置，上下復制多少取決於設置的高度，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="common.css"> <style> .c1{ height: 300px; background-image: url("123.png"); } </style> </head> <body style="margin: 0"> <div class="c1">1234</div> <script> </script> </body> </html>
這里其實是一張圖片。
如果我們不想讓它這么上下左右限制，直接加上background-repeat: no-repeat;就只顯示圖片本身了。
上面我們知道如果要想讓圖片顯示出來就要設置一定的高度，但默認他會橫着豎着都復制，如果我們想讓它豎着復制，就使用background-repeat: repeat-y;
但是如果我們只想讓它橫着復制的話，就得使用background-repeat: repeat-x;參數。
圖片的定位:
1、默認情況下一個網頁不會每個圖標都單獨存放，那網頁的請求就會增多，網站的壓力就會增大，這里有個挺有意思的東西，我們只需要把一張圖標請求過來，剩下的事兒就是定位了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="common.css"> <style> .c1{ height: 20px; width: 20px; background: #dddddd url("456.png") -20px -20px no-repeat; } </style> </head> <body style="margin: 0"> <div class="c1"></div> <script> </script> </body> </html>
效果：
下面是完整寫法，但是如果一旦用的多的話，這么寫代碼就會很多，所以建議上面那種寫。
height: 20px; 設置高度，需要的圖標有多高就寫多少。
width: 20px; 設置寬度，需要的圖標有多寬就寫多少
background-color: #dddddd; 背景色，這里其實可以忽略。
background-image: url("456.png"); 把完整的背景圖片加進來
background-repeat: no-repeat; 不讓它上下左右復制，只顯示圖片本身
background-position-x:-53px; 橫向定位圖標位置
background-position-y: -41px; 豎向定位圖標位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="common.css"> <style> .c1{ height: 20px; width: 20px; background-color: #dddddd; background-image: url("456.png"); background-repeat: no-repeat; background-position-x:-53px; background-position-y: -41px; } </style> </head> <body style="margin: 0"> <div class="c1"></div> <script> </script> </body> </html>
案例一
效果圖
1、首先我們在最外面加了一個div讓它距離頂部35像素，方便截圖，更好的展示效果。
2、設置div寬度400px，高度35像素，設置relative，里面我們設置absolute位置。
3、加一個input標簽，設置跟div一樣的高度。
4、加一個span標簽，讓它可以設置高和寬，用到了display標簽。把圖標加進來，設置高度和寬度讓圖標展現出來。因為div給了relative，這里給了absolute，所以可以設置距離div的高的像素，距離最左邊的像素。
注意，這里為什么input的寬度是360px呢，因為分層了，我們要讓input的寬度加上圖標的寬度剛好等於400px（這400就是div的寬度）。否則我們輸入的字就會被圖標擋住。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="common.css">
<style>
.c1{
height: 35px;
width: 400px;
position: relative;
margin-top: 36px;
}
.input{
height: 38px;
width: 360px;
padding-left: 40px;
}
.span{
background-image: url("678.png");
display: inline-block;
height: 40px;
width: 40px;
position: absolute;
top: 2px;;
left: 0;
}
</style>
</head>
<body style="margin: 0">
<div class="c1">
<input class="input" type="text" >
<span class="span"></span>
</div>
<script>
</script>
</body>
</html>