學習CSS的思路（轉）

兩週以前寫過該系列的第一篇，其實當時只是一個想法，這段時間遲遲未更新，是在思考一個解決過程。如今初有成效，就開更吧。

1． 一個段子

　　開題沒必要太嚴肅，寫博客也不像寫書，像聊天似的寫東西是最好的表達方式。

       記得以前看過一個段子，也多是一件真事兒，這不重要。大致內容以下：一個香港的教授說：咱們香港的大學和大陸的大學差的很遠啊，大陸的大學連看門保安都懂得哲學，由於當你想要進入校園時，保安都會問你一個很哲學的問題「你是誰，你從哪裏來，你到哪裏去？」。

       看完段子的第一反映確定是很自嘲的笑了，笑了以後就忘了，該幹嗎幹嗎去了。

       可是我以爲這句話確實有那麼一點高達上的意思，雖然我不知道什麼是哲學。「你是誰，你從哪裏來，你到哪裏去」，若是映射到咱們此次CSS教程上，能夠提這麼幾個問題：

1. CSS是什麼，如何深刻理解，它和html是個怎樣的關係；
2. CSS有幾種來源（5種來源）；
3. CSS要幹什麼事情，如何結合html實現的；

 

　　看過我其餘教程的朋友都知道個人原則：我要寫東西，必須又一個我以爲很特別並且很合理、高效的思路，若是沒有我寧肯不寫。大部分寫CSS的人一上來可能寫選擇器，可是我不會那樣。

　　閒話不說。要想從根上了解這些問題，仍是先從瀏覽器開始吧。

2． 瀏覽器是如何工做的

　　以前看過一篇文章，叫作《瀏覽器的工做原理：新式網絡瀏覽器幕後揭祕》。文章言簡意賅的介紹了瀏覽器的工做過程，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． 下一步

　　下面的文章將會一步一步展開本文的描述，從實例和代碼中慢慢道來。繼續期待吧！

---------------------------------------------------------------

本系列的目錄頁面：http://www.cnblogs.com/wangfupeng1988/p/4325007.html

-------------------------------------------------------------------------------------------------------------

歡迎關注個人微博。

也歡迎關注個人教程：

《用grunt搭建自動化的web前端開發環境》《從設計到模式》《深刻理解javascript原型和閉包系列》《微軟petshop4.0源碼解讀視頻》《json2.js源碼解讀視頻》