鐵人檔案
應該沒有人會想到在 2062 年，竟然還有人在寫 CSS 教學吧？現在不都叫 AI 來切版了嗎？
等等！先別急著滑走！雖然現在 AI 已經能切出很讚的網頁，但有的時候只要想微調個間距或對齊，卻不知道該怎麼自己微調。呼叫 AI 時，它又只會失控的爆改你的網頁。這時候，只要能看懂一點 CSS，那就能幫你拯救這些網頁了！
剛好藉由這次鐵人賽的機會，能重新整理關於 CSS 的基本知識。幫助大家在 AI 時代，就算是被它爆改網頁排版，也能自己親手爆改回來！
如果你剛好也想要學習 CSS，或想跟著我一起重新複習，歡迎追蹤接下來 30 天的文章！ദ്ദി (⩌ᴗ⩌ )
大家好，我是饅頭，目前是一位網頁設計師，平常的工作除了使用 Figma 來繪製網頁介面外，也需要自己切切版、寫寫 CSS，不過最近幾年都直接用 AI 幫我速速...
昨天我們介紹了 HTML 與 CSS 的基本結構與對應關係，今天則要進入核心主題 CSS 的「選擇器（Selector）」。 什麼是選擇器？「選取正確的物件」...
昨天我們學會了如何使用基本與組合選擇器來精準選取 HTML 標籤。但網頁不只是靜態的文字與區塊，使用者還會滑過按鈕、點擊輸入框，甚至我們有時只想裝飾某個段落的...
前幾天介紹了各式各樣的 CSS 選擇器，大家可能會發現當選擇器越寫越多時，常常會越串越長。這時候就可以利用「巢狀（Nesting）」的寫法，讓 CSS 結構更...
開始前先題外話一下，因為我在封面畫了超多細節，但其實大多數跟 CSS 內容無關，就是想畫所以就畫了！原本想說要用同一種封面排 30 天，但我發現第 5 天開始...
昨天的封面介紹了 Chrome 瀏覽器，今天的主角則是 Firefox 火狐（因為很喜歡狐狸就畫了！毛毛的！）。雖然現在市面上多數的瀏覽器都是以 Chromi...
今天的封面主角是我們設計師最愛的 Figma (?)，我把他畫成很像膠囊跟糖果的感覺。 剛好今天會介紹網頁中的**「邊框」與「間距」**。其實網頁的樣式邏輯和...
今天的封面主角是 HTML5，我看 HTML5 的 LOGO 形象，很像一個盾牌的形狀，中間寫一個數字 5，所以我就把它畫成超人的形象了！ ─=≡Σ((( つ...
今天的封面是工程師最愛的 github 吉祥物章魚貓，雖然一直不知道為什麼會是這個吉祥物，但我還是畫了一個自己的版本，希望會大家喜歡 (･ω´･ ) 回到今...
今天的封面是拉長尾巴的 VS Code，還有奇怪的標題。因為最近我朋友日文 N1 考過了，為了慶祝他通過考試，特別在標題加了一個日文「の」字，以表示尊重。...
