CSS究竟是怎麼工作的?

01-15

我的意思不是CSS入門，而是CSS代碼怎麼令網頁畫出我們想要的結果的，這裡面大致的步驟是怎樣的。工作原理是怎樣的?

瀉藥

問題1：

兩個層面的

1、CSS 2 規範：Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification

2、瀏覽器實現：https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/css/?dr=CSssq=package:chromiumrcl=1470626560

https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/layout/?q=render+file:src/third_party/WebKit/Source/coresq=package:chromiumdr=CSs

問題2:

感覺樓上的幾位都沒有回答到題主真正的想問的。題主問的應該是瀏覽器是如何渲染 CSS 從而產生效果的。

有個經典的問題：從你輸入 URL 到看到頁面都發生了什麼？這個問題回答可長可短，回答詳細了扯上大幾千字都不是問題。這裡我從接收到 HTML，CSS，JS 等各種文件之後開始說，前面的都不是本題重點了。

總的來說，過程分以下幾步：

構建 DOM Tree：HTML 文件載入後，瀏覽器開始構建 DOM Tree，DOM Tree 就是描述 HTML 文檔中元素層疊關係的一棵樹，長這樣

2. 構建 CSSOM 樹：與DOM 類似，我們需要對 CSS 構建樹。首先CSS 位元組轉換成字元，接著轉換成令牌和節點，最後鏈接到一個稱為「CSS 對象模型」(CSSOM) 的樹結構內，CSSOM 樹長這樣

3.合成渲染樹：將 DOM 樹和 CSSOM 樹合併成一棵渲染樹，長這樣

4.繪製/柵格化：我們已經知道各個元素的樣式和布局方式了，接下來就是瀏覽器內核（平時說的 webkit 內核）來計算，將渲染樹中的每個節點轉換成屏幕上的實際像素。

5.繪製到屏幕。

CSS 就是這麼工作噠！

圖片來自網路，更多請參考 https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

去看CSS規範文檔吧，裡面有講。

你要在標籤裡面改的話用style=「」不久可以了？

CSS的原理你可以在網上找到很多，工作流程可以幫助你規範CSS的寫法，尤其是選擇器的套用方面，但也就僅此而已，除非你是要做瀏覽器開發，否則對於前端而言，應該把更多的時間放在具體產品的實現上，因為前端要學的太多了，而你的生命是有限的。

除了樓上的一些信息，看看google 關於rendering path 的教程有助於了解整個頁面如何渲染，以及後續優化

原理：html就是盒子，方塊，圖案，css就是顏色，樣式；當你寫了html，就等於告訴了瀏覽器，幫我把這些盒子、圖案，顯示出來（在電腦屏幕上）；然後你寫上css ，就等於告訴瀏覽器，幫我把這個盒子變紅色，這個文字加粗，這幾個並排....等等，瀏覽器是不會自動的，你寫了什麼命令，他就執行什麼命令