如果本章演示效果無法正常展示，請至主站查看 http://coffee.zji.me/

我們前邊說過 div+css 布局是招聘時一種懶到家的衡量標準（其實現(xiàn)在 css 已經是前端的基本技能了），就好像招聘文員寫上要求會打字一樣的多余。好吧，雖然這個說法被無數人吐槽著，也有些人較真說這個說法不科學等等。但是我們學習 css 總是繞不開要用到 div 的。

其實 div 就是一個普通的 Html 標簽，普通到什么地步呢？他幾乎沒有任何自帶的樣式，好吧，他就是一個空白的標簽（是樣式是空白的）。一張白紙啊，做什么都好用。我們知道 CSS 的作用就是定義樣式啊，如果我們使用的標簽本身自帶了樣式，我們還要用 CSS 對他進行修改，使其達到我們想要的效果。但是有了 div 就方便了啊，我們只要把我們需要的樣式給他就好了。畢竟新建總是要比修改來的清爽省心。就好像拿張白紙寫字很舒心，但是拿張寫過字的紙過來，你要先把文字擦掉再去寫你想要的文字，就比較鬧心了。

然后說說盒模型，這東西搞了個高大上的名字唬人而已，其實就是把 div 看成一個紙箱，那么一個頁面很多 div 就是一堆紙箱在房子里排開而已。進而的，div 的嵌套就是大箱子套小箱子。就這么回事，比如下圖就是本教程主站的盒模型 3D 視圖：

就是像擺積木一樣擺出了一個頁面，你說要是真的用積木去擺就好了，你就會了。不過其實換做代碼操作也不過是你用電腦能聽懂的語言把各個積木塊的樣子和位置描述一下罷了。

好像……有點亂哦，你想 div 這個空白標簽看起來挺好用的，可是要是頁面上全用他，那可咋區(qū)分??？我在 CSS 里面寫上 div {……} 結果所有 div 全都一起發(fā)生變化了，這就有點亂了。所以我們要給 div 取名字。

其實呢，所有的 Html 元素都可以有名字的，這個名字分為兩種 class 和 id ，用法很簡單，就是當做標簽的一個屬性去寫：

<div id="myid"></div>
<div class="myclass"></div>

就是這樣，當然他們的名字你隨便取，不過別搞怪，寫中文啊，特殊符號啊什么的肯定不行。那么你又問了，取名字就取名字吧，怎么還兩種呢？這個也好理解， id 是學號，class 是班級，反正我們初中的英語老師（為什么不是小學？我們小學沒有英語課呀）就是這么告訴我們的。

然后我們該說說 id 和 class 的區(qū)別了，他們都可以用來標識某個元素，但是他們是有區(qū)別的，否則我們也不用搞兩個名頭出來。你知道的，在學校里一個學號對應一個學生，你報出學號就能找出有且只有一個學生。所以老師提問的時候愛叫學號，肯定有人被叫到（他叫范圍以外的我們就不鳥他了）而且被叫到的肯定是一個人，不會半個班都站起來跟他吼：“報告老師，我不會！”而班級呢？一個班級可以有很多學生，這些學生的特點就是，他們是一個班的（廢話?。?，一個班的應該就是一個年級的，應該就是一樣的年齡，一樣的專業(yè)……反正是一群在某方面屬性一致的家伙。

所以， 在同一頁面內， id 是不可以重復的，不能有兩個元素具有相同的 id。某學校的兩個學生學號一樣，麻煩了，520 號考上了哈佛，結果兩個人，誰去誰不去？就打起來了。

但是，在同一頁面內，可以有多個元素具有相同的 class，三年二班有三十個同學，這很正常，校長說，讓三年二班的同學去表演合唱，那么這三十個同學就都在臺上唱歌，整齊劃一，很好看。

這就是兩者的特點。然后說，我們到 CSS 里面怎么寫呢？這就涉及到了選擇器的問題。先說啥是選擇器，我說頁面中某個元素怎樣怎樣，那么究竟是哪個元素呢？選擇器就是用來告訴我們到底是哪個元素的。比如：

p {
    color:red;
    font-size:12px;
}

這是我們上節(jié)課的代碼，大括號里是一些 CSS 屬性，我們不去管他，前邊的 p 是說這些屬性對所有的 <p></p> 標簽起作用，那么這個 p 就是一個選擇器。

然后要是想對鏈接起作用呢？就是 a {……}，于是你看出門道來了，原來選擇器就是元素的標簽啊，那么 div {……} 這么寫的話，大括號里的 CSS 屬性肯定就對所有的 <div></div> 起作用啦？

沒錯，就是醬紫的！你真聰明～

但是你肯定不會就這么依了我的，剛才我們給 div 取了半天名字，然后到這根本沒用到啊。放心，我們接著就來學習 id 和 class 在 CSS 里面怎么去用。

其實也很簡單的，還是上邊那段代碼，我們給里面加一點點文字用來看效果哦：

<div id="myid">我是文字，用來看效果的</div>
<div class="myclass">我也是</div>

然后 css 寫作：

#myid {
    color:blue;
}
.myclass {
    color:red;
}

效果如下：

這你就明白了，在名字前面加個 # 號就代表 id，在名字前面加個 . 就代表 class。用 # 來開頭作為編號什么的我們很常見，這就記住啦。class 是個很平常的東西，不像 id 那么獨一無二，所以這么平凡大眾的屬性就沒得炫耀了，點個點低調的路過就好。

今天我們認識了 div，還知道了班級（class），學號（id）的特點與寫法。明天我們就開始試著去寫一些東西嘍～

本章學習卡片：卡片 14

本書是收費的，不過交費憑自覺。價格定義為每人請我喝一杯咖啡（哪種品質的咖啡隨意），支付寶賬號：

alay9999@163.com （劉源）

為了讓大家閱讀方便，本書將在如下站點發(fā)布，但最終內容以主站為準：

• 主站首發(fā)： http://coffee.zji.me/
• Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
• 簡書： http://www.jianshu.com/users/d37eaf3de0ff
• 站酷： http://www.zcool.com.cn/u/12927742

未經本人許可，禁止任何形式轉載。相關事宜請聯(lián)系： dms@zji.me