使用外部 CSS 檔案
除了能在 Hugo 引用外部 CSS 檔案外,Hugo 也兼具 Webpack 角色,可順便將 CSS 加以壓縮。
新しいことを始めるのに、遅すぎる挑戰はない
除了能在 Hugo 引用外部 CSS 檔案外,Hugo 也兼具 Webpack 角色,可順便將 CSS 加以壓縮。
實務上 CSS Class 可能會根據 JavaScript 的邏輯而改變,此時可將 CSS Class 綁定到 Computed,並將邏輯寫在 Computed 內。
Except for px
, em
and rem
are popular units for font size.
若希望 Browser 能自動均分 section
剩餘寬度,可使用 justify-content
的 space
系列設定。
若希望 Browser 能自動均分 section
剩餘寬度,可使用 justify-content
的 space
系列設定。
若希望能對 Main Axis 方向靠右,可使用 justify-content flex-end
設定。
若希望能對 Main Axis 方向靠左,可使用 justify-content flex-start
設定。
若希望能對 Main Axis 方向置中,可使用 justify-content center
設定。
若想由 Browser 自動產生 Column 或 Row,可使用 grid-auto-flow
設定。
Grid 若要使 Column 之間的間隔相等,可使用 justify-content space-evenly
。
Grid 若要使 Column 之間的間隔相等,可使用 justify-content space-around
。
Grid 若要使 Column 之間的間隔相等,可使用 justify-content space-between
。
Grid 若要使 Column 或 Content 水平靠右,可使用 justify-content end
。
Grid 若要使 Column 或 Content 水平靠左,可使用 justify-content start
。
Grid 若要使 Column 或 Content 水平置中,可使用 justify-content center
。
上下有 header
與 footer
,左側有 nav
,右側有 content
是實務上後台常見 Layout,可用 Grid 簡單實現。
傳統會將 Column 寬度設定為 %
使其依比例顯示,但若設定 column-gap
後,則要改用 fr
才能依比例顯示。
雖然可使用 repeat(n, 1fr)
實現水平均分 Column,但實務上可能想要 Column 數不變,雖然 Column 可變小但仍有其最小寬度,可用 repeat()
搭配 minmax()
實現。
若想不寫 Media Query 而讓 Grid 自動根據 Browser 寬度改變且換行, 可使用 repeat()
搭配 auto-fill
與 auto-fit
由 Browser 決定 Column 數。
fr
除了能處理剩餘寬度外,也可搭配 repeat()
水平均分 Column。
在 Grid 使用 fr
可設定 Column 剩餘寬度比例。
實務上常會出現 Header、Navigation、Main、Aside 與 Footer 等區塊,可使用 grid-template-areas
建立不規則 Layout。
CSS 的 Descendant Combinator 與 Child Combinator 都可選擇子層 Element,唯 >
只能明確選擇 子代
Element,而不能選擇 孫代
Element。
透過 grid-column
/ grid-row
可將 Item 原本在 HTML 位置調整到指定位置。
當使用 List 顯示資料時,若想要資料能黑白相將方便顯示,可使用 :nth-child()
達成。
當使用 List 顯示資料時,若想對最後一列設定不同視覺,可使用 :last-child
達成。
當使用 List 顯示資料時,若想對第一列設定不同視覺,可使用 :first-child
達成。
Grid 常在 grid-template-columns
使用多個 auto
設定 Columns,可使用 repeat()
更精簡。
Grid 屬於父層設定的 Layout,可直接在父層以 row-gap
設定垂直 Item 間隔。
Grid 屬於父層設定的 Layout,可直接在父層以 column-gap
設定水平 Item 間隔。
Grid 屬於父層設定的 Layout,可直接在父層以 gap
設定 Item 間隔。
Grid 屬於父層設定的 Layout,可直接在父層以 grid-template-columns
定義 Column 的寬度與個數。
理論上每個 Element 都可以設定獨立 Class 加以選取,若想在不增加 Class 前提下選取之後所有 Element,可使用 ~
加以選取。
Grid 屬於父層設定的 Layout,可直接在父層以 grid-template-rows
定義 row 的高度與個數。
在 Main Axis 水平均分 N 個 Column 為實務上常見需求,在 CSS 有多種方式實現。
Grid 為 CSS 最新 Layout 方式,其思維有別於 Flexbox,可完全在父層設定。
理論上每個 Element 都可以設定獨立 Class 加以選取,若想在不增加 Class 前提下選取下一個 Element,可使用 +
加以選取。
若遇到 CSS 相同部分,我們會抽出相同 Class 共用,對於不同部分,可使用 Compound Selector 加以選擇。
一般較少討論 Attribute Selector 的 Specificity,當與 Class Selector 有衝突時,到底會使用 Attribute Selector 還是 Class Selector 呢 ?
最暴力的 Selector,一次將選取全部 Element,但 Side Effect 也最大,須小心使用。