CSS

簡介

  1. 什麼是CSS？
  • CSS 是用來控制 HTML 文件外觀與樣式的語言
  • 它讓開發者能夠定義網頁的版面設計、顏色、字型、間距等樣式
    1. 特性
  • 層疊性：當多個樣式同時應用時，優先級較高的樣式會覆蓋優先級較低的
  • 重用性：一段 CSS 程式碼可以用於多個 HTML 元素，方便維護
  • 跨瀏覽器性：同一套樣式可在不同瀏覽器中展示
    1. 用途
  • 分離內容與樣式
  • 提升設計靈活性
  • 實現響應式設計
    1. 作用
  • 樣式設計：控制文字顏色、字型、大小、背景顏色等
  • 排版布局：設計網頁的佈局（如位置、對齊方式、欄位設置）
  • 互動效果：搭配動態效果（如滑鼠懸停、動畫）

    • 功能介紹

    文字樣式
    1. CSS 用來設定文字的字型、大小、顏色、對齊方式
    2. 文字大小(font-size)、字型(font-family)、行距(line-height)
    背景樣式
    1. 可以使用背景顏色、圖片或漸層效果來設計網頁背景
    2. 以background作為作為開頭更改背景設定
    佈局與定位
  • CSS 提供多種佈局與定位方式來管理元素的位置和排列方式，例如 Flexbox 和 Grid
  • Flexbox 處理水平與垂直對齊、Grid 創建網格佈局
    • 動畫與過渡效果

    CSS 可以為元素添加動畫和過渡效果，提升互動性

  • 讓樣式變化更平滑
  • 創建連續變化的效果、動態樣式切換（例如滑鼠懸停）

    • 學習資源

    w3school
    w3school
    彭彭課程教學
    彭彭課程教學
    STEAM
    STEAM