重拾css(3)——學習css的思路

衆所周知，css的運行環境是瀏覽器，那麼咱們有必要先來認識下瀏覽器。

1.瀏覽器是怎樣工做的

有篇文章叫《瀏覽器的工做原理：新式網絡瀏覽器幕後揭祕》，文中言簡意賅的介紹了瀏覽器的工做過程，咱們先將css拎出來講說。

上圖是webkit內核渲染html和css的流程圖。你們能夠從圖中看到，html的解析是一條線，css的解析是一條線，二者會在某一點結合，造成最終的視圖。

若是咱們以CSS爲重點看，從上圖中咱們能夠總結出學習CSS的三個突破點。

1. 瀏覽器如何加載和解析CSS——CSS的5個來源；

2. CSS和html如何結合起來——選擇器；

3. CSS能控制哪些顯示方式——盒子模式、浮動、定位、背景、字體等；

本系列文章也是按照這個思路和框架，一步一步展開的。

2.css的加載過程

css(Cascading Style Sheets)即層疊樣式表。「樣式表」你們比較好理解，那何爲「層疊」呢？從字面意思來看，層疊確定是須要多層疊加起來。而這個「多層CSS」到底有幾層，每一層是什麼，咱們程序猿用到的將是哪些層？這幾個問題將是咱們討論的重點。

另外，這麼多層次疊加，若是出現衝突怎麼處理，以哪一個爲準？這也是咱們討論的重點。

最後，在這些層次中有一個「瀏覽器默認樣式」層，即瀏覽器默認的各個html元素的樣式。此次咱們向瀏覽器這位「機器人」學習一下，看看它寫出來的css能給咱們什麼幫助。

3.css與html的結合

CSS如何與html結合呢——固然是經過選擇器。CSS提供了多種多樣的選擇器類型，並且每一個級別都在不斷的增長新的選擇器類型，使得選擇器更加靈活易用。本系列將拿出一篇文章專門講解選擇器。

聰明的人類也經過css提供的選擇器在其餘臨近的方面開疆拓土，例如jquery，zen-coding。

對css選擇器來講，有一個很重要的話題——級別。在大部分web前端面試題中，你都會看到css選擇器級別的判斷問題。《css設計指南》書中給出了一個概念——特指度，並且給出了計算公式和計算規則，還給出了一個簡單的背誦口訣。想的真周到。

最後，與選擇器關聯密切的還有僞類和僞元素，咱們也將拿出一篇文章專門講解僞類和僞元素，以及它們最典型的用法。

4.頁面呈現

頁面呈現能夠分爲兩類——文字，塊。

1. 針對文字來講，咱們能夠設置字體、字號、加粗、斜體、背景色等等；

2. 對於塊來講狀況比較多，有盒子模型、浮動、定位、display、背景等；

本系列會拿出很大的篇幅去講解其中的基礎知識，以及他們的一些重點應用。

5.佈局

佈局是css的重頭戲，每一個系統的佈局都有其各自的特色。無好無壞，確定是各有優缺點，不妨拿出幾個比較典型的例子來一塊兒分析一下。例如：

• 經典三列布局

• Bootstrap柵格佈局

• 百度首頁佈局

• 微博佈局

• 人人網布局

• 瀑布流佈局

• ... ...