基礎前端技術(下) - CSS

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

100 %
311 個人參加這堂課
教師: Adam Adam
  • 課程水平 初學
  • 使用語言 中文
  • 總節數 32
  • 時數 3:10:49
  • 課程內專案
  • 無限次觀看
  • 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:52
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 實作技巧

教師簡介

Adam
絕不吃辣的工程師、網路行銷人,喜歡自學新技能。體驗、交流、分享新鮮的事物。相信人因學習而偉大。

贊助商

老師授課清楚,簡單明瞭!
2 周前
目前感覺都很不錯 參與中
2 周前
講得很清楚,節奏也不會太快,聲音又好聽
1 月前
覺得老師講解的很清楚,學到很多東西
1 月前
因為一堆報告跟期末考拖了好久才看完XD 老師 codepen 示範得很清楚,謝謝老師。 建議之後可以再新增更多練習題目,可以對學習更有幫助!!
1 月前

其他人也參加了這些課程

收藏
10 天 開發出你的第一個網頁

10 天 開發出你的第一個網頁

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

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

收藏
基礎前端技術(上) - HTML

基礎前端技術(上) - HTML

收藏
PS/AI輕鬆學

PS/AI輕鬆學