【譯】如何學習CSS

• 原文地址：How To Learn CSS
  
• 原文做者：rachel-andrew
  
• 譯者：liaozeen
  

不少人想讓我給他們推薦有關CSS部分的教程，或者問我如何學習CSS。 我也看到不少人對CSS的部份內容感到困惑，一部分緣由是因爲對語言的過期認識。 鑑於CSS在過去幾年中發生了至關大的變化，這是一個更新知識的好時機。 即便CSS只是你所作工做的一小部分（由於你使用其餘技術棧），CSS是你最終但願在屏幕上顯示的結果，因此值得合理去學習。

所以，本文旨在概述CSS的關鍵基礎和資源，以便進一步閱讀現代CSS開發的關鍵領域。 其中許多資源在Smashing雜誌上已經有了，但我也選擇了其餘一些資源，也有人關注CSS的關鍵領域。 這不是一本完整的初學者指南或旨在涵蓋全部知識點。 個人目標是覆蓋現代CSS的廣度，同時重點關注幾個關鍵領域，將幫助你理解CSS的其餘部分。

語言基礎知識

對於CSS的大部份內容，你不須要特地去學習屬性和值，你能夠在須要時查找它們。 然而，CSS中一些基礎知識沒有掌握好，你將很難去理解它。 這些基礎知識值得你花時間去理解，從長遠看，它會幫你節省不少時間和少走彎路。

選擇器，不只僅有類

選擇器的表現如標題所說的，它選擇文檔的某些部分，以便你能夠將CSS規則應用於它。 大多數人都熟悉使用 class，或在 直接使用HTML元素設置樣式，好比 body，可是還有不少更高級的選擇器能夠根據文檔中的位置選擇元素，直接選擇位於元素以後的元素，或選擇表格中的奇數行。

這些選擇器是CSS3規範的一部分（你可能據說過它們被稱爲第3級選擇器）具備出色的瀏覽器支持。 有關可使用的各類選擇器的詳細信息，請參閱 MDN 參考。

有些選擇器的行爲就好像你已經將類應用於文檔中的某些內容。 例如p:first-child就像你在第一個p元素中添加了一個類同樣，這些被稱爲 僞類選擇器。 僞元素選擇器就像動態插入一個元素同樣，例如::first-line的表現與用span  包裹第一行文本相似。 可是，若是該行的長度發生變化，它將從新應用，若是插入該元素則不會出現這種狀況。 這些選擇器可能會至關複雜。 在下面的CodePen中是一個用僞類連接的僞元素的例子。 咱們使用:first-child僞類定位第一個p元素，而後::first-line選擇器選擇該元素的第一行，就好像在第一行周圍添加了一個<span>以使其變爲粗體和改變顏色。

繼承和層疊

層疊是指當元素應用了多個樣式規則，哪一個規則優先應用。 若是你曾經遇到過沒法理解爲何某些CSS彷佛沒有應用的狀況，那多是層疊沒有運用好。 層疊與繼承緊密相關，繼承定義了子元素能夠繼承父元素的樣式屬性。 它還與特異性有關，不一樣的選擇器具備不一樣的特異性，當有幾個選擇器能夠應用於一個元素時，繼承能夠決定應用哪一個規則。

注意：爲了理解全部這些內容，我建議閱讀MDN CSS簡介中的 層疊和繼承。

若是你正在嘗試將一些CSS應用於一個元素，那麼你的瀏覽器開發者工具是開始最好的地方。看看下面的例子，我用元素選擇器 h1  將 h1 標題設置爲橙色。同時，我也使用類選擇器設置h1 設置爲紫色。 因爲類更具體，所以h1是紫色的。 在開發者工具中，您能夠看到元素選擇器被劃掉，由於它沒有被應用。 一旦你看到瀏覽器正在獲取你的CSS（但其餘東西已經推翻了它），那麼你能夠開始找出緣由。

盒模型

CSS裏一切都是盒子。 屏幕上顯示的全部內容都有一個框，盒模型描述瞭如何計算該框的大小 - 將外邊距，內邊距和邊框考慮進去。 標準的CSS框模型接受給定元素的寬度，而後將內邊框和邊框添加到該寬度上——這意味着元素佔用的空間大於給定的寬度。

最近，咱們已經可以選擇使用IE盒模型，使得元素上的給定寬度做爲屏幕上可見元素的寬度。 任何內邊距或邊框都會從邊緣插入框的內容。 這對許多佈局更有意義。

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

瀏覽器開發者工具能夠再次幫助你瞭解正在使用的盒子模型。 在下圖中，我使用火狐瀏覽器的開發者工具使用默認的內容框框模型檢查框。 工具告訴我這是正在使用的盒模型，我能夠看到大小以及如何將邊框和內邊框添加到指定的寬度。

注意：在IE6以前，Internet Explorer使用IE盒模型，內邊框和邊框插入給定寬度的內容裏。 因此有一段時間瀏覽器使用不一樣的盒模型！ 若是今天的互操做性問題感到沮喪，如今已經有所改善，那麼咱們就不會處理瀏覽器以不一樣的方式計算元素的寬度。

在 CSS Tricks 裏，有關於盒模型和盒子尺寸的很好的解釋，並解釋了在你的網站中全局使用IE盒模型的最佳方法。

標準流

若是你的文檔內容用一些HTML標記，你的文檔將具備可讀性。標題和段落會另起新的一行，單詞組成句子時，它們之間有一個空格。標記是用來格式化的，像 em 不會破壞句子的流。 句子會表現標準流，或塊流佈局。句子的每一個部分都被描述爲「在流中」，它知道句子其他內容，因此不會重疊。

若是你去了解，而不是去反對這種行爲，你會變得更加輕鬆。這是爲何從正確標記的HTML文檔開始頗有意義的緣由之一，因爲瀏覽器遵照正常流和內置樣式表，你的內容從可讀的地方開始。

格式化上下文

一旦文檔的內容處於正常流程中，您可能但願更改其中一些內容的外觀。 你能夠經過更改元素的格式上下文來完成此操做。 舉個一個很是簡單的示例，若是你但願全部段落連在一塊兒而不是重新行開始，你能夠設置 p 元素的樣式屬性 display:inline ，將 p 元素由塊級元素變成內聯元素。

本質上，格式化上下文定義了外部和內部類型。外部控制元素與頁面上其餘元素的行爲，內部控制子元素的外觀。例如，當你設置 display:flex ，你在設置外部爲塊格式化上下文，設置子元素爲 flex 格式化上下文。

注意：最新版本的Display規範改變了 display 的值，顯式聲明外部和內部的類型。所以，將你可能會聲明 display:block flex;  （外部爲 block，內部爲 flex）

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

進入或離開流

CSS中的元素被描述爲「在流中」或「脫離流」。流中的元素被賦予空間，而且空間被流中的其餘元素所影響。 若是經過浮動或定位元素使元素脫離流，則該元素的空間將再也不受到其餘流元素的影響。

對於絕對定位的元素，是最明顯的。 若是你設置一個元素 position: absolute  ，該元素會從流中脫離，你須要確保這個元素不會與流中的元素重疊，且不影響你佈局的其餘部分的可讀性。

然而，浮動元素也會從流中脫離，但後面的元素的文本將環繞該浮動元素。你能夠設置後面元素的背景顏色，你會看到他們會上升並佔用了原來浮動元素原來的空間。

你能夠在MDN上閱讀更多有關 流中和脫離流 的信息。 須要記住的重要一點是，若是從流中取出一個元素，則須要本身管理重疊，由於塊流佈局的常規規則再也不適用。

佈局

十五年來，咱們一直使用CSS佈局，但沒有設計一套佈局系統。這已經改變了。 咱們如今擁有功能完備的佈局系統，其中包括 Grid 和 Flexbox ，還有多列布局和舊佈局方法也應用於實際目的。若是你想對CSS佈局還不熟悉，你能夠閱讀 MDN 上的佈局教程，或閱讀我發表在Smashing雜誌上的文章 《開始學習CSS佈局》。

不要認爲grid和flexbox等方法在某種程度上是競爭的。爲了更好地使用佈局，你有時會發現組件最好做爲 flex ，有時做爲 Grid。有時，你想要多列流動佈局。全部這些都是不錯的選擇。若是你以爲本身在與某些事物的行爲方式做鬥爭，這一般是一個很是好的跡象，代表它可能值得退一步，嘗試一種不一樣的方法。咱們已經習慣了在CSS上作一些咱們想作的事情，以致於咱們可能會忘記咱們還有不少其餘的選擇能夠嘗試。

佈局是個人主要專業領域，我在Smashing Magazine和其餘地方寫了不少文章，試圖開拓新的佈局美化。 除了上面提到的佈局文章，我在Flexbox上有一整套系列 - 《從建立Flex 容器時，發生了什麼》。 在 Grid示例 上，我列出不少CSS Grid 的例子 — 以及一個視頻教程。

此外 - 特別是對於設計師 - 查看 Jen Simmons 和她的《Layout Land》視頻系列。

對齊

一般，我會將對齊和佈局分開，雖然大多數人把對齊看成 Flexbox的一部分。對齊這些屬性適用於全部佈局方法上，應該在上下文去理解對齊，而不是考慮 「Flexbox對齊」或「CSSGrid 對齊」。對齊屬性在大致上表現同樣，但不一樣佈局方式裏會有一些差別。

在MDN上，您能夠深刻了解 盒對齊 及其在Grid，Flexbox，多列和塊佈局中的實現方式。 在Smashing Magazine上，我有一篇文章專門介紹Flexbox中的對齊方式：你須要知道的有關Flexbox中對齊的全部內容。

尺寸

我在2018年花了不少時間討論了內部和外部尺寸規範，特別是它與Grid和Flexbox的關係。在web上，咱們習慣於設置尺寸爲長度或百分比，這就是咱們如何使用浮動來製做網格類型佈局的方法。然而，現代的佈局方法能夠爲咱們作不少空間分配——若是咱們容許的話。值得花時間去了解Flexbox如何分配空間(或Grid  fr 單元如何工做)。  

在Smashing Magazine上，我寫了一些關於 佈局中的尺寸 的文章，也寫了一些關於Flexbox的文章，好比 Flex 盒子有多大?

響應式設計

一般，新的Grid和Flexbox佈局方法意味着咱們可使用比舊方法更少的媒體查詢，由於它們很是靈活，能夠響應視口或組件大小的變化，而無需咱們更改元素的寬度。 可是，有些地方須要添加一些斷點來進一步加強設計。

如下是響應式設計的一些簡單指南，通常狀況下，對於媒體查詢，請查看個人文章《在2018年使用媒體查詢進行響應式設計》。我將查看媒體查詢的用途，並介紹規範4的媒體查詢的新功能。

字體和排版

與佈局同樣，網絡上的字體使用在去年發生了巨大的變化。如今，可變字體，使單個字體文件具備無限的變化。 要了解它們是什麼以及它們如何工做，請觀看Mandy Michael的精彩簡短演講：可變字體和網頁設計的將來。 另外，我會推薦Jason Pamental的動態排版與現代CSS和可變字體。

爲了探索可變字體和它們的功能，微軟提供了一個有趣的演示，以及一些嘗試可變字體的遊樂場 - Axis Praxis是最知名的（我也喜歡字體遊樂場）。

MDN上的指南將證實一開始使用可變字體是很是有用的。要了解如何爲不支持可變字體的瀏覽器實現回退解決方案，請閱讀Oliver Schondorfer的《使用回退Web字體實現可變字體》Firefox DevTools字體編輯器還支持使用可變字體。

變形和動畫

CSS轉換和動畫絕對是我須要知道的基礎。 我不常常須要使用它們，在使用時會忘記語法。 值得慶幸的是，MDN上的參考資料幫助了我，我建議從使用CSS變換和使用CSS動畫的指南開始。 Zell Liew也有一篇很好的文章，爲CSS過渡提供了很好的解釋。

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

關於動畫可能使人困惑的事情之一是採起哪一種方法。 除了CSS支持的內容以外，你可能還須要涉及JavaScript，SVG或Web Animation API，而這些事情每每都會被混爲一談。 在她的演講中，選擇你的動畫冒險記錄在事件中，Val Head解釋了這些選項。

使用速查表做爲回憶，而不是學習工具

當我提到Grid或Flexbox資源時，我常常看到回覆說，若是沒有特定的速查表，他們就不能使用Flexbox。我以爲把速查表做爲記憶助手查找語法沒有問題，我本身也出版過一些速查表。徹底依賴速查表的問題是當你複製語法時，你可能會忽略爲何要這樣寫。而後，當你遇到屬性的行爲彷佛不一樣的狀況時，這種明顯的不一致性彷佛使人困惑，或者是語言的錯誤  。

若是你發現CSS在作一些很是奇怪的事情的狀況下，問問爲何。建立一個簡單的測試用例來強調這個問題，問問對規範更熟悉的人。我被問到的許多CSS問題都是由於人們認爲屬性的表現與它在現實中的表現不一樣。這就是爲何我常常討論關於對齊和尺寸，由於這些地方常常會混淆。

是的，CSS中有一些奇怪的東西。它是一門通過多年進化的語言，有些東西咱們沒法改變，除非咱們發明了時間機器。然而，一旦你掌握了一些基礎知識，而且理解了爲何會這樣，你就能夠更輕鬆地處理棘手的問題。