全棧軟件開發(1)：HTML+CSS

編碼

• UTF8編碼: https://wiki.tcl-lang.org/page/UTF-8+bit+by+bit

HTML

• HTML 標準
• 文檔流
  • DOM API
  • 標籤
• 事件
• Web-Component

CSS

• W3C
  • CSS 語法 http://w3.org/TR/css-syntax-3
  • CSS 層疊與繼承 http://w3.org/TR/css-cascade-3
  • CSS 顏色 http://w3.org/TR/css3-color
  • CSS 選擇符 http://w3.org/TR/selectors
  • CSS 背景與邊框 http://w3.org/TR/css3-background
  • CSS 值與單位 http://w3.org/TR/css-values-3
  • CSS 文本排版 http://w3.org/TR/css-text-3
  • CSS 文本裝飾效果 http://w3.org/TR/css-text-decor-3
  • CSS 字體 http://w3.org/TR/css3-fonts
  • CSS 變形 http://w3.org/TR/css-transforms-1
  • CSS 圖像混合效果 http://w3.org/TR/compositing-1
  • CSS 濾鏡效果 http://w3.org/TR/filter-effects-1
  • CSS 遮罩 http://w3.org/TR/css-masking-1
  • CSS 伸縮盒佈局 http://w3.org/TR/css-flexbox-1
  • CSS 網格佈局 http://w3.org/TR/css-grid-1
  • CSS 基本 UI 特性 http://w3.org/TR/css3-ui
• 常見例子：https://css-examples.wizardzines.com/
  • CSS-Tricks
• 知識點
  • 選擇器
    • 僞元素
    • CSS-Tricks:Media Queries for Standard Devices
    • CSS晚餐，選擇器遊戲
  • 位置(position)
    • static
    • relative
    • absolute
    • relative-absolute
    • 居中
      • CSS-Tricks:centering
  • 背景(background)
    • border
    • background-image
  • 顏色
    • 自動生成好看的隨機顏色：https://zwbetz-gh.github.io/github-pages-deploy-pleasejs/
    • CSS-Tricks: Color
    • CSS-Tricks: Dark-Mode
  • 佈局(display)
    • Block formatting context
      • 影響浮動和上下邊緣合併的計算
    • Box model
    • Containing block
      • 如果一個元素設置了不同的position，它的CB(Containing Block）會不同，簡單說它的父塊（未必是直接父元素）是position上下文相關的
    • Layout mode
      • none
      • block
      • inline
      • inline-block
      • table
        • CSS-Tricks:Table
      • flex: https://hostrider.com/?play
        • CSS-Tricks:Flex
        • Flex 佈局教程：語法篇
        • Flex 佈局教程：實例篇
        • Flex遊戲1
        • Flex遊戲2
      • grid
        • CSS-Tricks:Grid
        • Grid遊戲
        • 網格佈局代碼生成器：Layoutit
    • Margin collapsing
      • 同一個BFC裏垂直兩個元素下上邊緣合併
    • Replaced elements
    • Stacking context
      • 如果一個元素有設置z-index,那麼它的SC(Stacking Context)也不同
    • Visual formatting model
  • 動畫
    • CSS 3D遊戲
    • CSS 動畫遊戲
• 組件
  • CSS-Tricks: Link&Button

例子

W3C的基本CSS：https://www.w3.org/StyleSheets/TR/2016/base.css

參考資料

• https://cssfordesigners.com/articles/things-i-wish-id-known-about-css
• https://generative-art-with-css.commons.host/