［感想］好的CSS與樣板框架的寫法

1. css一開始要先宣告語系@charset "utf-8";
   
   因為在編譯、轉譯、上版（系統也許會針對自動合併，自動化執行一些合併行為），
   過程中可能會造成『中文註解』被編譯成亂碼，
   造成CSS原本的註解，有開始但是沒結束，頁面就會破版。
   
   
   
   最一勞永逸的方式，還是只用英文或數字撰寫。
   
   

【筆記】開源 Icon 字體 - Material icon font 使用方法

這是一套由 Google 設計的開源字型，免費供所有人使用，不得拿來販售。
https://material.io/

【筆記】icon 字體：Font Awesome，免費 / 付費版都有

Font Awesome 2018極受歡迎的開源ICON字體，進入網站就會看到各式各樣的扁平ICON，點綴在簡約的漸層畫布上，至2019/06站上的ICON字體共有5,099枚，其中可免費使用的有1,515枚。

很現實的，由於行動裝置介面空間有限，可比用寸土寸金來形容。以網頁或是APP來說，純裝飾的圖形在畫面上實在太過奢侈，為了在小小的空間裡，塞入更多的資訊，設計形態產生改變，小小的圖形開始代表著一個操作按鈕。


自從行動裝置問世之後，使用者接收訊息的方式，也漸漸從純文字轉向圖像閱讀。設定界面，以前只有文字項目，現在項目的前方則會增加小圖示，圖形+文字這樣的做法，讓文字閱讀與圖像閱讀的使用者，不但增加了美觀，更增加了可讀性。

【CSS】 粘性定位 position: sticky;

CSS 的定位屬性有下列幾種

• position: static;
• position: relative;
• position: fixed;
• position: absolute;
• position: sticky;

fixed 很常被使用在 header、footer、右側滑動廣告
fixed 作為 header使用時，內容區塊往往要搭配 padding-top、 margin-top、 top，避面內容被刊頭遮擋住，用在 footer 時也會產生相同的問題。

【CSS】偽元素:not，使用過後保證愛上

在CSS中，:not(   )的意思就是，(  )內的東西不要套用到設定的屬性。
(  )內放置的範圍非常廣，以下介紹幾種使用方式：

1. className
2. 偽類  :hover
3. 偽類  :last-child 
4. 多個not合併使用

1. className
設定button的背景色，但是在  button class=“disabled” 的時候不要套用。

button:not(.disabled){ background: #333 }