提高 Web 開發技能的 20 大 CSS3 教程

級聯樣式表 (CSS) 不僅僅是一種用於樣式化 Web 的語言。 它正在慢慢成長為可以處理動態設計方面的功能齊全的語言。 在許多方面，CSS 可以取代傳統的 HTML 和 JavaScript，以實現交互性，以及來自外部庫和代碼片段的自依賴。 我們今天在網絡上看到的所有樣式都是直接通過 CSS 實現的。 隨著標準的不斷發展和改進，保持領先地位比以往任何時候都更加重要。 Web 瀏覽器呈現 CSS，很像 HTML，這有時可能意味著舊瀏覽器無法支持新功能。

近年來，前端 Web 開發和 Web 設計的入門變得更加容易。 我們看到更多的教程、指南和課程可供註冊。但歸根結底，歸根結底是願意使用新學到的技能並將其應用到現實生活中的項目中。 CSS 是要求用戶使用特定模式和佈局選項以應用於 JavaScript 和 HTML 等語言的腳本語言之一。 在使用 HTML 和 CSS 構建新網站時，最好循序漸進地充分應用所學知識。

今天，我們的目標是涵蓋來自領先的前端開發人員和設計師的最傑出和最現代的 CSS3 教程。 這裡的所有教程都基於最新標準，以幫助您成為更好的網頁設計。 在文章的最後，我們還將提到一些 CSS3 學習資源，以供進一步學習。 像任何編程語言一樣，為了更好地理解某些東西，我們應該允許自己通過動態在線平台或在我們的個人代碼編輯器中進行一些重複的編碼。

在 CSS 中編輯圖像

在網頁設計中使用圖像是完全有意義的，但故事的技術性遠不止於此。 雖然在您的網頁設計中使用您喜歡的照片很有趣，但有時我們必須考慮一些事情。 圖像文件大小是否適合我們的項目？ 我們可以通過 CSS 而不是通過 Photoshop 等外部應用程序添加過濾器嗎？ 我們可以用 CSS 做什麼來幫助我們的照片看起來更好？ Una Kravets 帶我們進行 15 分鐘的旅程。 在其中，她談到了 CSS 圖像編輯以及我們如何將 CSS 轉換為更像一個獨立的圖像編輯軟件平台，而不僅僅是一種操縱設計方面的方式。

預習

使用現代 CSS 構建響應式圖像網格

繼續圖像主題，這裡有 George Martsoukos。 他提供了一個關於如何使用現代 CSS3 函數來構建響應式圖像網格的簡單輕量級教程。 圖像網格（或有時稱為畫廊）都是關於在網格的上下文中顯示視覺內容。 這些類型的網格對於那些分享他們的照片或使用圖像網格來擴展他們的投資組合項目的人來說非常有用。 在本教程中，George 向我們介紹了確保我們創建的網格對桌面和移動應用程序同樣響應的過程。

預習

CSS 複習筆記

註釋和样式指南是許多網頁設計師的驅動力。 我們必須記住將我們最喜歡的筆記資源放在一邊，以便將來參考。 就 CSS3 而言，CSS Refresh Notes 是 GitHub 社區的最愛之一； 數以百計的明星，以及關於如何擴展此資源使其成為最佳資源的大量社區意見。 CSS Refresh Notes 專注於 CSS3 開發中最關鍵的方面。 它還可以讓設計人員快速利用大多數 CSS3 功能的參考說明。 無論是您需要幫助的定位或選擇器，也許是響應式設計的媒體查詢，或者如何在您的 CSS3 設計模式中最好地使用 SVG——即使您不這麼認為，這些筆記也會派上用場。

預習

變量：CSS 架構的支柱

近年來，預處理器開始興起，簡單的框架和工具集允許設計人員使用 mixin、函數和變量擴展基本的 CSS3 功能。 您通常希望在諸如 JavaScript 之類的硬編碼編程語言中看到這種特性。 可以說，每個人都應該精通 CSS3 來編寫代碼，而無需流暢地使用預處理器。 儘管如此，諸如開發時間之類的事情仍然很重要。 變量有助於在更動態的環境中使用 CSS3。 這就是為什麼 Karen Menezes 匯集了您將找到的關於該主題的最廣泛的內容之一。

預習

使用 Flexbox 設計產品頁面佈局

Flexbox 是一種新的 CSS3 佈局模式，旨在幫助設計師針對各種設備優化他們的設計。 新功能對於許多人來說還是很新的和陌生的，但 Flexbox 的使用在電子商務等領域變得越來越流行。 這個 CSS3 教程來自 Shopify 的團隊，他們報告了他們是如何在 Flexbox 的幫助下成功創建最新的 Shopify 模板之一的，以及該過程的內容以及最終結果的樣子。 了解 Shopify 在電子商務市場的聲譽並自己沉迷於教程，這可能是幫助您了解更多有關 Flexbox 以及如何開始在自己的網頁設計中使用它的最方便的指南之一。

預習

最簡單的 CSS 幻燈片

帶有 CSS3 的幻燈片？ 那一定是不可能的！ 這些概念通常針對 JavaScript 或 jQuery 等語言。 這些語言使在旅途中創建動態內容變得容易。 但是 CSS3 呢？ Jonathan Snook 並沒有向我們承諾任何新的東西，相反，他給我們提供了一個示例，說明我們如何使用 CSS3 動畫效果來創建幻燈片體驗，而無需使用任何外部資源，例如 JavaScript。 他的 CSS3 動畫小介紹性教程是創造力戰勝懷疑的完美例子。

預習

CSS 模塊——大規模解決 CSS 的挑戰

CSS 將不可避免地超越其當前的限制，就像 JavaScript 所做的那樣。 回顧 CSS 的古老歷史，我們在能夠操縱顏色和元素外觀方面已經取得了長足的進步，如今 CSS 為希望使用單一語言完成所有工作的開發人員提供了一個更加複雜的工具箱開發任務。 CSS 模塊用於幫助開發人員更好地對齊他們的 CSS 代碼，然後當應用程序或項目開始失控時可以對其進行擴展。 在這篇精彩的教程中，Tom Cornilliac 解釋了我們如何組合不同的樣式表並將它們用作我們通過 React 等框架啟動的項目的模塊。 誰知道導入樣式表和訪問它們的預定義函數會很容易。

預習

在 SVG 中動畫剪輯元素

SVG 和 CSS3 動畫是 Web 開發中最熱門的主題之一。 這要歸功於我們開始不再需要使用繁重的圖像和動畫文件來顯示我們的內容，而是設計師正在學習如何使用瀏覽器的本地語言來模仿這些精確的動畫。 Dennis Gaebel Jr 向我們介紹瞭如何使用 CSS 剪輯來實現令人驚嘆的動畫效果和使用令人驚嘆的矢量視覺效果。

預習

富有表現力的 CSS

很長一段時間以來，富有表現力一直是開發者社區中的一個新詞。 這是一個從編程語言中的表達性概念鬆散地借用的術語。 如果一種編程語言允許您以易於理解的代碼自然地表達您的想法，那麼它通常被認為是富有表現力的。 一般來說，“富有表現力”並不是什麼新鮮事。 開發人員多年來一直在談論這個問題。 儘管如此，每次在野外發布新功能時，開發人員，尤其是設計人員都需要一些時間來適應他們富有表現力的工作流程，因此有時項目可能會變得一團糟，並陷入太多試圖同時工作的功能。 表現力是編寫代碼的輕量級方法，效果很好，看起來不錯，並且易於維護。 以此作為風格指南，別忘了對作者表示感謝； 約翰·波拉塞克。

預習

響應式設計中的動畫

正如在整篇文章中已經了解到的，動畫和響應是設計師的兩個非常熱門的話題，對於那些希望真正測試現代 Web 開發能力極限的人來說，將兩者結合起來變得越來越有趣。 Val Head 發表了一篇非常有見地的文章，關於在響應式網頁設計中使用 CSS3 動畫，以及如何在不失去其價值的情況下最好地呈現這些動畫。 用其他成功網站的幾個展示演示佔據了這篇文章，這些網站已經在桌面和移動設備上建立了動畫。

預習

為什麼我對原生 CSS 變量感到興奮

CSS 自定義屬性，也稱為變量，通過啟用動態功能幫助 CSS3 開發人員加快 CSS3 開發過程。 預處理器已經這樣做了一段時間了。 許多人已經適應了永久使用預處理器的想法。 儘管如此，不可避免地所有這些功能（在標準中可用）都會在現代瀏覽器中找到它們的方式。 沒有什麼比在原生環境中開發更好的了，不用擔心外部軟件的維護和可靠性。 作為一名 Google 工程師，Philip Walton 花了他寶貴的時間整理了一篇關於新 CSS 功能的非常有見地的作品，以及為什麼社區應該接受這種變化，而不是擔心語法外觀等愚蠢的事情。

預習

完整 CSS 中的 Twitter 心臟動畫

Twitter 一直都是新聞，而且有很多很好的理由。 其中一個原因是 Twitter 決定用“愛”圖標切換“收藏”按鈕。 這是一個大膽但必要的舉措，可以在網站周圍建立一種更加以社區為導向的感覺。 該公告是在 Twitter 的一個官方賬戶上通過動畫 GIF 圖像發布的。 它展示了一個很酷的“心臟飛濺”動畫，並附有文字。 Nicolas Escoffier 是一名設計師，他很想看看他是否能夠使用純 CSS3 將類似的動畫組合在一起，猜猜是什麼——他成功了，社區再高興不過了！

預習

說真的，使用圖標字體

SVG 讓網絡變得更美好。 儘管開發人員必須考慮到許多人仍在使用過時版本的移動操作系統瀏覽網頁這一事實，而這種洞察力要求開發人員更加努力地工作以使事情正常進行。 其他人仍在學習圖標字體。 但是，此功能在現代開發者市場中變得非常流行，開發者希望創建無縫且愉快的工作體驗。

預習

CSS 產品放大 - 沒有 JavaScript

在電子商務中，放大和放大允許客戶放大更接近產品並探索其不太明顯的方面。 這是一個很酷的效果，但對許多人來說，這對他們的業務成功至關重要。 Michael Weaver 是一位 CSS3 黑客，他提出了一個想法，即在不使用任何 JavaScript 代碼的情況下創建一個放大小部件，這是他完成的壯舉。 現在任何人都可以瀏覽他的代碼並在他們的網站上製作類似的小部件。

預習

使用 CSS3 Flexbox 的真正響應式表格

表格幫助我們以更友好的方式調整信息。 有時，樣式良好的表格元素甚至不會作為一個元素出現。 但是通過 jQuery、HTML5 和 JavaScript 的可擴展性，我們可以讓我們的表格更像 Excel 文檔而不是其他任何東西。 Vasan Subramanian 發布了一篇關於使用 CSS3 的 Flexbox 功能為您的下一個網站或應用程序項目創建令人驚嘆的響應式表格的深刻教程。

預習

優化 CSS 交付

上一篇 CSS3 教程將是關於速度的，以及如何更好地編寫我們的樣式表以至少保證一些速度的提升。 Optimize CSS Delivery 是一個技術風格指南，展示瞭如何在不損害任何資源的情況下編寫原生 CSS 代碼。 編寫 CSS 應該很有趣，這就是本教程的內容。

預習

現代 CSS3 的學習資源

如果沒有適當的基礎，從教程中學習有時會讓人望而生畏。 這是有道理的，一個教程在它耗盡之前只能涵蓋特定主題的這麼多，教程是為那些以前構建過東西的人準備的，並希望通過新功能、有趣的概念和其他啟發的可能性來擴展這些項目由社區。 為了幫助您更好地理解我們在帖子中討論的 CSS3 教程，我們將列出一些非常棒的免費資源，用於在線學習 CSS3（也是現代的）。

完整的 CSS3 教程

同樣，我們強調展示教程資源的必要性，這些資源將幫助您學習有關 CSS 的所有內容。 該資源是一個完整的 CSS3 教程，討論了 CSS3 特性及其在現實世界中的使用。 本教程全面討論了選擇器、高級選擇器、框模型、文本和字體以及其他功能，並提供了大量示例供您開始使用。 任何開始 CSS 開發的人都可以通過幾個簡單的項目快速實現他們的進步。

預習

CSS 教程

W3Schools 是初學者前端開發的大本營。 該資源已幫助數以百萬計的開發人員更好地理解 HTML 和 CSS 的某些部分。 它還提供您在其他任何地方都找不到的免費學習內容。 W3Schools 對於那些真正缺乏網絡經驗並希望快速上手的人來說是一個完美的 CSS 學習場所。

預習

HTML 和 CSS

你不能從頭開始學習 CSS3 或 HTML5 而不嘗試 Codecademy。 甚至推薦部分也充滿了關於人們在完成 Codecademy 的學習後如何能夠找到出色且高薪的工作的評論。 許多教程站點通過代碼示例教授直接語法。 另一方面，Codecademy 會“強迫”你玩弄代碼。 這是通過每個學習課程背後的人員分配的直接和交互式任務來完成的。 這樣的平台已經變得非常流行，並且現在幾乎可以用於所有編程語言。 毫無疑問，這是一種非常有效的學習方式。

預習

學習 CSS 佈局

我們之前在這篇文章中已經了解到佈局是 CSS3 的基礎。 但是現在，是時候嘗試一下這個概念了。 讓我們來看看 CSS3 佈局屬性如何工作以及我們可以用它們做什麼的未來示例。 給自己分配幾天時間來完成本教程。 在那之後，您將處於理解佈局屬性及其用法的堅實中級水平。

預習

CSS——學習網絡

Mozilla 開發者網絡仍然是所有 HTML5、CSS3 和 JavaScript 的主要來源之一。 完全由社區驅動，MDN 以最適合您的學習速度和對 CSS3 的整體理解的方式為所有提到的語言提供樣式指南。

預習