在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。

學習

音樂藝文

以行動支持創作者！付費即可解鎖

「梧笙」即「吾生」，意即我的生命，朋友都叫我「阿梧(Awu)」，高雄人。我喜歡學習新技能，從程式設計到網路工具，再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章，如果你有任何想法或問題，歡迎來信到我的郵箱 aowulife109@gmail.com

本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。

背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。

<div class="draft-block draft--p left">以前在開發遊戲的時候，上材質時，常常是一張材質，裡面有不同的Channel 控制不同物件的區塊，來節省圖形的使用。</div>

如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。

本文將介紹如何使用 CSS Media Queries 來創建適應不同裝置的網頁，在現今多裝置的網頁設計中，可以透過 CSS Media Queries 來讓我們根據不同的裝置特性，如螢幕尺寸、解析度等，來應用不同的樣式規則。

本文將介紹 CSS 的四個基本概念：margin（外邊距）、padding（內邊距）、border（邊框）和 box-sizing（盒模型），接下來將透過實際的程式碼範例來展示這些概念如何運作。

本文將介紹 CSS 中的position屬性，position是用於控制網頁元素在頁面上的排列，接下來將逐一介紹position屬性的五種不同值：static, relative, absolute, fixed, 和 sticky，以及它們如何影響元素的排列。

本文將介紹 CSS Flexbox，CSS Flexbox 是網頁設計的佈局工具，Flexbox 能使元素的排列和對齊變得更加靈活和直觀，從而大大簡化了響應式網頁設計的過程，通過了解 Flexbox 的概念和屬性，你將能夠利用 Flexbox 創建靈活且響應性強的網頁佈局。

在網頁中，每個按鈕、文字或圖片等都是通過 CSS 來設定它們的樣子，要做到這點，我們就需要用到 CSS 選擇器。本文會從最簡單的選擇器開始講起，讓你了解如何使用 CSS 選擇器。

歡迎來到 Hello Coding ! 程式札記，我會在這裡分享分享各種程式語言的學習心得，以及任何跟 Coding 相關的內容。這裡的內容會盡量簡單、實用，讓任何對程式設計有興趣的人都能從這裡得到收穫。