基礎前端(下) - CSS

什麼是CSS ? 該如何運用? 這裡將完完整整地告訴你,開始讓你的網站美得獨一無二。本門課榮獲台灣大學對內教育採用,課號(CSX1001)

100 %
553 人
教師: Adam
NT$ 690
  • 課程水平 入門
  • 使用語言 中文
  • 總節數 32
  • 時數 3小時10分
  • 26 支影片
  • 6 道練習題
  • 課程內專案
  • 無限次觀看

課程介紹

開始讓你的網站變得獨一無二

了解了網頁基礎的HTML之後,再來就是讓你的網頁變得美美的啦 !
這門課我會講解CSS如何運作,如何和HTML做有效的搭配,以及各種基礎CSS 的功能與屬性。
並且一步一步的讓你的網頁變得更符合現代化。

什麼是CSS ? 他能做到什麼事情 ?

CSS 為層疊樣式表(cascading style sheet),為網頁前端製作不可缺少的主角之一,你將可以透過它對你的網頁HTML 元素進行各種樣式的添加與編排,做出符合使用者期待的樣貌。它將主掌網頁上任何你想的到的視覺元素 !

 

從基礎開始講起,持續更新課程 !

這門課不論只要稍懂HTML便能加入學習,也不用擔心聽不懂,或者沒人問,我將會在線上陪伴大家,一起學好基礎 !

 

了解原理勝於一切,拋開似懂非懂!

我喜歡讓學習者理解原理及用法, 並用生活化的例子帶入思考,讓你可以去想像,一個新的知識它究竟如運作。
比起只有單純操作或是介紹,這門課將有系統地、有規劃地從 0 開始講起 !

馬上開始用CSS 優化你的網頁 !

只要打開你的編輯器或CodePen 就能立即開始跟著我做,跟著我學習,體驗慢慢地將網頁變得美好的過程 !

課程特色

  • css 為前端工程師必備得語法,若想要朝前端工程師前進,CSS 絕對是必修
  • 我將用你絕對聽得懂的方式,圖解,慢慢的為您解說課程內關於css的內容
  • 透過線上專案練習與指導,讓您學得更深入

適合我嗎?需要那些課程準備?

適用對象

  • 對HTML 有初步了解的人
  • 想讓網站排版變得更加豐富的人
  • 還在使用 table 排版的開發者
  • 想從頭學習CSS的設計師

工具準備

  • 電腦和網路
  • 自己習慣的網頁編輯器

知識準備

  • 稍懂HTML

課程章節表

第1章

CSS 基礎概念
1
什麼是CSS?
6:56
2
CSS 語法 如何撰寫
4:48
3
CSS 寫在哪裡?
4:39
4
HTML 文件上的 CSS 套用順序
4:39
5
如何與我交流
2:24

第2章

CSS 的選擇器
1
什麼是CSS 選擇器?
3:50
2
CSS 的選擇器 Part l
5:40
3
CSS 的選擇器 Part ll
10:11
4
屬性選擇器
8:28
5
偽類選擇器
10:55
6
練習 - 選擇器運用

第3章

CSS 特性
1
CSS 權重與層疊
13:04
2
屬性繼承
5:59

第4章

CSS 樣式
1
文字
11:24
2
圖片
3:24
3
背景
9:11
4
圓角
4:42

第5章

CSS 盒子模型
1
什麼是盒子模型?
5:45
2
block / inline / inline-block 屬性
9:48
3
練習 - 使區塊元素水平並排
4
border 邊框
8:00
5
內距 與 外距
8:57
6
區塊元素的寬與高
8:11
7
範例 - 常見的文章區塊

第6章

排版
1
流動 與 固定排版
4:18
2
浮動排版 - float 屬性
12:39
3
用 float 使區塊進行水平排列。
4
層疊排版 - position 屬性講解
4:57
5
absolute 絕對定位
12:27
6
position: fixed
5:29

第7章

排版練習
1
基本排版練習- level 1
2
基本排版練習 - level2

您將會學到的

  • 有關css 的 知識,以及相關應用
  • css 在網頁製作時所扮演的角色
  • css 實作技巧

教師簡介

喜歡自學新技能。熱愛體驗、交流、分享有點意思的事物。期盼透過解決自學的問題影響世界。相信跨領域學習,將激發更多不同的社會價值。

100%

18個評價
good
4 月前
非常棒
4 月前
清楚易懂
4 月前
GOOD
5 月前
清楚明瞭
5 月前

其他人也參加了這些課程

收藏

輕鬆上雲端 - AWS 網站建置術

收藏

基礎前端(上) - HTML

收藏

illustator 輕鬆學

收藏

一次搞懂 CSS z-index 層疊特性