如何學習 CSS

很多人要求我向他們推薦有關 CSS 各個部分的教程，或者詢問如何學習 CSS。 我還看到很多人對 CSS 的某些部分感到困惑，部分原因是關於該語言的過時想法。 鑑於 CSS 在過去幾年中發生了相當大的變化，現在是更新知識的好時機。 即使 CSS 只是您所做工作的一小部分（因為您在堆棧中的其他地方工作），CSS 是事物最終在屏幕上呈現的樣子，因此值得合理更新。

因此，本文旨在概述 CSS 的關鍵基礎知識和資源，以便進一步閱讀現代 CSS 開發的關鍵領域。 其中許多是 Smashing Magazine 上的內容，但我還選擇了一些其他資源以及在 CSS 的關鍵領域關注的人員。 它不是完整的初學者指南，也不是旨在涵蓋所有內容。 我的目標是覆蓋現代 CSS 的廣度，重點關注幾個關鍵領域，這將有助於為您解鎖語言的其餘部分。

語言基礎

對於 CSS 的大部分內容，您無需擔心背誦屬性和值。 您可以在需要時查找它們。 但是，該語言有一些關鍵基礎，沒有這些基礎，您將很難理解它。 確實值得花一些時間來確保您了解這些內容，因為從長遠來看，這將為您節省大量時間和挫敗感。

選擇器，不僅僅是類

選擇器按照它在錫上所說的做，它選擇文檔的某些部分，以便您可以對其應用 CSS 規則。 雖然大多數人都熟悉使用類或直接設置 HTML 元素（如body ）的樣式，但有大量更高級的選擇器可以根據元素在文檔中的位置來選擇元素，可能是因為它們直接位於元素之後，或者是表中的奇數行。

屬於 3 級規範的選擇器（您可能聽說過它們被稱為 3 級選擇器）具有出色的瀏覽器支持。 有關您可以使用的各種選擇器的詳細信息，請參閱 MDN 參考。

某些選擇器的行為就像您已將類應用於文檔中的某些內容。 例如p:first-child行為就像您向第一個p元素添加了一個類，這些被稱為偽類選擇器。 偽元素選擇器的作用就像一個元素是動態插入的，例如::first-line的作用類似於在第一行文本周圍環繞一個span 。 但是，如果該行的長度發生變化，它將重新應用，如果您插入了元素，情況就不會如此。 您可以使用這些選擇器變得相當複雜。 下面的 CodePen 是一個與偽類鏈接的偽元素示例。 我們使用:first-child偽類定位第一個p元素，然後::first-line選擇器選擇該元素的第一行，就好像在第一行周圍添加了一個跨度以使其粗體和改變顏色。

繼承和級聯

級聯定義了當多個規則可以應用於一個元素時哪個規則獲勝。 如果您曾經遇到過無法理解為什麼某些 CSS 似乎沒有應用的情況，那麼很可能是級聯使您絆倒了。 級聯與繼承密切相關，繼承定義了哪些屬性由它們所應用的元素的子元素繼承。 它還與特異性有關； 不同的選擇器具有不同的特殊性，當有多個選擇器可以應用於一個元素時，它控制哪一個獲勝。

注意：要了解所有這些內容，我建議閱讀 MDN Introduction to CSS 中的 The Cascade and Inheritance。

如果您正在努力將一些 CSS 應用於元素，那麼您的瀏覽器 DevTools 是最好的起點，請看下面的示例，其中我有一個由元素選擇器h1定位的h1元素並將標題設為橙色。 我也在使用一個類，它將h1設置為 rebeccapurple。 該類更具體，因此h1為紫色。 在 DevTools 中，您可以看到元素選擇器被劃掉，因為它不適用。 一旦您可以看到瀏覽器正在獲取您的 CSS（但其他東西已經否決了它），那麼您就可以開始找出原因。

盒子模型

CSS 是關於盒子的。 屏幕上顯示的所有東西都有一個盒子，盒子模型描述了盒子的大小是如何計算出來的——考慮到邊距、填充和邊框。 標準的 CSS 盒子模型採用您給元素的寬度，然後在該寬度上添加填充和邊框——這意味著元素佔用的空間大於您給它的寬度。

最近，我們已經能夠選擇使用另一種盒子模型，它使用元素上的給定寬度作為屏幕上可見元素的寬度。 任何填充或邊框都會從邊緣插入框的內容。 這對於許多佈局來說更有意義。

在下面的演示中，我有兩個盒子。 兩者的寬度均為 200 像素，邊框為 5 像素，內邊距為 20 像素。 第一個盒子使用標準盒子模型，所以總寬度為 250 像素。 第二個使用備用框模型，因此實際上是 200 像素寬。

Browser DevTools 可以再次幫助您理解使用中的盒子模型。 在下圖中，我使用 Firefox DevTools 使用默認的content-box框框模型來檢查框。 工具告訴我這是正在使用的盒子模型，我可以看到尺寸以及邊框和填充如何添加到我指定的寬度。

注意：在 IE6 之前，Internet Explorer 使用替代的盒子模型，填充和邊框將內容插入遠離給定寬度的位置。 所以有一段時間瀏覽器使用不同的盒子模型！ 當今天因互操作性問題而感到沮喪時，很高興事情已經有所改善，因此我們不會處理瀏覽器以不同方式計算事物的寬度。

關於 CSS Tricks 上的 Box Model 和 Box Sizing 有一個很好的解釋，以及在您的站點中全局使用替代 box 模型的最佳方式的解釋。

正常流量

如果您有一個帶有一些 HTML 標記內容的文檔並在瀏覽器中查看它，那麼它有望是可讀的。 標題和段落將從新行開始，單詞顯示為一個句子，它們之間有一個空格。 用於格式化的標籤，例如 em，不會打斷句子流。 此內容以正常流或塊流佈局顯示。 內容的每一部分都被描述為“流中”； 它知道其餘的內容，因此不會重疊。

如果你支持而不是反對這種行為，你的生活就會變得容易得多。 這就是為什麼從正確標記的 HTML 文檔開始很有意義的原因之一，因為由於正常的流程和瀏覽器尊重它的內置樣式表，您的內容從可讀的地方開始。

格式化上下文

一旦您的文檔內容處於正常流程中，您可能想要更改其中某些內容的外觀。 您可以通過更改元素的格式化上下文來做到這一點。 作為一個非常簡單的示例，如果您希望所有段落一起運行而不是從新行開始，您可以將p元素更改為display: inline將其從塊更改為內聯格式上下文。

格式化上下文本質上定義了外部類型和內部類型。 外部控制元素與頁面上其他元素的行為方式，內部控制子元素的外觀。 因此，例如，當您說display: flex時，您將 outer 設置為塊格式上下文，而子項設置為 flex 格式上下文。

注意：最新版本的顯示規範更改了display的值以明確聲明內部和外部值。 因此，將來你可能會說display: block flex; （ block是外部， flex是內部）。

在 MDN 上閱讀有關display的更多信息。

流入或流出

CSS 中的元素被描述為“流入”或“流出”。 流中的元素被賦予空間，並且該空間被流中的其他元素所尊重。 如果您通過浮動或定位將元素從流中取出，則該元素的空間將不再受到流中其他項的尊重。

這對於絕對定位的項目最為明顯。 如果您給一個項目position: absolute它從流程中刪除，那麼您將需要確保您沒有出現流程外元素重疊並使佈局的其他部分不可讀的情況。

但是，浮動項目也會從流程中移除，雖然後續內容將環繞浮動元素的縮短線框，但您可以通過在後續元素的框上放置背景顏色來查看它們已經上升並忽略了浮動項目使用的空間。

您可以在 MDN 上閱讀有關流入和流出元素的更多信息。 要記住的重要一點是，如果您將元素從流中取出，您需要自己管理重疊，因為塊流佈局的常規規則不再適用。

佈局

十五年來，我們一直在使用 CSS 進行佈局，但沒有為作業佈局系統設計。 這已經改變了。 我們現在擁有一個功能完善的佈局系統，其中包括 Grid 和 Flexbox，還包括多列佈局和用於其真正目的的舊佈局方法。 如果 CSS 佈局對您來說是個謎，請繼續閱讀 MDN 學習佈局教程，或閱讀我在 Smashing Magazine 上的文章 CSS 佈局入門。

不要想像 grid 和 flexbox 這樣的方法在某種程度上是相互競爭的。 為了很好地使用 Layout，您有時會發現組件最好作為 flex 組件，有時作為 Grid。 有時，您會需要 multicol 的列流動行為。 所有這些都是有效的選擇。 如果您覺得自己正在與某事的行為方式作鬥爭，也就是說，總的來說，這是一個非常好的跡象，表明可能值得退後一步並嘗試不同的方法。 我們已經習慣了對 CSS 進行黑客攻擊以使其做我們想做的事情，以至於我們可能會忘記我們還有許多其他的選擇可以嘗試。

佈局是我的主要專業領域，我在 Smashing Magazine 和其他地方寫了許多文章，試圖幫助馴服新的佈局環境。 除了上面提到的 Layout 文章，我還有一個關於 Flexbox 的系列文章——從創建 Flexbox Flex 容器時會發生什麼開始。 在 Grid By Example 上，我有一大堆 CSS Grid 的小例子——還有一個視頻截屏教程。

此外——尤其是對於設計師來說——查看 Jen Simmons 和她的 Layout Land 視頻系列。

結盟

我一般將 Alignment 從 Layout 中分離出來，因為雖然我們大多數人是作為 Flexbox 的一部分被介紹給 Alignment 的，但這些屬性適用於所有佈局方法，在這種情況下理解它們而不是考慮“Flexbox Alignment”或“CSS 網格對齊。” 我們有一組 Alignment 屬性，它們在可能的情況下以通用方式工作； 由於不同的佈局方法的行為方式，它們會有一些差異。

在 MDN 上，您可以深入了解 Box Alignment 以及它是如何在 Grid、Flexbox、Multicol 和 Block 佈局中實現的。 在 Smashing Magazine 上，我有一篇文章專門介紹了 Flexbox 中的對齊方式：關於 Flexbox 中的對齊方式你需要知道的一切。

漿紗

2018 年的大部分時間裡，我都在談論內部和外部尺寸規範，以及它與 Grid 和 Flexbox 的關係。 在網絡上，我們習慣於以長度或百分比來設置大小，因為這就是我們能夠使用浮點數製作網格類型佈局的方式。 然而，現代佈局方法可以為我們做很多空間分配——如果我們允許的話。 了解 Flexbox 如何分配空間（或 Grid fr單元的工作原理）是值得您花時間的。

在 Smashing Magazine 上，我寫過關於 Layout 中的 Sizing 的文章以及關於 Flexbox 的文章“那個靈活的盒子有多大？”。

響應式設計

我們新的 Grid 和 Flexbox 佈局方法通常意味著我們可以使用比我們使用舊方法所需的更少的媒體查詢，因為它們非常靈活並且可以響應視口或組件大小的變化而無需我們更改元素的寬度。 但是，有些地方您需要添加一些斷點以進一步增強您的設計。

以下是響應式設計的一些簡單指南，對於媒體查詢，一般來說，請查看我的文章 Using Media Queries for Responsive Design in 2018。我看看媒體查詢有什麼用處，並展示了即將到來的新功能規範第 4 級中的媒體查詢。

字體和排版

與 Layout 一起，Web 上字體的使用在去年發生了巨大變化。 可變字體，使單個字體文件具有無限的變化，在這裡。 要了解它們是什麼以及它們是如何工作的，請觀看 Mandy Michael 的精彩簡短演講：可變字體和網頁設計的未來。 另外，我會推薦 Jason Pamental 的 Dynamic Typography With Modern CSS and Variable Fonts。

為了探索可變字體及其功能，Microsoft 提供了一個有趣的演示，外加一些遊樂場來嘗試可變字體——最著名的是 Axis Praxis（我也喜歡 Font Playground）。

一旦您開始使用可變字體，那麼 MDN 上的本指南將非常有用。 要了解如何為不支持可變字體的瀏覽器實現後備解決方案，請閱讀 Oliver Schondorfer 的使用後備 Web 字體實現可變字體。 Firefox DevTools 字體編輯器還支持使用可變字體。

變換和動畫

CSS 變換和動畫絕對是我在需要知道的基礎上查找的東西。 我並不經常需要使用它們，而且語法似乎在使用之間跳出了我的腦海。 謝天謝地，MDN 上的參考資料幫助了我，我建議從使用 CSS 變換和使用 CSS 動畫的指南開始。 Zell Liew 也有一篇很好的文章，對 CSS 過渡提供了很好的解釋。

要發現一些可能的事情，請查看 Animista 網站。

動畫可能令人困惑的一件事是採用哪種方法。 除了 CSS 支持的內容外，您可能還需要涉及 JavaScript、SVG 或 Web 動畫 API，而這些東西往往會混為一談。 在她的演講中，選擇在 An Event Apart 錄製的動畫冒險，Val Head 解釋了這些選項。

使用備忘單作為提醒，而不是學習工具

當我提到 Grid 或 Flexbox 資源時，我經常看到回复說，如果沒有特定的備忘單，他們就無法做 Flexbox。 我對備忘單作為查找語法的記憶助手沒有任何問題，並且我已經發布了一些我自己的。 完全依賴這些的問題在於，當你複製語法時，你可能會錯過為什麼事情會起作用。 然後，當您遇到該屬性似乎表現不同的情況時，這種明顯的不一致似乎令人費解，或者是語言的錯誤。

如果您發現自己處於 CSS 似乎在做一些非常奇怪的事情的情況下，請問為什麼。 創建一個突出問題的簡化測試用例，詢問更熟悉規範的人。 我被問到的許多 CSS 問題是因為那個人認為屬性的工作方式與它在現實中的工作方式不同。 這就是為什麼我經常談論對齊和尺寸等問題，因為這些是這種混亂經常存在的地方。

是的，CSS 中有一些奇怪的東西。 它是一種經過多年演變的語言，它有一些東西是我們無法改變的——除非我們發明了一台時間機器。 然而，一旦你掌握了一些基礎知識，並理解了事情為什麼會這樣，你就會在更棘手的地方度過更輕鬆的時光。