【譯】如何學習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中有一些奇怪的東西。它是一門經過多年進化的語言，有些東西我們無法改變，除非我們發明了時間機器。然而，一旦你掌握了一些基礎知識，並且理解了為什麼會這樣，你就可以更輕鬆地處理棘手的問題。