鐵人檔案
本系列文章目標是學習 CSS 基本知識，並且研究 The State of CSS 中值得令人期待新屬性，讓想要學習 CSS 的人也能一起學到新知識，不用再零零散散地去爬文搜尋。此外，還會提及一些前端基本知識、版本控制、開發經驗等必要概念，讓新手對於前端開發有全面的認識。
CSS 變數（CSS Variables）可以讓人在整個網站的樣式中輕鬆重複使用相同的值，更輕鬆地調整網站的外觀，同時保持一致性。以往 CSS 要使用變數必須...
以往 CSS 要使用巢狀管理要透過 Sass (SCSS) 或 Less 等預處理器才能實現，現在原生的 CSS 巢狀也可以使用了。前陣子在 Firefox...
在進入寫 CSS（或其他程式碼）的世界之前，有幾個重要的原則值得我們了解和牢記。這些能夠提高 code 的品質，讓他們未來容易維護和擴增。以下將介紹三個重要的...
上篇我們了解了寫 Code 的三大方向，主要都是為了更簡單、更好維護。 所以，以此延伸，有許多 CSS 的模組化命名方法論就此而生，其中包括 OOCSS、SM...
在網頁中，每個 HTML 元素都是一個方塊，我們又稱之為「盒子 Box」。 這個盒子包含了它的內容、內部間距、邊框線與外部間距，光用說的有點抽象，讓我們以 F...
CSS 為什麼需要 Reset？ 不同的瀏覽器會有不同的預設樣式，可能包含字體大小、邊距、填充、行高等等。 這會導致網頁的外觀不一致，所以通常我們在最一開始開...
在網頁設計中，我們會使用到各種單位來調整尺寸和排版，而單位分成絕對單位和相對單位。 ↓ 今日學習重點 ↓ 了解好用的 CSS 單位並使用它們 本...
CSS 的數值可以做簡單的運算，今天我們要介紹 CSS 的數學函式，數學函式可以讓你在設計網頁時更靈活操控元素的尺寸和位置。 實用的 CSS 數學函式共用四個...
本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解網頁上...
Flex 又稱彈性盒子，是目前學習 CSS 必學的排版方式之一，有了它幾乎 80% 的版面都可以排出來。過去 block、inline、inline-bloc...
