輕鬆上手 CSS 系列文

• 學 CSS 前要準備甚麼?
• 輕鬆上手css(I) – 不可不知篇
• 輕鬆上手css(I) – 叫叫 ABC 篇
• 輕鬆上手CSS(III) – 修改?創造?基本語法傳授!!

做專題之後，陸陸續續會聽到同學也想學習 css，互相研究，加上有的朋友會問我該怎麼學習 css，如何上手?該從哪些資料開始著手?

這邊簡單跟大家分享我的經驗，也希望對想要學習 css 的人有所幫助:)

學 css 要買相關書籍嗎??

這一點並沒有正確的答案，端看你自己學習的狀況來判定。

大家可以先試著回想自己在學習其他軟體、語言的時候，是買市面上的書籍回家研究呢？還是在網路上找大家的教學來學習？

要看你自己習慣哪種模式，就跟著一貫的學習方式走吧。

另外一種建議方式，我是認為你可以先想想你是否為「 css 完全初學者」?

如果以下 10 個問題，如何有 7 項以上都符合你的狀態，那你就是 css 完全初學者。

1. 如果不查資料，我不知道 css 的全名是什麼?
2. 在我的印象裡頭，css 就等於是讓排版美觀的意思。
3. 我不懂 html，也不懂怎麼把 html 還有 css 兜在一起。
4. 看到很漂亮的網站，我會發自內心的讚嘆。卻不會去思考如何建構他的排版。(意思就是我不會去想他怎麼分割、怎麼寫…就只是單純欣賞.羨慕)
5. 如果不查資料，我不懂 margin 以及 padding 的差別。
6. 我一直不能理解標籤怎麼控制我的版面
7. 打開一份 css 文件，我不懂要從何開始學習、觀看，甚至修改。
8. 如果我成功的修改了字型大小、顏色還有超連結的狀態，我會覺得自己很厲害。
9. 給我一份完全沒有 css 標籤的 html 檔案，我沒辦法獨力將他加上標籤、搭配 css 呈現出來。
10. 我真的很想學 css ，可是我不知道從何學起。

測驗結束，如果你符合「css完全初學者」，那我會建議你買一本書，但是這本書一定要從頭開始把整個css的架構都講的很清楚，讓你可以從基本的概念學起。

muki有沒有推薦的書籍??

這邊要跟大家說聲抱歉，我只買過一本實體書籍：「FrontPage2000」，其他 html 以及 css 都是從網路上自學而來。所以我並沒有買過相關書籍，也無從推薦你們哪本比較好。

建議如果要買書的朋友，可以先問問週遭會 css 的朋友，有沒有覺得不錯的書？但最重要的是，希望大家可以親自到實體書店走一趟，翻翻每本書的內容，看哪一本的編排最適合你。

不要只是聽了朋友的推薦就衝動買下來，到時候如果不喜歡書本的解說、或者覺得內容太難，就欲哭無淚囉。(這邊有Carrie推薦的幾本css、html書籍，大家可以去看看)

我要準備什麼工具??

假設你買好了書(或者從網路上蒐集到教學資訊)，你可能會躍躍欲試，馬上就要開始寫 css。

但是你可能會發現無從下手？會不會因為你不知道要用什麼工具呢？

首先我們要知道一個概念，css 這個文件他無法單獨在瀏覽器中讀取，就算讀到也只是文字而已，css 必須搭配 html 才可以呈現他的效果。

我常常拿大家熟悉的「人」來做例子。
今天你要出門，你一定要穿衣服才能出門吧!!!

• 「裸體的你、什麼都沒穿的你」就是 html
• 「穿在你身上的衣服、配件」就是 css

要搭配衣服(css)穿上自己(html)的身上，才可以有美麗的效果。所以說任何的美化一定要搭配一個實體的東西，否則就等於 0。

講到這裡，相信大家應該都懂了。

你的首要工具(知識)，就是你一定要懂基礎的html，否則免談。如果你真的不懂，可能你要買的書籍就不是純粹的css，而是要搭配html的css書籍。

假設你會基礎的 html，要開始學習 css，這時候你的工具選擇有兩種方式：

1. 用網頁編輯器的軟體輔助你使用 css (ex. DreamWeaver)，網路上也有許多是小型免費的網頁編輯器軟體可供下載，大家也可以用用看。
2. 用文字編輯器的軟體輔助你使用 css (ex. VScode, Sublime, Brackets)。

我推薦大家使用網頁編輯的軟體(雖然我是用文字編輯)，因為對初學者來說，大家不可能都把每一段 css 背的很熟，靠軟體輔助慢慢學習會比較好。

開始上手css

最後，有了好的教學書籍，有了很棒的輔助軟體，就要歡迎你來到 css 的世界囉!!

一開始你會學的很愉快，因為 css 普遍來說並不難。但是隨著接觸的資料愈多，需要用到更高深的技巧，甚至是 CSS3 搭配 HTML5 的變化時，可能會有很嚴重的挫敗感。不過請不要氣餒，因為學起來了就是你的!!!

css 不是一蹴可及的東西，他需要不斷的練習、學習，你才可以將他運用自如。
而且 css 一直在進化，我們都需要不斷上網學習新知識，才可以讓自己的網頁排版功力一直進步唷XD。

2

發生錯誤。

更多 CSS 相關文章

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

2022-11-22

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

HTML/CSS

在 Vue3 + Vite 專案下設定亮色與暗色主題

2022-11-18

在 Vue3 + Vite 專案下設定亮色與暗色主題

HTML/CSS

在 Vue3 + Vite 專案下安裝使用 SASS/ SCSS 以及 CSS Module

2022-11-17

在 Vue3 + Vite 專案下安裝使用 SASS/ SCSS 以及 CSS Module

HTML/CSS

使用 SCSS each 與 CSS var 變數，調整 Bootstrap, Element UI 的 CSS 樣式

2022-09-23

使用 SCSS each 與 CSS var 變數，調整 Bootstrap, Element UI 的 CSS 樣式

HTML/CSS

難解的 CSS 排版：認識對齊(下)

2019-09-05

難解的 CSS 排版：認識對齊(下)

HTML/CSS

難解的 CSS 排版：認識對齊(上)

2019-09-04

難解的 CSS 排版：認識對齊(上)

HTML/CSS