兩周之前寫過該系列的[第一篇](http://www.cnblogs.com/wangfupeng1988/p/4237249.html)，其實當時只是一個想法，這段時間遲遲未更新，是在思考一個解決過程。現在初有成效，就開更吧。 ## 1． 一個段子 　　開題不必太嚴肅，寫博客也不像寫書，像聊天似的寫東西是最好的表達方式。 ?????? 記得之前看過一個段子，也可能是一件真事兒，這不重要。大體內容如下：一個香港的教授說：我們香港的大學和大陸的大學差的很遠啊，大陸的大學連看門保安都懂得哲學，因為當你想要進入校園時，保安都會問你一個很哲學的問題“你是誰，你從哪里來，你到哪里去？”。 ?????? 看完段子的第一反映肯定是很自嘲的笑了，笑了之后就忘了，該干嘛干嘛去了。 ?????? 但是我覺得這句話確實有那么一點高達上的意思，雖然我不知道什么是哲學。“你是誰，你從哪里來，你到哪里去”，如果映射到我們這次CSS教程上，可以提這么幾個問題： 1. CSS是什么，如何深入理解，它和html是個怎樣的關系； 2. CSS有幾種來源（5種來源）； 3. CSS要干什么事情，如何結合html實現的； 　　看過我其他教程的朋友都知道我的原則：我要寫東西，必須又一個我覺得很特別而且很合理、高效的思路，如果沒有我寧可不寫。大部分寫CSS的人一上來可能寫選擇器，但是我不會那樣。 　　閑話不說。要想從根上了解這些問題，還是先從瀏覽器開始吧。 ## 2． 瀏覽器是如何工作的 　　之前看過一篇文章，叫做《[瀏覽器的工作原理：新式網絡瀏覽器幕后揭秘](http://ux.sohu.com/topics/50972d9ae7de3e752e0081ff)》。文章言簡意賅的介紹了瀏覽器的工作過程，web前端程序猿最好了解一下。在此另外推薦一本書《WebKit技術內幕》，筆者很早就關注這本書，已列入近期的讀書計劃。 ?????? 文章中的內容暫且不詳細提，我們先“斷章取義”的只說CSS相關的部分。 ? ?????? 上圖是webkit內核渲染html和css的流程圖。大家可以從圖中看到，html的解析是一條線，css的解析是一條線，兩者會在某一點結合，形成最終的視圖。 ?????? 如果我們以CSS為重點看，從上圖中我們可以總結出學習CSS的三個突破點。 1. **瀏覽器如何加載和解析CSS——CSS的5個來源；** 2. **CSS和html如何結合起來——選擇器；** 3. **CSS能控制那些顯示方式——盒子模式、浮動、定位、背景、字體等；** 　　看到這里，不知道有沒有朋友覺得很興奮？因為我們在學習CSS之前，首先是分析瀏覽器如何加載、處理、使用CSS的，我們按照這個思路去寫CSS的教程。而不是一上來就照本宣科的從id選擇器開始。 我這段時間為何一直沒有寫博客，其實是在冥思苦想一個更加合理、高效的思路和框架。我如果寫出來的東西和別人的一樣，那我自己也覺得沒意思。 ?????? 本系列文章也是按照這個思路和框架，一步一步展開的。 ## 3． CSS的加載過程 ?????? CSS——Cascading Style Sheets——層疊樣式表。“樣式表”大家比較好理解，那何為“層疊”呢？從字面意思來看，層疊肯定是需要多層疊加起來。而這個“多層CSS”到底有幾層，每一層是什么，我們程序猿用到的將是哪些層？這幾個問題將是我們討論的重點。 ?????? 另外，這么多層次疊加，如果出現沖突怎么處理，以哪個為準？這也是我們討論的重點。 ?????? 最后，在這些層次中有一個“瀏覽器默認樣式”層，即瀏覽器默認的各個html元素的樣式。這次我們像瀏覽器這位“機器人”學習一下，看看它寫出來的css能給我們什么幫助。 ## 4． CSS和HTML的結合 　　CSS如何與html結合呢——當然是通過選擇器。CSS提供了多種多樣的選擇器類型，而且每個級別都在不斷的增加新的選擇器類型，使得選擇器更加靈活易用。本系列將拿出一篇文章專門講解選擇器。 　　聰明的人類也通過css提供的選擇器在其他臨近的方面開疆拓土，例如jquery，zen-coding。 　　對css選擇器來說，有一個很重要的話題——級別。在大部分web前端面試題中，你都會看到css選擇器級別的判斷問題。《css設計指南》書中給出了一個概念——特指度，而且給出了計算公式和計算規則，還給出了一個簡單的背誦口訣。想的真周到。 ?????? 最后，與選擇器關聯密切的還有偽類和偽元素，我們也將拿出一篇文章專門講解偽類和偽元素，以及它們最典型的用法。 ## 5． 頁面呈現 　　頁面呈現可以分為兩類——文字，塊。 1. 針對文字來說，我們可以設置字體、字號、加粗、斜體、背景色等等； 2. 對于塊來說情況比較多，有盒子模型、浮動、定位、display、背景等； 　　本系列會拿出很大的篇幅去講解其中的基礎知識，以及他們的一些重點應用。 ## 6． 布局 　　布局是css的重頭戲，每個系統的布局都有其各自的特點。無好無壞，肯定是各有優缺點，不妨拿出幾個比較典型的例子來一起分析一下。例如： 1. 經典三列布局 2. Bootstrap柵格布局 3. 百度首頁布局 4. 微博布局 5. 人人網布局 6. 瀑布流布局 7. …… ## 7． 下一步 　　下面的文章將會一步一步展開本文的描述，從實例和代碼中慢慢道來。繼續期待吧！