HTML

【HTML、CSS教學】16. className堆疊

🚩 前言

在維護別人的專案時，很多時候無法堅持用自己的準則來面對別人的程式碼，即便重構是一種選擇，但因為很多 BUG 是有急迫性的，前端不會在乎程式碼寫的多漂亮，只在乎現在話面怎麼有問題。

在這情況下，使用 className 堆疊 來調整 CSS 樣式就是一種選擇。

🚩 CodePen 範例

【HTML、CSS教學】15. PX、EM、REM

🚩 尺寸單位

在寫網頁式常用的尺寸單位有 PX、EM、REM。

PX 使用上很直觀，是相對容易入門的單位。

EM、REM 是依照比例做計算，在做響應式網頁有優勢。

🚩 PX

【HTML、CSS教學】13. 繼承

🚩 繼承

在寫 CSS 的時候，可以使用繼承的觀念來少寫重複的程式碼。
了解繼承的觀念，在閱讀別人的程式碼或是 debug 時，也可以較容易找出 css 有無套用的原因。

🚩 繼承特性

文字相關的屬性，預設是有繼承的效果，例如：

font-size | color | font-weight |…

【HTML、CSS教學】7.Position

🚩 Position定位

Position屬性的用法有四種：

1. position: static;
   預設值
2. position: fixed;
   固定定位
3. position: absolute;
   絕對定位
4. position: relative;
   相對定位

【HTML、CSS教學】5. CSS權重

🚩 CSS權重

網頁在載入CSS的時候是有順序性，順序分別為：

inline 套用CSS →HTML內部載入CSS →外部載入CSS

1. inline 套用CSS 
   直接在html上寫CSS，例如：<div class=”wrap” style=”color:white;”>
2. HTML內部載入CSS 
   直接在html的<style>標籤內寫CSS