[譯] 如何學習 CSS

• 原文地址：How To Learn CSS
• 原文做者：Rachel Andrew
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：Mcskiller
• 校對者：Reaper622, Qiuk17

摘要：你不須要強行記住每個 CSS 屬性和值，有不少地方能夠方便你快速去查閱。可是記住一些基礎的知識點會讓你使用起來更加駕輕就熟。本文旨在引導你如何學習 CSS。

我遇到不少人叫我給他們推薦 CSS 各個知識點的教程，或者問我應該怎麼學習 CSS。我也看到不少人對 CSS 的部份內容感到困惑，一部分緣由是由於他們對語言的過期認知。鑑於 CSS 在過去的幾年間改變了不少，也是時候來更新你掌握的知識了。即使 CSS 只佔你所作工做的一小部分（由於你在棧的別處工做），CSS 就像你想他們最終在屏幕上看到的那樣，因此值得合理更新。

所以，本文旨在概述 CSS 的要點以及提供一些資源，以進一步學習現代 CSS 開發的主要內容。其中許多都是 Smashing Magazine 上的東西，但我也提供了其餘的一些資源，其中包括人們關注的 CSS 要點。這不是一個完整的初學者指南或者絕對涵蓋全部知識點的文章。個人目標是以幾個重要知識點展現現代 CSS 的廣度，這將有助於你學習其餘語言。

語言基礎知識

對於 CSS 的大部份內容，你不須要擔憂學習屬性和值。你能夠在須要時查找它們。然而，學習 CSS 須要一些關鍵的基礎知識，若是沒有這些基礎，你會很難去理解它。因此它真的值得你去花時間理解，從長遠來看，它將會爲你的學習帶來諸多便利。

選擇器，不只僅是 Class

選擇器顧名思義，它 選擇 文檔的某些部分，以便你能夠將 CSS 應用到上面。雖然大多數人都熟悉使用 Class，或者直接設置諸如 body 之類的 HTML 元素，可是這裏還有大量更高級的選擇器能夠根據文檔中的位置來選擇元素，多是由於它們在某些元素的後邊，也多是表格中的奇數行。

Level 3 規範中的選擇器（你也許聽過它們被稱爲 Level 3 選擇器）具備 優秀的瀏覽器兼容性。更多有關使用各類選擇器的詳細信息，請參考 MDN Reference。

一些選擇器的效果就像你在文檔中運用 class 選擇器同樣。例如，p:first-child 就像你在第一個 p 元素中添加了一個 class 同樣，這些被稱爲 僞類 選擇器。僞元素 選擇器就好像一個元素是動態插入的，例如 ::first-line 的做用方式就相似於在第一行文本週圍包裹 span。可是，若是這一行的長度發生了變化，它將會從新應用，若是插入該元素則不會出現這種狀況。這些選擇器可能會很是複雜，在下面的 CodePen 中是一個僞元素用僞類連接的例子。咱們使用 :first-child 僞類定位第一個 p 元素，而後使用 ::first-line 選擇器選擇該元素的第一行，就好像在第一行的周圍添加了一個 span 讓它變粗並改變顏色。

查看由 Rachel Andrew（@rachelandrew）在 CodePen 上編寫的例子 —— 第一行。

繼承和層疊

當有許多規則應用於一個元素上時，層疊決定了到底按哪個規則執行。若是你曾經沒法理解一些 CSS 樣式爲何沒有被應用，那多是由於你沒有理解層疊的概念。層疊與繼承密切相關，它定義了哪些屬性是應該被子元素繼承的。它也和優先級有關：不一樣的選擇器有不一樣的優先級，當有多個選擇器能夠應用到同一個元素上時，優先級決定了哪個可以被成功應用。

提示：要是想了解所有內容，推薦去看看 MDN 的 CSS 簡介中的 層疊和繼承。

若是你正努力將一些 CSS 樣式應用到一個元素上，那麼使用瀏覽器的開發者工具是最佳方法，看看下面的例子，其中有一個 h1 元素由 h1 選擇器選擇並將標題設置爲橙色。我還使用了一個 class 設置 h1 顏色爲 rebeccapurple。這個 class 優先級更高，因此 h1 是紫色的。在開發者工具中，你能夠看見元素選擇器被劃掉，由於它並無被應用。因此如今一旦你看見瀏覽器開始應用你的 CSS（但其餘東西阻止了它致使沒有正常顯示），你就能夠找到緣由了。

查看由 Rachel Andrew（@rachelandrew）在 CodePen 上編寫的例子 —— 優先級。

開發者工具能夠幫助你查看爲何有些 CSS 樣式沒有成功應用到元素上（查看原圖）

盒模型

CSS 都是關於盒子的。每一個顯示在屏幕上的東西都有一個框，盒模型描述瞭如何計算出框的大小 —— 考慮 margin，padding，和 border。標準的 CSS 盒模型使用給定的元素寬度，而後在該寬度加上 padding 和 border 的寬度 —— 也就是說元素佔據的空間比你設定的寬度要大。

最近，咱們已經能夠選擇使用 border-box 盒模型，該模型使用元素上給定的寬度做爲屏幕上可見元素的寬度。任何 padding 或者 border 上的設置都將從邊緣向內進行設置。這讓許多佈局更加便利。

在下面的 Demo 中有兩個盒子。它們的寬度都是 200px，其中 border 是 5px，padding 是 20px。第一個盒子使用的是基礎盒模型，因此整體寬度是 250px。第二個盒子使用的是 border-box 盒模型，因此實際寬度就是 200px。

查看由 Rachel Andrew（@rachelandrew）在 CodePen 上編寫的例子 —— 盒模型。

瀏覽器的開發者工具可以再一次幫助你瞭解你正在使用的盒模型。下面的圖片中，我使用 Firefox 的開發者工具去檢查默認的 content-box 盒模型。開發者工具告訴我這是一個正在使用的盒模型而後我可以看見它的大小和我設定的 border 和 padding 是怎樣添加到寬度上的。

開發者工具幫助你瞭解盒子爲什麼具備特定尺寸，以及你正在使用的盒模型（查看原圖）

提示：在 IE6 以前，Internet Explorer 默認使用 border-box 盒模型，padding 和 border 讓內容偏離了給定的寬度。因此在那段時間許多瀏覽器都在使用不一樣的盒模型！不過如今你沒必要爲了瀏覽器之間的互通所擔憂，事情已經有所改善，咱們已經不須要由於瀏覽器的不一樣而使用不一樣方法計算寬度。

在 CSS Tricks 上有一篇很好的對於 盒模型及其大小 的解釋，以及在你的站點中 全局使用 border-box 盒模型 的最佳方法。

常規流

若是你的文檔由一些 HTML 標籤組成而後你在瀏覽器中打開它，它應該是有可讀性的。標題和段落會從一個新行開始，單詞中間由空格隔開組成句子。用於格式化的標籤，就像 em，不會破壞一句話的流。這些內容都以 常規流佈局 或者說塊狀流佈局展現。每一部份內容都處於「流」中；每個元素都會依次排放，不會重疊在一塊兒。

若是你合理運用這種特性的話，你的工做將會變得更加輕鬆。這也是爲何 從正確標記的 HTML 文檔開始 有道理的緣由之一，因爲常規流和內置樣式表被瀏覽器所遵照，你的內容會從可讀的地方開始。

格式化上下文

一旦你有了一個使用常規流佈局的文檔，你也許會想改變某些內容的外觀。那麼你能夠經過修改元素的格式化上下文來進行改變。舉一個簡單的例子，若是你想全部段落都連在一塊兒而不是每一段都新建一行，你能夠將 p 元素設定爲 display: inline 將其從塊更改成行內格式化上下文。

格式化上下文基本上定義了容器外部和內部類型。外部控制元素與頁面上其餘元素的共同表現，內部控制子元素的外觀。打個比方，當你設定 display: flex 時，你設定外部爲塊級格式化上下文，而且子元素爲 flex 格式化上下文。

提示：最新版本的 Display 規範更改 display 來顯式的聲明內部和外部值。所以，之後你可能會用到 display: block flex;（block 是外部的，flex 是內部的）。

在 MDN 上閱讀更多有關 display 的內容。

進入或脫離常規流

CSS 中的元素能夠被分爲，「在流中」或者「脫離流」。流中的元素被賦予了不被其餘元素干擾的獨立空間。若是你經過調整浮動或者定位讓一個元素脫離流，那麼它的空間可能會被其餘在流中的元素佔用。

對於使用絕對定位的元素，這是最明顯的。若是你設定一個元素 position: absolute 那它就脫離流了，而後你須要去保證脫離流的元素沒有和流中的元素重疊，否則你的佈局可能會變得難以理解。

查看由 Rachel Andrew（@rachelandrew）在 CodePen 上編寫的例子 —— 脫離流：絕對定位。

然而，浮動元素也會脫離流，而後後續的內容將會圍繞浮動元素的盒邊線佈局，你能夠經過在後面元素的盒中設置背景顏色來看到它們已經提高位置而且忽略了以前的浮動元素的空間。

查看由 Rachel Andrew（@rachelandrew）在 CodePen 上編寫的例子 —— 脫離流：浮動。

你能夠在 MDN 上閱讀更多關於 在流中和脫離流的元素 的內容。要記住的重要一點是，若是你讓一個元素脫離流，你須要本身去管理元素是否重疊，由於塊級流佈局再也不適用。

佈局

十五年來，咱們一直在 CSS 中進行佈局而沒有一個專門設計的佈局系統。如今這一切已經發生了改變。咱們如今擁有了一個功能完善的佈局系統包括 Grid 和 Flexbox，還有多列布局和用於實際目的的舊佈局方案。若是你還不理解 CSS 佈局，請移步 MDN 學習佈局 或者在 Smashing Magazine 查閱個人文章 從零開始的 CSS 佈局。

不要覺得像 grid 和 flexbox 這樣的方法在某種程度上來講是競爭關係。爲了更好的佈局，你可能會發現有時候適合使用 flex 組件有時候又適合使用 grid。有時，你也會想要使用多列布局。全部這些都只是你的可選項。若是你感受一種佈局不太合適，一般狀況下這是一個好現象，說明你應該去試試其餘不一樣的佈局方案。咱們習慣於「矯正」 CSS 樣式來達到想要的效果，而致使咱們忘記了原本就有的那些可選項。

佈局是個人主要專業領域，我在 Smashing Magazine 和其餘地方寫了不少文章來幫助掌握新的佈局。除了上面我提到的佈局文章，我還有一個 Flexbox 系列文章 —— 從 當你在建立一個 Flexbox 伸縮容器時會發生什麼 開始。在 Grid by Example 上，我有一大堆 CSS Grid 的小例子 —— 以及一個視頻教程。

此外 —— 特別是設計師們 —— 請查看 Jen Simmons 和她的 Layout Land 系列視頻。

對齊

我通常把對齊和佈局分開，不過咱們大多數人都是把對齊做爲 Flexbox 的一部分來看的，其實這些屬性能夠應用到任何一個佈局方法上，認真學習如下部分比思考用「Flexbox 對齊」或者或者"CSS Grid 對齊"要好得多。咱們有一組對齊屬性能夠在平常中使用；不過因爲不一樣的佈局它們的效果可能會有些許不一樣。

在 MDN 上，你能夠深刻研究 盒對齊 以及它是如何在 Grid（網格佈局），Flexbox（彈性佈局），Multicol（多行佈局）和 Block 佈局（塊佈局）中實現的。在 Smashing Magazine 上，我有一篇專門介紹 Flexbox 對齊的文章：Flexbox 中有關對齊你須要知道的一切。

尺寸

我在 2018 年中的大部分時間都在談論內部和外部尺寸規範，以及它與 Grid 和 Flexbox 的關係。在 Web 開發中，咱們習慣於使用固定長度或者百分比來設置尺寸，由於這是咱們可以作到的使用數值完成的網格類佈局。可是，現代佈局方式能幫咱們完成不少空間操做 —— 只要咱們讓它們這麼作。理解 Flexbox 如何分配空間（或者 Grid 的 fr 單位是如何工做）是頗有必要的。

在 Smashing Magazine 中，我寫了幾篇文章，關於 佈局中的尺寸 以及適用於 Flexbox 的 那個彈性盒子有多大？

響應式設計

咱們的新佈局方法 Grid 和 Flexbox 與咱們老的佈局方法相比，會使用更少的媒體查詢，由於它們是靈活的，不須要咱們去修改元素的寬度，它們會根據視圖或者組件大小進行自適應。可是你可能會但願在某些地方添加斷點來加強你的設計。

這裏是一些簡單的 響應式設計 指南，查看個人文章 在 2018 年使用媒體查詢來進行響應式設計。我介紹了一下媒體查詢的許多用法，以及一些將來在 Level 4 中會出現的新媒體查詢功能。

字體和排版

和佈局同樣，網絡上關於字體的使用在去年也發生了巨大的變化。可變的字體在這裏讓單個字體文件能夠產生無數種變體。想了解它們是什麼以及它們的工做方式，請查看 Mandy Michael 的精彩講解：可變字體和 web 設計的將來。另外，我還推薦去看看 Jason Pamental 的 動態排版與現代 CSS 和可變字體。

想要探索可變字體和它們的功能，能夠去看看 來自微軟的一個有趣的演示 提供了許多案例來嘗試可變字體 —— Axis Praxis 就是一個知名的例子（我還喜歡 Font Playground）。

當你開始使用可變字體時，這篇 MDN 上的指南 能夠給你一些幫助。以及閱讀 Oliver Schöndorfer 的 使用備選 Web 字體實現可變字體 學習如何給不支持可變字體的瀏覽器返回解決方案。Firefox 開發者工具字體編輯器 也支持可變字體。

變形和動畫

CSS 變形和動畫絕對是咱們所須要知道的基礎內容。我不常用它們，語法已經消失在了個人腦海中。不過謝天謝地，MDN 上的資料幫助了我，我也建議直接從 MDN 上的指南 使用 CSS 變形 和 使用 CSS 動畫 開始。Zell Liew 也有一篇優秀的文章 解釋 CSS 過渡。

想發掘一些有趣的內容，請訪問 Animista。

關於動畫可能最使人困擾的就是應該怎麼去實現。除了 CSS 的部分，你可能還須要涉及到 JavaScript，SVG，或者 Web Animation API，這些事情可能每每會被混爲一談，在 An Event Apart 錄製的 選擇你的動畫冒險 中 Val Head 解釋了這些。

使用小抄做提示，而不是學習工具

當我提到 Grid 或者 Flexbox 資源時，我常常看到有回覆說它們 不能 在沒有特定小抄的狀況下使用 Flexbox。我不反對使用小抄來幫助記憶語法，我也分享了我本身的一些小抄。主要問題是，在你照着小抄複製代碼時你極可能會忘記思考它是如何作到的。而後，當你遇到一個屬性實現出了意想不到的效果時，你會感到莫名其妙甚至以爲多是這個語言的問題。

若是你發現本身的 CSS 在作一些奇怪的事情時，大膽的問 爲何。建立一個簡單的測試用例來突出顯示問題，問問更加熟悉規範的人。我被問到的許多 CSS 的問題都是由於使用者堅信代碼正在以不一樣的方式在運行。這也是我爲何要談論對齊和尺寸，許多問題就出在這些地方。

沒錯，CSS 中確實有一些奇怪的問題。這是一個多年來都在不斷髮展的語言，有些事情咱們不能改變 —— 除非咱們有時光機。可是，一旦你掌握了這些基礎知識，而後理解了其中的原理，你就能更輕鬆的處理這些問題。

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。