「蛤!? 再一個月就要做小專題」，OOXX….
平日晚上回家，我發現我沒辦法在回家的一個小時內寫完文章(也有可能是躺平前的前兆)，所以有些內容要延後到周末再一起寫。
天氣好冷，所以我直接放棄寫文章，跑回床上再睡兩小時。
我覺得老師教得很慢，對新手來說是友善的，但有點像以前的傳統學習方式，而這種方式在現在可能不太適合我。如果只是聽課但沒有實作，遇到真實問題時真的很容易卡住。而且，即使聽得懂，但沒有經過自己的思考，這些知識不會真正內化成自己的東西。你可能知道可以怎麼用，但在實際應用時，一定會出現問題。
所以我的想法是，我需要超前進度，然後改變上課策略，把老師的上課內容當作是一種複習，並在上課時專注於做題目和寫文章。
下午是LAB課，三個小時我都拿來看學長姐的專題影片，老師有提到的小專題會在十二月底左右開始，時間大約剩下一個月。我看過歷屆學長姐的小專題和畢業展，發現他們在UI設計和前端互動上表現得非常棒，很有水準，但在創意性和功能實踐上，許多組別的作品大多偏向基礎功能，比如購物車、身份驗證等，缺乏更多有趣或深入的延伸內容。
可能是因為時間本來就不夠(時間大概只有一個月)，或者他們的目標是完成基本功能並讓頁面呈現效果，而不是開發一個有趣的作品。
我想嘗試挑戰自己，做出心中構想的一些主題，並真正完成它，但我也擔心自己是否太樂觀，因為實際上應該會遇到很多的坑，可能也無法完全做完。
問題整理
- 為什麼
!important會覆蓋所有其他樣式？ - 選擇器的優先級如何影響樣式的應用？
- 如何區分子選擇器與子孫選擇器？
實做練習題
- 設定一段文字，讓滑鼠移到上面時背景變成藍色。
- 使用選擇器為 HTML 的
<div>元素內所有<h1>設定樣式。 - 為一個連結設定不同狀態（未點擊、已點擊、滑鼠移過、點擊）的樣式。
. 選擇器的優先級與比較
- 優先級比較：
!important > Inline Style > #id > .class > tag
選擇器分數計算
- Inline Style:
1000 - ID Selector:
100 - Class/Attribute/Pseudo-class:
10 - Element/Pseudo-element:
1
CSS 選擇器種類與用法
| 選擇器類型 | 描述 | 範例 |
|---|---|---|
| 標籤選擇器 | 依 HTML 標籤名選擇元素 | h1 { color: red; } |
| ID 選擇器 | 使用唯一 ID 名稱選擇元素 | #pikachu { color: red; } |
| 類別選擇器 | 使用類別名選擇元素 | .pokemon { color: blue; } |
| 子選擇器 | 選擇父元素的直接子元素 | div > h1 { ... } |
| 子孫選擇器 | 選擇父元素內所有子孫元素 | div h1 { ... } |
| 相鄰兄弟選擇器 | 選擇緊鄰的兄弟元素 | div + h1 { ... } |
| 合體兄弟選擇器 | 選擇同父層級的所有兄弟元素 | div ~ h1 { ... } |
外部樣式表 vs 內部樣式表
- 外部樣式表：
<link rel="stylesheet" href="style.css"> - 內部樣式表：
<style> ... </style>
行內樣式：
style="background-color: blue;"
實驗：比較行內樣式與其他選擇器的優先級。
CSS 失效原因：
- 打錯字、大小寫敏感。
- 語法錯誤（如遺漏分號）。
- 檔案路徑錯誤。
- 優先級權重不正確。
- 宣告順序問題（後面的會覆蓋前面的）。
虛擬類別 (Pseudo-class)
| 虛擬類別 | 描述 | 範例 |
|---|---|---|
:link | 未點擊的連結 | a:link { color: yellowgreen; } |
:visited | 已點擊的連結 | a:visited { color: lightcoral; } |
:hover | 滑鼠移到連結上 | a:hover { color: lightskyblue; } |
:active | 連結被點擊的當下 | a:active { color: black; } |
為什麼文章都沒有寫呢?
禮拜六的時候，我本來想說可以開始超前進度，看一些新的影片，所以打算用很久以前買的樹莓派5來看影片，但發現它打字沒有繁體中文支援。於是，我花了整個早上和下午來安裝繁體中文與重灌。我嘗試了很多模組和套件，但根據 ChatGPT 的推薦，發現都不適用。
最後，我參考了一些網路文章，安裝了新的套件並做了多次嘗試，還是不行，猜測問題可能跟瀏覽器有關。所以我換了瀏覽器，並嘗試了很多套件後，才確定可以輸入中文，但這樣我的半天時間就耗掉了，後來因為太累，我就決定睡覺了。
第一週的進度我承認遠遠落後，基礎也不夠紮實。目前雖然還沒開始實作，也沒有考試，但我個人覺得照這樣下去，可能真的會做不出專題。
到了禮拜天，我開始嘗試寫文章，但發現之前累積的新手債有點多，整理文章和回顧過去的程式碼確實有些吃力。我打算從明天開始直接動手實作，因為我覺得之前課程的問題在於，程式碼沒有提前提供。而這次情況比較好，因為這個禮拜已經上到下禮拜的課程內容，所以他們已經把程式碼放出來了。我計劃在這個禮拜把這些程式碼看過一遍，如果有可以當作問題的部分，就會直接著手實作。