🗞 5/12(三) 每日任務-請練習載入 Bootstrap 5 CDN
題目：請練習載入 Bootstrap，放入一顆 Bootstrap 元件按鈕，需透過 Codepen 繳交（載入 Bootstrap CSS CDN）
See the Pen bootstrap-5-使用CDN引入方式 by Jimmy_Wu (@Jimmy_Wu) on CodePen.light
🗞 5/13(四) 每日任務-CSS 權重
以下六題，如果你答題沒把握，請觀看此影片前 30 分鐘加深觀念。
第一題：請問以下的 HTML 裡面的 h1 是什麼顏色？
1 | <h1 class="title1 title2">標題</h1> |
1 2 3 4 5 6 7 8 9 10 | <!-- CSS --> h1{ color:blue; } .title1{ color: red; } .title2{ color: black } |
答案：結果會是 .title2{ color: black } 黑色標題字，主要是因為 CSS 會有後面寫的樣式權重高過前面的。
1 2 3 4 5 6 7 8 9 10 | <!-- CSS --> h1{ color:blue; } .title2{ color: black } .title1{ color: red; } |
但在 css 的行數如果 .title1 與 .title2 交換， .title1 寫的較後面，此時呈現就體是紅色標題字了。
第二題：請問以下的 HTML 裡面的 h1 是什麼顏色？
1 | <h1 class="title1 title2">標題</h1> |
1 2 3 4 5 6 7 | <!-- CSS --> .title1{ color: red; } .title2{ color: black } |
答案：結果會是 .title2{ color: black } 黑色標題字，後面寫的樣式權重高過前面的。
第三題：跟第二題差異在，HTML 的 class 對調了順序，請問以下的 HTML 裡面的 h1 是什麼顏色？
1 | <h1 class="title2 title1">標題</h1> |
1 2 3 4 5 6 7 | <!-- CSS --> .title1{ color: red; } .title2{ color: black } |
答案：結果會是 .title2{ color: black } 黑色標題字，後面寫的樣式權重高過前面的。
第四題：請問以下的 HTML 裡面的 h1 是什麼顏色？
1 | <h1 id="thisTitle" class="title1 title2">標題</h1> |
1 2 3 4 5 6 7 8 9 10 | <!-- CSS --> #thisTitle{ color: pink; } .title1{ color: red; } .title2{ color: black } |
答案：結果會是 #thisTitle{ color: pink; } 粉紅色標題字，ID 選擇器權動高過樣式選擇器。
第五題：請問以下的 HTML 裡面的 h1 是什麼顏色？
1 | <h1 id="thisTitle" style="color:yellow" class="title1 title2">標題</h1> |
1 2 3 4 5 6 7 8 9 10 | <!-- CSS --> #thisTitle{ color: pink; } .title1{ color: red; } .title2{ color: black } |
答案：結果會是黃色標題字，行內樣式權重高過 ID 與 Class 選擇器。
第六題 – 陷阱題目：請問以下的 HTML 裡面的 a 是什麼顏色？
1 | <a class="a b">HELLO</a> |
1 2 3 | <!-- CSS --> a{ color:red } b{ color:blue } |
答案：結果會是紅色標題字，主要只有吃到 <a> 元素的選擇器，在 css 樣式表中特別注意 .a 才是指 class 選擇器， class="a b" 是空包彈。
🗞 5/14(五) 每日任務-做此心理測驗分享測驗結果
🗞 5/17(一) 每日任務-CSS 樣式疊加與組合
class 名稱
- .btn：打基礎樣式
- .btn-顏色：新增五種色系
- .btn-大小：新增三種大小
- 進階挑戰，再自行設計一組 outline 樣式
回報流程：請將你自己練習的 CSS 按鈕樣式寫在 Codepen ，並複製 Codepen 連結貼至下方作業投稿區就算完成
See the Pen 自行設計 CSS 按鈕樣式 ( 實色, outline, 大小 ) 樣式 by Jimmy_Wu (@Jimmy_Wu) on CodePen.light
Comments are closed.