CSS編程 教學課程

上門編程教學課程內容

課程簡介

本課程專為剛接觸網頁設計與前端開發的學員設計，透過三小時精華授課，快速掌握 CSS（Cascading Style Sheets） 的核心原理與設計應用。

CSS 是網頁介面設計的關鍵技術之一，負責控制 HTML 結構的版面、顏色、字體與動畫效果。課程以「實作為導向」設計，從語法、選擇器到版面配置（Layout）與媒體響應（RWD）逐步講解，讓學員能在短時間內從靜態頁面進階到專業級網頁外觀設計。

 

適合對象：

• 網頁設計與前端開發的初學者

• 希望提升 UI / UX 表現能力的視覺設計師

• 想瞭解 HTML + CSS 的整合應用者

• 有志進一步學習 JavaScript 或 React / Vue 前端框架的學生或開發者

學習成果：

• 理解 CSS 的基本語法與樣式宣告方式

• 能運用選擇器精準控制 HTML 元素外觀

• 掌握常用屬性（排版、顏色、字體、背景、邊框）

• 熟悉 Flexbox 與 Grid 排版技巧

• 能設計基礎響應式（RWD）版面與互動樣式

---

 

課程時長

3 小時（180 分鐘）
理論講解與實作操作比例約 3 : 7

---

 

課程大綱

第一部份：CSS 基礎概念與應用環境（30 分鐘）

• CSS 的角色與重要性

• CSS 的三種導入方式（Inline、Internal、External）

• CSS 語法結構與註解規則

• 使用瀏覽器開發者工具（DevTools）查看樣式

• 實作：為現有 HTML 範本添加初始樣式

---

第二部份：選擇器與基本樣式屬性（40 分鐘）

• 選擇器類型：元素、類別、ID、巢狀、群組選擇器

• 顏色設定（RGB、HEX、HSL）與背景控制

• 文字排版屬性（font-family、font-size、line-height）

• 邊框、圓角、陰影、透明度調整

• 實作：製作色彩、文字樣式範例區塊

---

第三部份：盒模型與排版（Box Model & Layout）（40 分鐘）

• 盒模型（margin、padding、border、content）概念

• 顯示方式（display: block / inline / inline-block / none）

• 位置控制（position、float、clear）

• Flexbox 版面設計教學與實作

• 實作：建立簡易資訊卡片與水平導覽列

---

第四部份：進階設計技巧與動畫（40 分鐘）

• CSS 過渡（transition）與變形（transform）

• 簡單動畫（@keyframes）應用

• Grid Layout 排版基礎介紹

• 使用偽類與偽元素（:hover、:nth-child、::before、::after）

• 實作：建立滑鼠懸停特效與簡易動畫按鈕

---

第五部份：響應式設計與綜合實作（30 分鐘）

• 響應式設計（Responsive Web Design）概念

• 媒體查詢（@media）設定與版面調整

• 實作：建立自適應頁首與內容版面

• 綜合練習：以 HTML + CSS 製作完整首頁樣式

• 延伸學習方向：CSS Framework（Bootstrap / Tailwind CSS）

---

 

課程特色

• 三小時快速掌握 CSS 核心知識與設計思維。

• 理論與練習並重，立即能打造美觀專業的網頁。

• 從選擇器、排版到動畫，建立完整設計觀念。

• 為進一步學習 SASS、CSS3 特效與前端框架奠定基礎。