為什麽而寫

『 為自己、為有趣、為求知而寫 』

回顧在還沒成為工程師時，五個半月充實學習的路線圖：
HTML -> CSS -> JS -> jQuery -> PHP -> MySQL

CSS 好像就是那個讓自己覺得寫網頁蠻好玩的契機點
也許就是這個分歧點，造就現在這個宇宙的產生，也因此有一個此刻 2024/09/15 8:15 正趕著報名鐵人賽的我

也許現在手刻 CSS 的人已經不多了，一些背後運作的概念好像也不那麼重要了
畢竟...面試大多不會考

但我就是想寫
想回到那個還是一張白紙時，覺得 CSS 世界是如何的有趣
幾年過去，用不同的視角重新認識 CSS

朝聖之路

一般提到朝聖之路，指的是徒步行走到西班牙 Santiago de Compostela 的路線，有七個知名路線，但廣義來說只要終點是 Santiago de Compostela，從哪裡出發、怎麼走都可以。

而朝聖之路被視為是身心靈的考驗，除了要挑戰身體的極限，還需要面對無聊、挫折
有一句話這麼形容朝聖之路：『 前十天考驗身體，第二個十天考驗心智，最後十天試煉心靈。』

每年的鐵人賽，廣義的對我來說也算是一種朝聖之路
這條路必須靠自己走完，但前人已經幫我們鋪好路、沿途也都有路標避免我們走錯路
在筋疲力竭時可以進入庇護所，尋求別人的幫助或是聽聽不同的意見

web.dev 這個網站是由 Google DevRel Team 所維護製作的，裡面有很多學習的資源，分成 Blog、Articles、Learn、Explore、Patterns 以及 Case studies 這幾個部分

這次重啟對 CSS 的認識預計照著 web.dev 的 Learn CSS 章節內容走

預計內容

參考自 https://web.dev/learn/css

# Box Model
Box Model 是 CSS 的核心基礎，因為在 CSS 世界中所有東西都是 Box

# Selectors
必須先知道怎麼選到元素，才能在元素上套用相關樣式

# The cascade
當 CSS 有多項衝突規則套用在某一元素上時，瀏覽器如何決定要使用哪一項規則

# Specificity
優先級/權重，cascade 中重要的觀念

# Inheritance
認識 CSS 規則的繼承

# Color
怎麼設定元素的顏色

# Sizing Units
了解怎麼調整元素的尺寸以及如何在多尺寸的裝置中應用

# Layout
介紹多種排版/佈局的方式

# Flexbox
一維空間的排版方式

# Grid
二維空間的排版方式

# Logical Properties
了解 CSS 的 Flow 概念

# Spacing
不同的排版，如何選擇適合的方法來設定元素間距

# Pseudo-elements
使用 pseude-element 來添加額外的元素

# Pseudo-classes
透過元素狀態的改變套用 CSS

# Borders
border 是 CSS Box 中的外框，了解如何設定 border 的尺寸、樣式以及顏色

# Shadows
了解如何替文字或是元素添加陰影效果

# Focus
了解 focus 的重要性以及如何管理 focus

# Z-index and stacking contexts
了解如何控制元素分層的順序

# Function
認識 CSS 內建的重要 Functions

# Gradients
認識怎麼使用漸層增添效果

# Animations
認識動畫效果讓畫面更生動

# Filters
了解 Filter 的使用

# Blend Modes
認識如何混合多個圖層

# Lists
認識如何設定清單以及項目的樣式

# Transitions
了解如何定義元素狀態改變時的過場

# Overflow
了解當內容不符合父容器的大小時，該如何處理

# Backgrounds
認識 box 的背景如何設定

# Text and typography
如何替文字增加樣式

小結

不為求職、不為履歷上那一行經歷，為自己而寫

比昨天的自己多學會一件事、多瞭解一個觀念，就足夠了