提高 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 佈局

網頁設計是關於佈局的一切。 我們創建一個佈局，然後使用其他可用的元素和函數來設計它的樣式，並以此為基礎。 眾所周知，許多網頁設計佈局完全依賴於 CSS。 學習 CSS 可以讓我們更多地了解網站佈局及其工作原理。 但是，如果您還不具備這些知識，Mikito Takada 寫了一本在線書籍，該書籍分為 5 個不同的章節，介紹如何正確地使用 CSS3 創建佈局。 他談到了定位，還談到了對齊不同的框元素以開始創建網格元素，他現在更深入地介紹了定位和可用功能。 他將最後兩章專門用於 Flexbox（CSS 函數）。 還有一篇關於他自己成為網頁設計師的旅程中最好的 CSS 樣式提示和技巧的文章。

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 的響應式網頁排版的一切

當人們想到響應式網頁設計時，很多時候他們都在考慮將標準網站變成適合移動設備的網站。 這不是錯誤的理解，但肯定還有更多。 Zell Liew 寫了一篇關於如何使用響應式 Web 排版的精彩文章，以及在所有設備類型上為您的排版模式建立堅實基礎所需要的內容。 不用說，教程評論部分也變得非常有用。 這完全歸功於社區網頁設計師的額外投入。

最簡單的 CSS 幻燈片

用 CSS3 製作幻燈片？ 那一定是不可能的！ 此類概念通常針對 JavaScript 或 jQuery 等語言。 這些語言可以輕鬆地隨時隨地創建動態內容。 但是 CSS3 呢？ Jonathan Snook 並沒有真正向我們承諾任何新東西，而是向我們展示瞭如何使用 CSS3 動畫效果創建幻燈片體驗而無需使用任何外部資源（例如 JavaScript）的示例。 他的 CSS3 動畫小入門教程是創造力戰勝懷疑的完美例子。

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

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

內容顯示模式

內容就是一切。 即使是那些缺乏適當的網站展示技巧但仍然能夠保持高內容質量的網站，通常也是人們最常參考的網站。 這方面的好例子是像 Reddit 和 Hacker News 這樣的網站——內容豐富的網站，在網站設計中沒有真正的強制措施。 內容顯示模式不是關於顯示模式，而是整體內容元素設計如何協同工作以提供在內容顯示和實際內容之間完全集成的瀏覽體驗。 這個來自 Dan Mall 的教程是關於內容顯示模式的最簡潔的指南之一，他的經驗報告不言自明——他曾為 TechCrunch 等網站的重新設計項目工作過，甚至我們不得不承認，新的 TechCrunch 設計非常時尚！

在 SVG 中動畫剪輯元素

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

富有表現力的 CSS

很長一段時間以來，Expressive 一直是開發者社區中的一個創造術語。 這是一個從編程語言中的表達性概念鬆散地借用的術語。 如果一種編程語言允許您用易於理解的代碼自然地表達您的想法，那麼它通常被認為是富有表現力的。 一般來說，“富有表現力”並不是什麼新鮮事，開發者們已經討論了很多年了，但是每當一個新功能在野外發佈時，開發者特別是設計師需要一些時間來適應他們的表現力工作流程，所以有時項目可能會變得一團糟，並陷入試圖同時工作的太多功能中。 Expressive 是一種輕量級的方法來編寫運行良好、看起來不錯且易於維護的代碼。 以此作為風格指南，不要忘記向作者表示感謝； 約翰·波拉切克。

響應式設計中的動畫

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

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

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

完整 CSS 中的 Twitter 心臟動畫

Twitter 到處都是新聞，原因有很多。 其中一個原因最終是因為 Twitter 決定用“愛”圖標切換“收藏”按鈕。 在網站周圍建立一種更加以社區為導向的感覺是一項大膽但必要的舉措。 該公告是通過一個 GIF 動畫圖片在 Twitter 的一個官方帳戶上發布的。 它展示了一個很酷的“心臟飛濺”動畫，並附有文字。 設計師 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 Developer Network 仍然是 HTML5、CSS3 和 JavaScript 的主要來源之一。 MDN 完全由社區驅動，以最適合您的學習速度和對 CSS3 的整體理解的方式提供所有提到的語言的樣式指南。