一、css簡介 css（Cascading Style Sheets）層疊樣式表，是一種為html文檔添加樣式的語言，主要有兩個功能：渲染和佈局。使用css主要關註兩個點：查找到標簽，屬性操作 二、css的引入方式 （1）行內式引入： 直接在html語句的屬性中設置，這種方法的缺點是html代碼和c ...
一、css簡介
css（Cascading Style Sheets）層疊樣式表，是一種為html文檔添加樣式的語言，主要有兩個功能：渲染和佈局。使用css主要關註兩個點：查找到標簽，屬性操作
二、css的引入方式
（1）行內式引入：
<div style="color:red;font-size: 16px">hello</div>
直接在html語句的屬性中設置，這種方法的缺點是html代碼和css代碼混合在一起，耦合性太強，維護困難
（2）嵌入式引入：
<style> div{ color: red; font-size: 16px; background: grey; } </style>
在html中head部分添加css樣式
（3）鏈接式引入：
單獨寫一個css文件，在html的頭文件中引入。這種方式最常用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <link rel="stylesheet" href="index.css">
（4）導入式：
在style標簽中引入外部的css文件
<style type="text/css"> @import "index.css"; </style>
導入式和鏈接式引入有區別：
a.載入方式不同：導入式會先導入html,再用css渲染，如果此時網路卡了，在瀏覽器上顯示的就是沒有樣式的內容，然後再一點點渲染，而鏈接式是一塊載入的
b.鏈接式鏈接文件數量沒有上限，但是導入式有上限
三、css選擇器
上面四種引入css樣式的方法中，除了缺點最明顯的行內式，其他三種方法都需要先找到標簽，才能對標簽樣式進行操作
1.基本選擇器
- 通配選擇器 *{color：red}
- 標簽選擇器 div{background:green}
- id選擇器 #user{font-size:12px}
- class選擇器 .user{border:1px solid red}
我們在html那篇博客里提到過id，id唯一標識一個標簽，但是如果我們想對一系列標簽添加同樣的樣式，肯定不能都用id,可以用class，從字面上理解就是一類具有類似作用的標簽，在選擇這些標簽時用“點類名”的方式，而且class 也沒有不能重名的限制
通用選擇器一般用在預處理，初識化的時候
2.組合選擇器
有時只用基本選擇器並不能讓我們準確找到標簽，還需要用到一些組合標簽
- c1,c2 多元素選擇器，同時匹配所有的c1元素和c2元素
- c1 c2 後代選擇器，匹配所有屬於c1後代的c2元素
- c1 > c2 子代選擇器，用後代選擇器有個問題，所有屬於c1的後代都會被選擇，包括孫子代，用子代選擇器就不會有這個問題，子代選擇器只會選擇自己的兒子這一層級
- c1+c2 毗鄰元素選擇器，匹配所有緊挨著c1元素之後的同級元素
- c1~c2 普通兄弟元素，這個和毗鄰元素選擇器的區別就是，沒有了緊挨著的限制
3.屬性選擇器
對於標簽的固有屬性，如id和class，可以通過#或.的方式找到。
如果是自定義屬性，就要通過中括弧的方式
<style> #cl1{ color: #000; } .c1{ font-size: 12px; } div[zhang]{ background: red; } </style> </head> <body> <div class="c1" id="cl1" zhang="123">123</div> </body>
當有多個相同的自定義屬性時，還可以用屬性值區分，如div[zhang="123"]{}
四、偽類
1.anchor偽類：
我們瀏覽網頁的時候，有時會遇到滑鼠放在一個元素上時，元素會發生變化的情況，這就是通過anchor偽類實現的，不止有滑鼠懸浮的樣式，還可以設置點擊時，以及點擊後的樣式
a:link 預設狀態
a:hover 滑鼠懸浮在元素上的樣式
a:visited 點擊過的元素的樣式
a:active 在元素上按下滑鼠時的樣式
這四個標簽是針對於a標簽用的，但不限於a標簽，其中hover是最常用的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> .out{ width: 300px; height: 300px; background: greenyellow; } .out:hover{ background: red; } .out:visited{ background: white; } .out:active{ background: black; } </style> </head> <body> <div class="out"> <div class="c1"></div> <div class="c2"></div> </div> </body> </html>View Code
還可以在父級添加偽類，修改子級標簽，這種情況應用也很廣泛
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> .out{ width: 300px; height: 300px; background: greenyellow; } .c1{ width: 100px; height: 100px; background: gold; } .out:hover .c1{ background: red; } .out:visited{ background: white; } .out:active{ background: black; } </style> </head> <body> <div class="out"> <div class="c1"></div> <div class="c2"></div> </div> </body> </html>View Code
2.before after偽類
這個偽類的作用是在選擇的標簽的前面或者後面加一個內容
<style> p:after{ content: 'world'; color: #2b99ff; } </style> </head> <body> <p>hello</p> </body>
這樣會在瀏覽器中顯示helloworld，但是從網頁的html源碼中是找不到world的，這個偽類的主要作用就是把一些會讓讀者看不懂的代碼，寫到偽類中，比如佈局的時候需要一個空的div標簽，如果寫到源碼中，讀者讀到這個位置可能會造成誤解。所以就寫到偽類中。content的屬性值，更多的時候是空的。
五、選擇器的優先順序
如果我們不小心用不同的選擇器，選定了同一個標簽，那這個標簽的樣式，應該取決於哪個選擇器呢，這就用到了選擇器的優先順序。
不同的選擇器，有不同的權重值，
行內式： 1000
id： 100
class： 10
element（標簽）： 1
還有兩種，一種是在樣式後面加！import的，這種是不看規則的，他的權重最高，惹不起
另一種就是預設繼承的樣式，這種最慫，權重值最低
遇到子類，權重值是相加的
那種差十倍的，咱們就不比較了，就比較個差一個權重的，意思意思就行了
<style> .c3{ background: red; } .c2 .c3{ background: green; } .c1 .c2 .c3{ background: gold; } </style> </head> <body> <div class="c1"> <div class="c2"> <div class="c3">123</div> </div> </div> </body>
這個例子，.c3的權重值是10，
.c2 .c3的權重是10+10=20，
.c1 .c2 .c3 的權重值是10+10+10=30
所以最終結果，背景顏色一定是金黃色，通過這個例子就能明白選擇器的優先順序
以後如果遇到樣式改不了的情況，就要考慮是否在之前有比它優先順序更高的標簽
六、css屬性
1.字體的屬性
（1）顏色：設置顏色有三種方式：
- 十六進位值，如#3e3e3e
- RGB值，如RGB（255,255,0）
- 顏色的英文名稱，如red，green
- rgba :在RGB的時候，還可以指定透明度，如 RGBa（255,120,120,0,5）
（2）對齊方式：預設是左對齊
對齊方式的屬性是text-align,屬性值：
- left 左對齊
- center 居中
- right 右對齊
- justify 兩端對齊
（3）其他屬性
font-size: 12px;文本字體大小
font-weight: 500;字體粗細，100-900
font-family: Arial;字體庫
font-style: italic;斜體;
line-height: 20px;行高
vertical-align: middle;設置元素的垂直對齊方式，對塊級元素無效
text-decoration: none;這個主要用於去除a標簽的下劃線，當然也可以添加下劃線
text-indent: 100px;首行縮進
word-spacing: 10px;單詞間距
letter-spacing:20px;字元間距
text-shadow:2px 2px #ff000;文字陰影
text-transform:uppercase; 文本轉換屬性，把所有字母變成大寫
重點說一下vertical-align和line-heigh,這兩個屬性在對齊的時候經常會用到
（1）vertical-align
每一個元素自身都會有四條線，頂線，中線，基線，底線
讓圖片和文字在一行顯示的時候，預設是按照基線對齊的，我們可以在圖片標簽的樣式中設置按中線對齊或者底線
（2）line-height
對於塊級標簽，把行高設置成和塊級元素的高度一樣，就會垂直居中了。
2.背景
我們知道可以在標簽的樣式中加背景色，其實背景不僅可以是純色，還可以是圖片
background: url("logo.png") no-repeat 0 0;
- url後面放的是圖片的地址，可以是本地地址，也可以是網路地址
- no-repeat是設置圖片的的填充方式，還可以設置成橫向填充（repeat-x），縱向填充（repeat-y）
- 最後兩個值是圖片位置，以像素為單位，0 0 就表示在頁面的左上角，可以設置成center center 就在頁面中心了
把背景設置成圖片，應用最多的是網頁上的小圖標，大部分這些圖標並不是一張張小的圖片，而是一整張大的圖片，包含很多小圖標，通過移動位置讓他們在希望的位置顯示想要的部分。
3.邊框
有三個屬性：border-width:1px邊框寬度
border-style:solid邊框樣式，可以是實心也可以是虛線、點實線。。。
border-color:red 邊框顏色
使用的時候一般都簡寫成 border：1px solid red 這三個屬性值沒有順序
還可以單獨設置四個方向的邊框
可以用邊框的性質畫一個三角形：
<style> div{ width: 0; height: 0; border:50px solid green; border-bottom-color: red; border-top:none;; } </style>View Code
4.列表屬性
在html中，列表的每一項前面的圓點我們沒辦法修改，在css中就可以了
list-style-type 設置列表項標誌的類型，disc是實心圓點，square是正方形實心塊。。
list-style-image 用圖片當作列表項的標誌
list-style-position 設置列表項標誌的位置
但是，以上用的都不多，用的最多的是取消列表項標誌
list-type:none
七、display屬性
有四個屬性值：none，block,inline ,inline-block
1.none
display:none 隱藏標簽，這個隱藏的意思是不僅這個標簽看不到了，而且這個標簽在頁面中占據的位置也沒有了，其他內容會來占據這個位置，比如京東天貓這些網站的首頁中那個輪播圖，其實是好多張圖片都在同一個位置，但是同一時刻只顯示一張，其他的都隱藏 了
2.block 把內聯標簽變成塊級標簽
塊級標簽在頁面中是獨占一行的，可以設置寬度和高度
而內聯標簽是併排顯示，除非一行放不下了才會換行，內聯標簽設置寬高無效
3.inline 把塊級標簽變成內聯標簽
4.inline-block，這個才是最常用的，這個屬性可以讓標簽既能併排顯示，又有塊級標簽可以設置寬高的特性
八、盒子模型
網頁上的每個元素，都可以理解為一個盒子，盒子有自己的空間，有寬度（width）和高度（height），盒子裡面存放東西（content）,存放的東西與盒子間的距離就是內邊距（padding），盒子有自己的邊框（border），盒子與盒子之間的距離叫做外邊距（margin）
事實上，我們也應該把每個塊級元素都當作一個盒子，不指定寬高的話，預設寬度是瀏覽器寬度，預設高度是內容高度
可以單獨設置四個方向的邊距，分別為top,right,bottom,left
設置maigin或者padding時，後面的值可以設置一個，也可以設置多個，順序是上，右，下，左
margin:10px; 表示盒子上下左右四個邊距都是10px
margin:10px,20px; 表示盒子上下邊距是10px，左右是20px
margin:10px,20px,30px; 上邊距10px,右邊距20px,下邊距30px
如果兩個同級盒子的上下邊距設置分別為10px和20px，最終兩個併列的盒子之間的距離是20px，會取兩個值的最大值，而不是兩個值相加
我們來看一下父級塌陷問題
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> *{ margin:0; } .c1{ width: 300px; height: 100px; background: gold; } .c2{ background: purple; } .c3 { width: 100px; height: 100px; background: green; } .c4{ width: 100px; height: 100px; background: #2b99ff; } </style> </head> <body> <div class="c1"></div> <div class="c2"> <div class="c3"></div> <div class="c4"></div> </div> </body> </html>
看一下這個例子，c1和c2是兄弟關係，c3，c4是c2的子級，現在在瀏覽器中是這樣的：
現在給c3加一個margin-top：30px;再來看效果：
可以看到，c3的父親c2也跟著向下移動了，這就是父級塌陷現象
這顯然不是我們想要的，出現這個問題的原因是這個父級標簽沒有內容，當子級標簽加上margin-top這個屬性後，他會往自己的上方找。如果找到的是兄弟標簽，那沒有問題。但是如果找到的是父級標簽，就要看這個父親是不是合格的父親（有沒有內容），如果沒有內容，就不認這個父親了，就會以自己代碼之上的另一個標簽為基準，修改自己的上邊距，如果上面沒有元素，就會以body為準。
解決這個問題的方法就是：給父級標簽加上內容，有幾個方法：有邊界border可以，有內邊距padding可以，有內容content也可以。
還有一個方法，在父級標簽的樣式中加上 overflow:hidden 這種方法算是掩耳盜鈴吧，雖然能解決問題，但不推薦用
margin還有一個常用的地方，就是調整子元素 在父標簽左右居中
margin:0 auto; 第一個值是上邊距，可以根據需要調整
九、float屬性
正常情況下，我們寫的標簽在網頁中是自動按照從左到右，從上到下的順序依次排列的，其中內聯標簽是併列擺列，塊級元素是獨占一行，這就是正常文檔流
如果將元素浮動起來，從普通排版中拿開，那麼其他元素在定位的時候就會忽略這些元素，這些元素就叫脫離正常文檔流
float屬性就是會讓元素浮在正常文檔流之上，可以向左飄或者向右飄，如果所有的標簽都浮動起來，那就既可以調寬高，又可以在一排顯示了，和display：inline-block;的效果一樣
當塊級標簽在定位的時候，如果他的上一個標簽是正常文檔流，就貼到他的垂直下方
如果是浮動流，就併排貼到它的右邊
問題又來了，看這個例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> *{ margin:0; } .c2{ border: 1px solid red; } .c1{ width: 300px; height: 200px; background: gold; } .c3 { width: 100px; height: 100px; background: green; float: left; } .c4{ width: 100px; height: 100px; background: #2b99ff; float: left; } </style> </head> <body> <div class="c2"> <div class="c3"></div> <div class="c4"></div> </div> <div class="c1"></div> </body> </html>View Code
在這個例子中， 在父級標簽c2下麵的c1標簽被c2的子標簽覆蓋，同時父級標簽坍縮成一條線
出現這個問題的原因是兩個子元素浮動起來後，脫離了正常文檔流，父標簽沒有內容，也沒有被兩個有內容的子元素撐開，因此坍縮成了一條線，解決方法：
1.
首先想到的應該是給父級標簽加一個固定高度，這樣不管有沒有內容，位置反正都已經占好了。但是這個高度應該加多少呢，至少要能包含住子元素，又不能高出很多，這是個問題，而且這個方法很笨重，一點都不優雅
2.清除浮動
這裡用到一個新的屬性：清除浮動 clear，有四個屬性值
none: 預設值，允許兩邊有浮動元素
left: 左邊不允許有浮動的元素
right: 右邊不允許有浮動元素
both: 兩邊都不允許有浮動元素
clear只會對自身起作用，不會影響其他元素。
有了這個屬性，我們在c1標簽中添加這個屬性，就可以解決現在的問題
但是問題還是沒有徹底解決，首先c2還是坍縮成了一條線，另外還有個問題，c1標簽添加margin屬性的時候會發現，margin失效了
3.
在父級標簽中再加一個有內容的塊級標簽，對這個標簽清除浮動，有內容但是不能對整體佈局造成影響，所以內容設置為空
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> *{ margin:0; } .c2{ border: 1px solid red; } .c1{ width: 300px; height: 200px; background: gold; clear: both; margin-top: 10px; } .c3 { width: 100px
