css基礎教學 · 我的前端之路

###一、起步 ####開發工具市面上有各種不同的瀏覽器，但是對于前端來說最好用的瀏覽器莫過于chrome，它的調試工具很方便使用，自身也很輕量級，[點擊這里下載chrome](http://www.google.cn/chrome/browser/desktop/index.html)。拋棄你手中的其他瀏覽器吧，至少在寫前端時是這樣的。 ####如何寫樣式說到css就必須說一下它的樣式引入方法，你可能經常看到如下代碼 ~~~ <p style="color:red">text</P> ~~~ style標簽里的東西就是一段css，它將p標簽里面的文本顏色設置為紅色。這種通過直接在標簽內加style屬性的css被稱為行內樣式。這種做法的**唯一**優點就是節省時間，但是缺點也很明顯：html與css緊耦合，不利于優化，只適合寫一些基本樣式。我們再看下面的代碼 ~~~ <html> <head> <style> p{ color:red; } </style> </head> <body> <p>text</p> </body> </html> ~~~ 這種寫在head中的style標簽里的方式叫做嵌入式，與行內樣式比較就會發現body里面只有標簽，所有的樣式都放在style標簽里。下面這種方式是我最推薦的 ~~~ //index.html <html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <p>text</p> </body> </html> //index.css p{ color:red; } ~~~ 可以看到我把樣式單獨放到了一個名字叫做index.css的文件，在head標簽中通過link引入樣式。這樣就實現了html與css的分離，你的html只負責寫標簽，所有的樣式都交給css文件處理。我推薦在項目中新建一個名字叫做css的文件夾，把你的所有樣式都放到這個文件夾里面。 ![](https://box.kancloud.cn/4ec4c3c35a6ce73ee8af624b44d061a5_236x310.png) ###二、正文 ####標簽在開始聊css之前，我覺得有必要列出一些項目中常用的標簽行內元素：span、img、a、button、input、label、select 塊級元素：div、table、ul、form、p、h1-h6 如何區分行內元素和塊級元素呢？行內元素：不帶換行符，一行可以放多個標簽 ~~~ <span>1</span> <span>2</span> <span>3</span> ~~~ ![](https://box.kancloud.cn/4eaf568c8af6d9d19d731601bd92ef1c_291x166.png) 塊級元素：自帶換行符，一行只能放一個標簽 ~~~ <p>1</p> <p>2</p> <p>3</p> ~~~ ![](https://box.kancloud.cn/9b1218833298e6ae396e04cdc5587e07_385x226.png) ####選擇器說完了常用的標簽，我們來說一下選擇器。我們都知道，用行內方式寫css的時候由于是直接寫在標簽的style屬性里的，它可以及時生效，但是現在我們通過link的方式來引入css文件，如何保證讓某些特定樣式在某種和某些標簽中生效呢？這就是選擇器的作用。常用的選擇器有三種：標簽、id、class ~~~ p{ color:red; } #myId{ color:red; } .myClass{ color:red; } <p>text</p> <p id="myId">text</p> <p class="myClass">text</p> ~~~ 這三個的結果是一樣的，不過要盡可能地避免使用id，最好全部用class。這是因為id是不能重復的，也就意味的同一個html文件不可能出現兩個相同名字的id。而class是允許重復的，如果一個html文件有5個class為myClass的標簽，那么.myClass的樣式會對這5個標簽都生效。如果你使用的是asp.net的控件，它會自動生成ID，但請在它的旁邊加上一個class，然后通過class來設置樣式。 ![](https://box.kancloud.cn/157fab020cda731c63717786fcc79463_318x36.png) 除了上面三種基本的選擇器外，還有一些高級的選擇器，具體用法可以參考[w3c的文檔](http://www.w3school.com.cn/cssref/css_selectors.asp)，這里不再贅述。 ####顏色和邊框 color：設置文本顏色 background-color：設置背景色 border：設置邊框 ~~~ //假設有這么一個div div{ width:100px; height:100px; color:red; background-color:blue; border:1px solid black; } ~~~ ![](https://box.kancloud.cn/b46adf87395766961a04da0e82989057_299x146.png) ####內外邊距 padding（內邊距）：該標簽與該標簽內的其他標簽之間的距離 margin（外邊距）：該標簽與其他同級的標簽之間的距離你可以把一個標簽想象成一個盒子，內邊距越大，盒子能放的東西越少，外邊距越大，兩個盒子之間的距離就越大。我們在與div同級的位置加一個button ![](https://box.kancloud.cn/cfe660ed2d04b45224c76c88bc1d3f3b_404x185.png) 你會發現這個button與div距離很緊湊，使用外邊距就可以解決這個問題 ~~~ button{ margin-top:10px; } //給div設置margin-bottom:10px;也會達到同樣的效果 ~~~ ![](https://box.kancloud.cn/8989df5ac2b42fb215a38ca03985190a_477x191.png) 現在div下面有一段文字“這是一個div”，我想把這段文字離div的頂部遠一點，這時候就用到了內邊距 ~~~ div{ width:100px; height:100px; color:red; background-color:blue; border:1px solid black; padding-top:10px; } ~~~ ![](https://box.kancloud.cn/d12d91b1d9e8d3e4f4757d6050f3166f_390x203.png) 無論是padding還是margin都擁有-left、-right、-top、-bottom，代表著左內外邊距、右內外邊距、上內外邊距、下內外邊距 ~~~ div{ margin-top:1px; margin-right:2px; margin-bottom:3px; margin-left:4px; padding-top:1px; padding-right:2px; padding-bottom:3px; padding-left:4px; } ~~~ 如果你覺得這么寫太麻煩了，可以對它們進行簡化 ~~~ div{ margin:1px 2px 3px 4px;//上、右、下、左，順序不能變 padding:1px 2px 3px 4px;//上、右、下、左，順序不能變 } ~~~ 如果你的四個方向都值都一樣，可以再簡化 ~~~ div{ margin:1px;//上、右、下、左全是1px padding:1px;//上、右、下、左全是1px } ~~~ ####流式布局假設有以下需求：讓兩個div水平排放 ~~~ .first{ width:100px; height:100px; background-color: red; } .second{ width:100px; height:100px; background-color: blue; } <div class="first">這是第一個div</div> <div class="second">這是第二個div</div> ~~~ 然而結果并沒有達到需求，這是因為div是塊級元素，自身帶換行符 ![](https://box.kancloud.cn/6c7f40502e4739bb6d630ed07ad7bd36_427x225.png) 流式布局（float），無視元素本身行內或塊級的限制，針對于父層進行浮動 ~~~ .father{ width:200px; height:100px; } .first{ width:100px; height:100px; background-color: red; float:left; } .second{ width:100px; height:100px; background-color: blue; float:left; } <div class="father"> <div class="first">這是第一個div</div> <div class="second">這是第二個div</div> </div> ~~~ ![](https://box.kancloud.cn/39fe441230b0eef787ee10d66f7f80c4_399x177.png) ####絕對定位新增需求：兩個div重疊到一起方法一：使用float ~~~ .father{ width:200px; height:100px; } .first{ width:100px; height:100px; background-color: red; float:left; } .second{ width:100px; height:100px; background-color: blue; float:left; margin-left:-100px; } <div class="father"> <div class="first">這是第一個div</div> <div class="second">這是第二個div</div> </div> ~~~ 通過設置第二div的左外邊距為-100px，也就是說它與第一個div的距離是-100px ![](https://box.kancloud.cn/7537592de62a8edc5eff3eab3db3e9dc_355x179.png) 方法二：使用絕對定位什么是絕對定位？以父層div為參照物，通過top、left、right、bottom（默認全部為0px）來決定它在父層內的位置。它就像一個漂浮層，飄在父層里面。在絕對定位中margin是無效的，你只能通過上面四個方向值來決定它的位置，但是可以使用padding來設置它里面的內容邊距。 ~~~ .father{ width:200px; height:100px; position:relative;//指定該div作為參照物 } .first{ width:100px; height:100px; background-color: red; position:absolute; } .second{ width:100px; height:100px; background-color: blue; position:absolute; } <div class="father"> <div class="first">這是第一個div</div> <div class="second">這是第二個div</div> </div> ~~~ ![](https://box.kancloud.cn/b0c47e562b4e187c7d0e022275ea1502_388x163.png) 現在使用絕對定位讓兩個div平行 ~~~ .father{ width:200px; height:100px; position:relative;//指定該div作為參照物 } .first{ width:100px; height:100px; background-color: red; position:absolute; } .second{ width:100px; height:100px; background-color: blue; position:absolute; left:100px;//相對于父層元素father向左平移100px; } <div class="father"> <div class="first">這是第一個div</div> <div class="second">這是第二個div</div> </div> ~~~ ![](https://box.kancloud.cn/aedfe02478a26577204b82c58a2765f7_380x194.png) ####display和visible 如果我們想把一個標簽隱藏，既可以使用visibility：hidden，也可以使用display：none，這兩者本質的區別就在于visibility：hidden只是把標簽隱藏，但它本身還在那里，還是占據空間的。但是display：none是完全移除這個標簽，不會占據空間 ~~~ .father{ width:300px; height:100px; } .first{ width:100px; height:100px; background-color: red; float:left; } .second{ width:100px; height:100px; background-color: blue; float:left; visibility:hidden } .third{ width:100px; height:100px; background-color: yellow; float:left; } <div class="father"> <div class="first">這是第一個div</div> <div class="second">這是第二個div</div> <div class="third">這是第三個div</div> </div> ~~~ ![](https://box.kancloud.cn/27be35613b95bf490514faa782a95bea_480x210.png) ~~~ .father{ width:300px; height:100px; } .first{ width:100px; height:100px; background-color: red; float:left; } .second{ width:100px; height:100px; background-color: blue; float:left; display:none } .third{ width:100px; height:100px; background-color: yellow; float:left; } <div class="father"> <div class="first">這是第一個div</div> <div class="second">這是第二個div</div> <div class="third">這是第三個div</div> </div> ~~~ ![](https://box.kancloud.cn/01a1f4c867c80bf4cb0b8e5ebf1e0b10_379x161.png) 如何把隱藏掉的標簽顯示出來？ visibility：hidden——visibility：visible， display：none——display：block（如果該元素為塊級元素） display：none——display：inline（如果該元素為行內元素） ####其他一些常用的樣式屬性 1、font-size：文字的字體大小 2、font-weight：文字的粗細（一般設為bold就好） 3、font-family：文字的字體 4、line-height：兩行文字之間的行間距 5、cursor：鼠標的樣式（pointer比較常用） 6、overflow：當內容超出寬度和高度限制時的解決方法 7、text-align：文字在標簽中的對齊方式（默認向左，可以設置為center讓它居中） ####備注項目中常用到的css都在上文中一一說明了，你可能還會用到偽類，參考[w3c的文檔](http://www.w3school.com.cn/css/css_pseudo_classes.asp)就好。 ####Bootstrap 非前端研發方向的你肯定對自己手寫樣式十分頭疼，你希望有一個框架，可以幫你完成大部分的樣式，只需要自己手寫一些基本代碼進行微調整。在這里我安利一個樣式框架：Bootstrap，點擊[這里](http://v3.bootcss.com/)查看文檔。如何使用？首先把Bootstrap下載下來（選擇生產環境） ![](https://box.kancloud.cn/86161b4c5d75797da6a91f4d783fcacd_340x204.png) 把它的bootstrap.min.css引入到你的html中 ![](https://box.kancloud.cn/c8ccf40e556a69fc7eb918a972c1a55b_512x60.png) bootstrap幾乎所有的樣式都是用class申明的，只要你引入了它的樣式文件，直接在標簽中添加相應的class即可（參考它的文檔）。在這里我用table來舉例 1、不使用bootstrap ~~~ <html> <head> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <table> <thead> <tr> <th>標題1</th> <th>標題2</th> </tr> </thead> <tbody> <tr> <td>第一行內容1</td> <td>第一行內容2</td> </tr> <tr> <td>第二行內容1</td> <td>第二行內容2</td> </tr> </tbody> </table> </body> </html> ~~~ ![](https://box.kancloud.cn/ece7c43ff447ae0de2784380b4d2e61e_207x92.png) 2、使用bootstrap 參照文檔，直接加上class="table"即可 ~~~ <html> <head> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <table class="table"> <thead> <tr> <th>標題1</th> <th>標題2</th> </tr> </thead> <tbody> <tr> <td>第一行內容1</td> <td>第一行內容2</td> </tr> <tr> <td>第二行內容1</td> <td>第二行內容2</td> </tr> </tbody> </table> </body> </html> ~~~ ![](https://box.kancloud.cn/8329834d225877969f5da27a68ec661b_1291x167.png) 我們把它放到一個面板中 ~~~ <html> <head> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <div class="panel panel-default"> <div class="panel-heading"> <span class="panel-title">這是一個table</span> </div> <div class="panel-body"> <table class="table"> <thead> <tr> <th>標題1</th> <th>標題2</th> </tr> </thead> <tbody> <tr> <td>第一行內容1</td> <td>第一行內容2</td> </tr> <tr> <td>第二行內容1</td> <td>第二行內容2</td> </tr> </tbody> </table> </div> </div> </body> </html> ~~~ ![](https://box.kancloud.cn/8f4289db6eb14b3d34b1e786af8d5a2d_925x263.png) 接下來要做的就是自己手寫css樣式對bootstrap進行微調首先新建css文件，并在html中引入它（注意要放到bootstrap.min.css的下面） ![](https://box.kancloud.cn/961387a509da37f0a1bb89acb817d549_465x70.png) ~~~ .panel{ width:500px; margin:0 auto;//讓div相對于父層（這里就是body）水平居中 } ~~~ ![](https://box.kancloud.cn/bb1e4080ae427c7b55b38d97d44f4808_672x325.png) 小技巧：當你發現你的樣式沒有覆蓋bootstrap的樣式的時候，檢查一下你的css文件引入順序（一定要放在bootstrap的下面），如果順序沒問題，嘗試通過！important提升優先級 ~~~ .panel{ width:500px !important; margin:0 auto;//讓div相對于父層（這里就是body）水平居中 } ~~~ 關于css的優先級可以參考我的另一篇文檔 [css優先級](http://www.hmoore.net/xiaoxiaoqc/web/194488) 關于如何實現水平垂直居中可以參考 [水平垂直居中那些事](http://www.hmoore.net/xiaoxiaoqc/web/153278)