《Clean Code 2: CSS 0 to 101》

 

  1. CSS 的基礎：開啟你的樣式之旅 🚀
  2. 選擇器精通：精準定位你的元素 🎯
  3. 盒子模型：理解元素的空間佈局 📦
  4. 佈局大師：Flexbox 與 Grid 的應用 🏗️
  5. 響應式設計：適應各種螢幕尺寸 📱💻
  6. CSS 變數與自定義屬性：提升可維護性 💡
  7. 動畫與過渡：為你的網頁注入活力 ✨
  8. CSS 架構與組織：打造可擴展的樣式 🏗️
  9. 進階技巧與最佳實踐：寫出更乾淨的 CSS ✅
  10. 除錯與效能優化：解決 CSS 的難題 🐛🔧

目錄內容解釋 (Explain/Summary)

Part 1: 最簡解釋 (Simplest Explain/Summary)

這本書將帶你從零開始學習 CSS，從最基礎的選擇器和盒子模型，到進階的佈局技巧（Flexbox 和 Grid）、響應式設計，以及如何寫出乾淨、可維護的 CSS 程式碼，最後還會觸及動畫、架構和除錯技巧。

Part 2: 詳細解釋 (Detailed Explain/Summary)

  • 1. CSS 的基礎：開啟你的樣式之旅 🚀
    • 介紹 CSS 的作用、如何引入 CSS 到 HTML 中、基本的 CSS 語法結構、常用的 CSS 屬性（顏色、字體、背景等）以及如何使用瀏覽器開發者工具來檢查和修改 CSS。
  • 2. 選擇器精通：精準定位你的元素 🎯
    • 深入探討各種 CSS 選擇器，包括元素選擇器、類別選擇器、ID 選擇器、屬性選擇器、偽類和偽元素。學習如何組合選擇器以實現更精確的元素選取，以及選擇器權重和優先級的規則。
  • 3. 盒子模型：理解元素的空間佈局 📦
    • 詳細講解 CSS 盒子模型的概念，包括內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）。理解 box-sizing 屬性的作用，以及如何正確地控制元素的尺寸和間距。
  • 4. 佈局大師：Flexbox 與 Grid 的應用 🏗️
    • 全面介紹現代 CSS 佈局的兩個核心工具：Flexbox 和 CSS Grid。學習如何使用 Flexbox 創建一維佈局（行或列），以及如何使用 CSS Grid 創建二維佈局（行和列的組合），並應用於常見的網頁佈局場景。
  • 5. 響應式設計：適應各種螢幕尺寸 📱💻
    • 學習如何使用媒體查詢（Media Queries）來創建響應式網頁設計，確保網站在不同設備（手機、平板、桌面電腦）上都能提供良好的用戶體驗。涵蓋斷點設置、流式佈局和響應式圖片等概念。
  • 6. CSS 變數與自定義屬性：提升可維護性 💡
    • 介紹 CSS 自定義屬性（CSS Variables）的強大之處，如何定義和使用變數來管理顏色、字體大小、間距等常用值，從而提高樣式的一致性和可維護性，方便主題切換和全局調整。
  • 7. 動畫與過渡：為你的網頁注入活力 ✨
    • 學習使用 CSS 過渡（Transitions）來實現元素屬性變化的平滑過渡效果，以及使用 CSS 動畫（Animations）和 @keyframes 來創建更複雜的、可控的動畫序列，為網頁增加互動性和視覺吸引力。
  • 8. CSS 架構與組織：打造可擴展的樣式 🏗️
    • 探討不同的 CSS 架構和命名約定，如 BEM (Block, Element, Modifier)、OOCSS (Object-Oriented CSS) 和 SMACSS (Scalable and Modular Architecture for CSS)。學習如何組織 CSS 文件，使其更易於管理、擴展和協作。
  • 9. 進階技巧與最佳實踐：寫出更乾淨的 CSS ✅
    • 分享一些進階的 CSS 編寫技巧，例如利用 CSS 函數、組合繼承、簡寫屬性等，以及撰寫可讀性高、易於理解和維護的 CSS 程式碼的原則。包括避免過度特異性、 DRY 原則等。
  • 10. 除錯與效能優化：解決 CSS 的難題 🐛🔧
    • 教授常見的 CSS 除錯方法和工具，如何快速定位和解決樣式問題。同時，探討 CSS 效能優化的策略，如減少 HTTP 請求、優化選擇器、使用 CSS 預處理器（如 Sass/Less）等，確保網頁載入速度和運行效率。
希望這個目錄能滿足你的需求！

CSS 速查表 (Cheatsheet) 📄

1. 基本語法

  • 規則集 (Rule Set)：
    css
    selector {
  property: value;
  another-property: another-value;
}
  • 註解 (Comment)：
    css
    /* 這是 CSS 註解 */

2. 選擇器 (Selectors)

  • 基本選擇器：
    • 元素選擇器 (Element Selector)：選取所有特定 HTML 標籤的元素。
      • p { ... }
      • div { ... }
    • 類別選擇器 (Class Selector)：選取具有特定 class 屬性的元素。
      • .my-class { ... }
    • ID 選擇器 (ID Selector)：選取具有特定 id 屬性的元素 (ID 在頁面中應是唯一的)。
      • #my-id { ... }
  • 組合與後代選擇器：
    • 後代選擇器 (Descendant Selector)：選取某個元素內的任何後代元素。
      • div p { ... } (選取 div 內的 p)
    • 子元素選擇器 (Child Selector)：選取某個元素的直接子元素。
      • ul > li { ... } (選取 ul 的直接 li 子元素)
    • 相鄰兄弟選擇器 (Adjacent Sibling Selector)：選取緊跟在某個元素後面的同級元素。
      • h1 + p { ... } (選取緊跟在 h1 後面的 p)
    • 通用兄弟選擇器 (General Sibling Selector)：選取某個元素後面所有同級的元素。
      • h2 ~ p { ... } (選取 h2 後面所有同級的 p)
  • 屬性選擇器 (Attribute Selectors)：
    • [attribute]：選取具有特定屬性的元素。
      • a[target] { ... }
    • [attribute="value"]：選取具有特定屬性和值的元素。
      • input[type="text"] { ... }
    • [attribute~="value"]：選取屬性值包含特定詞彙的元素 (以空格分隔)。
      • p[class~="highlight"] { ... }
    • [attribute|="value"]：選取屬性值以特定詞彙開頭的元素 (後面緊跟連字號 - 或就是該詞彙本身)。
      • [lang|="en"] { ... }
    • [attribute^="value"]：選取屬性值以特定字串開頭的元素。
      • a[href^="https://"] { ... }
    • [attribute$="value"]：選取屬性值以特定字串結尾的元素。
      • img[src$=".jpg"] { ... }
    • [attribute*="value"]：選取屬性值包含特定字串的元素。
      • a[href*="example.com"] { ... }
  • 偽類 (Pseudo-classes)：
    • 連結狀態：
      • :link：未訪問過的連結。
      • :visited：已訪問過的連結。
      • :hover：滑鼠懸停在元素上時。
      • :active：滑鼠點擊元素時。
    • 結構性偽類：
      • :first-child：父元素的第一个子元素。
      • :last-child：父元素的最后一个子元素。
      • :nth-child(n)：父元素的第 n 個子元素 (n 可以是數字、odd、even、2n+1 等)。
      • :nth-last-child(n)：父元素的倒數第 n 個子元素。
      • :first-of-type：同類型的第一个子元素。
      • :last-of-type：同類型的最后一个子元素。
      • :nth-of-type(n)：同類型的第 n 個子元素。
      • :only-child：父元素只有一個子元素時。
      • :empty：沒有子元素或內容的元素。
    • 其他：
      • :focus：元素獲得焦點時 (如輸入框)。
      • :checked：被選中的表單元素 (如複選框)。
  • 偽元素 (Pseudo-elements)：
    • ::before：在元素內容之前插入內容。
    • ::after：在元素內容之後插入內容。
    • ::first-letter：元素的第一個字母。
    • ::first-line：元素的第一行文字。
    • ::selection：使用者選取元素內容時。
    • ::placeholder：輸入框的佔位符文字。

3. 盒子模型 (Box Model)

  • 組成部分：
    • content：元素實際的內容區域。
    • padding：內容與邊框之間的空間 (內邊距)。
    • border：環繞內容和內邊距的線條 (邊框)。
    • margin：元素邊框與其他元素之間的空間 (外邊距)。
  • 屬性：
    • 尺寸 (Sizing)：
      • width：內容區域的寬度。
      • height：內容區域的高度。
      • min-width, max-width：最小/最大寬度。
      • min-height, max-height：最小/最大高度。
    • 內邊距 (Padding)：
      • padding：所有方向的內邊距。
      • padding-top, padding-right, padding-bottom, padding-left：單獨設定各方向內邊距。
      • 縮寫：padding: 10px 20px 5px 15px; (上 右 下 左)
    • 邊框 (Border)：
      • border-width：邊框寬度。
      • border-style：邊框樣式 (solid, dashed, dotted, double, none, hidden, groove, ridge, inset, outset)。
      • border-color：邊框顏色。
      • 簡寫：border: 2px solid red;
      • 單獨設定：border-top, border-right, border-bottom, border-left (例如 border-top-width, border-top-style, border-top-color)。
    • 外邊距 (Margin)：
      • margin：所有方向的外邊距。
      • margin-top, margin-right, margin-bottom, margin-left：單獨設定各方向外邊距。
      • 縮寫：margin: 10px 20px 5px 15px; (上 右 下 左)
      • margin: auto;：通常用於水平居中塊級元素。
  • box-sizing：
    • content-box (預設)：寬度和高度只包含內容，padding 和 border 會加到總尺寸上。
    • border-box：寬度和高度包含內容、padding 和 border。這通常更直觀且易於佈局。
      • * { box-sizing: border-box; } (常用於全局重置)

4. 佈局 (Layout)

  • 顯示類型 (Display)：
    • block：佔滿整個可用寬度，並在新行開始。例如 div, p, h1。
    • inline：只佔據內容所需的空間，不產生新行。例如 span, a, strong。
    • inline-block：類似 inline，但可以設定寬高、內外邊距。
    • none：元素被隱藏，不佔用空間。
    • flex：啟用 Flexbox 佈局。
    • grid：啟用 CSS Grid 佈局。
  • Flexbox (Flexible Box Layout)：用於一維佈局（行或列）。
    • 容器屬性 (Flex Container)：
      • display: flex; 或 display: inline-flex;
      • flex-direction：row (預設), row-reverse, column, column-reverse。
      • flex-wrap：nowrap (預設), wrap, wrap-reverse。
      • justify-content：主軸上的對齊方式 (flex-start, flex-end, center, space-between, space-around, space-evenly)。
      • align-items：交叉軸上的對齊方式 (flex-start, flex-end, center, baseline, stretch)。
      • align-content：多行時，交叉軸上的對齊方式 (flex-start, flex-end, center, space-between, space-around, stretch)。
    • 項目屬性 (Flex Item)：
      • order：定義項目的排列順序。
      • flex-grow：項目在容器有額外空間時的放大比例。
      • flex-shrink：項目在容器空間不足時的縮小比例。
      • flex-basis：項目的初始主尺寸。
      • flex (簡寫)：flex-grow flex-shrink flex-basis (例如 flex: 1 1 auto;)。
      • align-self：覆蓋容器的 align-items 屬性，單獨設定項目在交叉軸上的對齊。
  • CSS Grid (Grid Layout)：用於二維佈局（行和列）。
    • 容器屬性 (Grid Container)：
      • display: grid; 或 display: inline-grid;
      • grid-template-columns：定義網格的列。
      • grid-template-rows：定義網格的行。
      • grid-template-areas：定義網格區域。
      • gap (或 grid-gap)：設定行和列之間的間隙。
      • justify-items：網格項目的水平對齊方式。
      • align-items：網格項目的垂直對齊方式。
      • justify-content：網格內容在容器內的水平對齊方式。
      • align-content：網格內容在容器內的垂直對齊方式。
    • 項目屬性 (Grid Item)：
      • grid-column-start, grid-column-end, grid-column：設定項目佔據的列。
      • grid-row-start, grid-row-end, grid-row：設定項目佔據的行。
      • grid-area：將項目放置到預定義的網格區域中。
      • justify-self：單獨設定項目在水平方向的對齊。
      • align-self：單獨設定項目在垂直方向的對齊。
  • 定位 (Positioning)：
    • position：
      • static (預設)：元素按照正常文檔流佈局。
      • relative：元素按照正常文檔流佈局，然後根據 top, right, bottom, left 偏移，但原始位置仍佔空間。
      • absolute：元素脫離文檔流，相對於最近的已定位祖先元素進行定位。
      • fixed：元素脫離文檔流，相對於瀏覽器視窗進行定位，即使滾動頁面也不會移動。
      • sticky：元素在滾動時表現為 relative，直到達到某個閾值後表現為 fixed。
    • top, right, bottom, left：用於設定已定位元素的偏移量。
    • z-index：設定元素的堆疊順序 (數值越大，越靠上)。

5. 響應式設計 (Responsive Design)

  • 視口元標籤 (Viewport Meta Tag)：
    • 在 HTML 的 <head> 中加入：
      • <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • 媒體查詢 (Media Queries)：
    • 根據設備特性 (如寬度、高度、方向) 套用不同的 CSS 樣式。
    • 語法：
      css
      @media screen and (max-width: 600px) {
  /* 在螢幕寬度小於或等於 600px 時套用的樣式 */
  body {
    background-color: lightblue;
  }
}

@media screen and (min-width: 768px) and (orientation: landscape) {
  /* 在螢幕寬度大於或等於 768px 且為橫向時套用的樣式 */
}
    • 常用斷點 (Breakpoints)：
      • 手機：max-width: 576px
      • 平板：min-width: 577px 和 max-width: 992px
      • 桌面：min-width: 993px

6. 進階與其他

  • CSS 變數 (Custom Properties)：
    • 定義：--main-color: #333;
    • 使用：color: var(--main-color);
    • 作用域：可以在 :root (全局) 或特定選擇器內定義。
  • 單位 (Units)：
    • 絕對單位：px (像素), cm, mm, in, pt, pc。
    • 相對單位：
      • %：相對於父元素的尺寸。
      • em：相對於當前元素的字體大小。
      • rem：相對於根元素 (<html>) 的字體大小。
      • vw：相對於視口寬度的 1%。
      • vh：相對於視口高度的 1%。
  • 顏色函數：
    • rgba(red, green, blue, alpha)：帶有透明度的 RGB。
    • hsla(hue, saturation, lightness, alpha)：帶有透明度的 HSL。
    • currentColor：使用元素的 color 屬性值。
  • Transform (變形)：
    • transform: translate(x, y);
    • transform: rotate(angle);
    • transform: scale(x, y);
    • transform: skew(x-angle, y-angle);
    • transform-origin：設定變形的原點。
  • Transition (過渡)：
    • transition: property duration timing-function delay;
    • 例如：transition: background-color 0.3s ease-in-out;
  • Animation (動畫)：
    • @keyframes：定義動畫關鍵影格。
    • animation: name duration timing-function delay iteration-count direction fill-mode play-state;
這份速查表涵蓋了 CSS 的核心概念和常用屬性，希望能幫助你更有效率地編寫 CSS！

留言

發佈留言

此網誌的熱門文章

《Clean Code 2: Vue 3 檔案/資料夾結構》

  目錄 (10 主題版) Part 1: 最簡目錄總覽 🚀 Vue 3 專案結構入門  🏗️ 元件與模組化組織  🧩 路由與頁面架構  🗺️ 狀態管理結構  🗄️ API 服務層設計  🌐 共享資源與工具  🛠️ 測試結構  🧪 特性導向結構  🏢 命名規範與原則  🏷️ 實戰範例與總結  ✨ Part 2: 詳細目錄內容 📖 第一部分：基礎與核心結構 (Foundations & Core Structure)  🏗️ Vue 3 專案結構入門與原則 為何需要清晰的檔案結構？🤔 Vue CLI/Vite 預設結構解析 🧐 src  目錄的組織策略 📁 核心目錄 ( components ,  views ,  assets ,  utils  等) 的職責 🗂️ 元件與模組化組織的最佳實踐 元件的職責劃分與拆分 🧩 單檔案元件 (SFC) 的結構規範 📝 組織元件目錄 ( components ,  ui ,  layout  等) 🌳 共享元件與複合元件的區分 🤝 路由與頁面架構的最佳實踐 vue-router  配置與目錄結構 🗺️ 頁面 (Views/Pages) 與佈局 (Layouts) 的組織 🏘️ 動態路由與嵌套路由的結構化 🧭 路由守衛與權限管理的結構化 🛡️ 狀態管理結構 (Vuex/Pinia) Pinia Store 的模組化結構建議 🗄️ Vuex Modules 的組織方式 📦 Actions, Mutations, Getters 的邏輯劃分 🗃️ 狀態共享與跨 Store 依賴管理 🌐 API 服務層設計與組織 建立專門的 API 服務目錄 ( services ,  api ) 📡 Axios/Fetch 的封裝與配置 🌐 錯誤處理、響應格式統一與 Mock API 結構 ⚠️🎭 第二部分：進階組織與實踐 (Advanced Organization & Practices)  🚀 共享資源與工具的結構化 utils ,...
閱讀更多

[Laravel][ATOMIC] DB::transaction, DB::beginTransaction

  DB::beginTransaction()   will only begin a transaction, while for   DB::transaction()   you must pass a Closure function that will be executed   inside   a transaction. So this: DB:: transaction ( function () { // Do something and save to the db... }); is the same as this: // Open a try/catch block try { // Begin a transaction DB:: beginTransaction (); // Do something and save to the db... // Commit the transaction DB:: commit (); } catch (\ Exception $e ) { // An error occured; cancel the transaction... DB:: rollback (); // and throw the error again. throw $e ; } As you can see,  DB::transaction()  is a "helper" function to avoid writing code to catch errors, begin a transaction, commit the transaction, and optionally rollback (cancel the transaction) if an error occured. If you have a more complex logic, or need an specific behaviour, you will manually build your transaction; if your lo...
閱讀更多

[laravel 9] rename project

  Answers Sorted by:                                                Highest score (default)                                                                     Trending (recent votes count more)                                                                     Date modified (newest first)                        ...
閱讀更多