CSS編程課程

實體編程教學課程內容

課程簡介

本課程為三小時入門級教學，旨在讓學員快速掌握 CSS（Cascading Style Sheets，層疊樣式表） 的基礎概念與實際應用技巧。CSS 是網頁設計與前端開發不可或缺的技術，能控制 HTML 元素的外觀、布局與動畫效果，實現美觀且響應式的網頁介面。

透過實作導向的教學方式，本課程將講解 CSS 的語法結構、選擇器、顏色與字體設定、盒模型概念及網頁排版技巧。學員將學會如何設計專屬的網頁樣式，結合 HTML 打造具專業感的視覺介面。三小時內即可完成從基礎語法到簡易頁面樣式設計的完整學習流程。

課程目標

1. 建立對 CSS 的基礎認識與網頁視覺設計概念。

2. 掌握 CSS 語法、選擇器與屬性的使用方式。

3. 理解盒模型（Box Model）、版面配置與定位原理。

4. 能撰寫基本樣式表，設計美觀的靜態網頁畫面。

5. 為進一步學習 RWD（響應式設計）與前端框架（Bootstrap、Tailwind CSS）作準備。

授課對象

• 對網頁設計、前端開發有興趣的初學者。

• 已學過 HTML、希望進一步強化版面與設計能力的學員。

• 設計師、行銷人員或學生，希望掌握介面設計基本語法者。

• 適用於大專、成人進修或企業培訓班之基礎網頁課程。

課程大綱

第一部分：CSS 語法入門與編寫方式（約 40 分鐘）

• CSS 的作用與語法結構（選擇器、屬性、值）。

• 內嵌式、內聯式與外部樣式表的差異。

• 顏色與字型設定（color、font-family、font-size）。

• 單位與測量（px、em、rem、%）。

• 實作練習：為 HTML 內容加入樣式並修改文字外觀。

第二部分：選擇器與屬性應用（約 60 分鐘）

• 基本選擇器：元素、類別（class）、識別碼（id）。

• 結構選擇器：child、descendant、pseudo-class（:hover、:first-child）。

• 背景與邊框設定（background、border、padding、margin）。

• 盒模型（Box Model）講解與實際演示。

• 實作練習：設計一個擁有標題區與內容區塊的版面。

第三部分：布局與定位（約 45 分鐘）

• 區塊與內聯元素差異（block / inline / inline-block）。

• 版面配置屬性：display、position、float、flexbox。

• Flexbox 彈性布局入門（justify-content、align-items）。

• 實作練習：排版完整的二欄式或三欄式頁面設計。

第四部分：美化設計與延伸應用（約 35 分鐘）

• 顏色漸層與陰影效果（linear-gradient、box-shadow、text-shadow）。

• 過渡與動畫效果基礎（transition、transform）。

• 響應式設計初步概念（@media）。

• 實作練習：建立具有簡單互動效果的網頁封面。

• 延伸介紹：CSS 與 JavaScript、前端框架的整合方向。

課程特色

• 三小時集中訓練，快速掌握 CSS 核心語法與設計思維。

• 實作為主，讓學員能立即看到成果。

• 提供範例練習與延伸方向建議，適合自學進修。

• 完成後可銜接進階課程：CSS 響應式設計、網頁動畫、Bootstrap 網頁製作。