CSS 教程

CSS 是網站設計中使用的關鍵表現技術。

CSS 代表 Cascading Style Sheets。CSS 是一種標準樣式表語言，用於描述網頁的表示（即佈局和格式）。

在 CSS 之前，HTML 文件的幾乎所有表示屬性都包含在 HTML 標記中（特別是在 HTML 標記內）; 必須在 HTML 中明確描述所有字型顏色，背景樣式，元素對齊，邊框和大小。

結果，大型網站的開發成為漫長而昂貴的過程，因為樣式資訊被重複新增到網站的每個頁面。

為了解決這個問題並提高 Web 表示能力，CSS 於 1996 年由全球資訊網聯盟（W3C）引入.CSS 旨在實現表示和內容的分離。現在，Web 設計人員可以將網頁的格式資訊移動到單獨的樣式表中，從而使 HTML 標記更加簡單，並且可維護性更好。

注意： 我們的 CSS 教程將幫助你逐步學習 CSS 語言的基礎知識，從基礎到高階主題。如果你是初學者，請從基本部分開始，逐步學習，每天學習一點。

你可以用 CSS 做什麼

CSS 可以做很多事情。

• 你可以輕鬆地在多個元素上應用相同的樣式規則。
• 你可以使用單個樣式表控制網站的多個頁面的顯示。
• 你可以在不同裝置上以不同方式呈現相同頁面。
• 你可以設定元素的動態狀態，例如懸停，焦點等，否則這是不可能的。
• 你可以在不更改標記的情況下更改網頁上元素的位置。
• 你可以更改現有 HTML 元素的顯示。
• 你可以在 2D 或 3D 空間中變換縮放，旋轉，傾斜等元素。
• 你可以在不使用任何 JavaScript 的情況下建立動畫和過渡效果。
• 你可以建立列印版本的網頁。

這個列表並沒有結束，你可以用 CSS 做很多其他有趣的事情。你將在後續章節中詳細瞭解所有這些內容。

使用 CSS 的優點

CSS 的最大優點是它允許將樣式和佈局與文件內容分離。這裡有一些更多優點，為什麼要開始使用 CSS？

• CSS 節省大量時間 - CSS 為設定元素的樣式屬性提供了很大的靈活性。你可以寫一次 CSS; 然後相同的程式碼可以應用於 HTML 元素組，也可以在多個 HTML 頁面中重用。
• 易於維護 - CSS 提供了一種簡單的方法來更新文件的格式，並保持多個文件的一致性。因為可以使用一個或多個樣式表容易地控制整個網頁集的內容。
• 頁面載入速度更快 - CSS 允許多個頁面共享格式資訊，從而降低文件結構內容的複雜性和重複性。它顯著減少了檔案傳輸大小，從而加快了頁面載入速度。
• 高階樣式到 HTML - CSS 具有比 HTML 更廣泛的呈現功能，並且可以更好地控制網頁佈局。因此，與 HTML 表示元素和屬性相比，你可以更好地檢視網頁。
• 多裝置相容性 - CSS 還允許針對多種型別的裝置或媒體優化網頁。使用 CSS，可以針對不同的呈現裝置（例如桌面，手機等）以不同的檢視樣式呈現相同的 HTML 文件。

提示： 現在大多數 HTML 屬性 已被棄用，建議不要使用。因此，儘可能多地使用 CSS 來提高網站的適應性並使其與未來的瀏覽器相容也是一個好主意。

本教程涵蓋的內容

這個 CSS 教程系列涵蓋了 CSS 的所有基礎知識，包括選擇器的概念，設定顏色和背景的方法，格式化字型和文字的方式，樣式化 UI 元素，如超連結，列表，表格等，以及 CSS 盒子模型，等等。

一旦你對基礎知識感到滿意，你將進入下一個層次，解釋設定元素的尺寸和對齊方式，在網頁上定位元素的方法，使用影象精靈，以及相對和絕對單位，視覺化格式模型，顯示和可見性，圖層，偽類和元素，依賴於媒體的樣式表等。

最後，你將探索 CSS3 中引入的一些高階功能，如漸變顏色，陰影效果，2D 和 3D 變換，Alpha 透明度，以及建立過渡和動畫效果的方法，flex 佈局，濾鏡效果，媒體概念查詢等等。

提示： 本教程中的每一章都包含許多實際示例，你可以使用線上編輯器進行測試。這些示例將幫助你更好地理解概念或主題。它還包含智慧解決方法以及有用的提示和重要說明。