iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 1
19
Modern Web

金魚都能懂的CSS必學屬性系列 第 1

金魚都能懂的CSS必學屬性-CSS真的這麼難學嗎

說到CSS的學習與教學,基本上最多人會卡到的問題就是CSS屬性這麼多,好難學懂或是學到完整,基本上這個問題對於多數的網頁新手來說,始終都是個難解的困擾,但實際上學習網頁或是學習CSS,絕對沒有你想像中的困難,相對地透過有系統的分類規劃來學習,不求一次學到完整,而是先規劃出那些是你必要學習的,哪些反之可暫時忽略,反倒能夠讓你輕鬆上手,而不會有這麼大的學習恐懼。

學習CSS真的不難,難在你根本只想走捷徑

學習CSS的方式,我們可以利用以下幾個方式來讓自己不會掉入學習恐懼的地步,也讓自己能在學習過程中,享受進步的喜悅,就讓我們來看看怎麼學習吧

  1. 列舉常用的CSS屬性
  2. 把屬性作好分類
  3. 學習每個CSS屬性時了解該屬性的作用對象是誰
  4. 做好筆記
  5. 善用心智圖
    (關於心智圖的應用可見Amos此「直播 : XMIND 心智圖超好用」以及「怎麼學CSS」說明)

做好以上這幾點學習的要點,相信各位在學習CSS上面會更加的得心應手啦

1.常用的CSS屬性

一般大眾在開發網頁時,其實CSS負責的都是將資料做視覺上的處理,所以我們就資料面來看,我們會拿到的資料有哪些?

  1. 標題
  2. 內文
  3. 清單
  4. 圖片
  5. 色彩

以上大致列舉五種資料,而實際上資料可能更多種,但以上這幾種資料應該不論哪一個網頁都可以見到吧,所以我們就能夠先把這幾個資料有關的CSS屬性列舉出來,開始找有哪些CSS屬性是我們可以學習的。而多數我們的需求不外乎就是...

  1. 文字大小的設定
  2. 文字色彩的設定
  3. 文字粗細怎麼設定
  4. 斜體字怎麼處理
  5. 段落間距怎麼設定
  6. 超連結的底線怎麼拿掉?
  7. 背景色彩怎麼控制
  8. 背景圖片怎麼製作
  9. 圖片大小怎麼控制
  10. 圖片圓角怎麼製作

上面列舉了我們對網頁資料常見的工作需求,光是這幾個需求就能馬上去找到我們需要的CSS屬性了,是不是真的很簡單呢?!

2.把CSS屬性作好分類

CSS屬性的教學最麻煩的就是眾多的CSS屬性,新手面對眾多的CSS屬性來說,感覺有些混亂,在學習上面也會感受學習的壓力與煩躁,然而倘若做好CSS屬性的分類,新手在學習CSS的過程也就可以藉由有系統的CSS屬性分類,來找到問題對應的CSS屬性是哪個,不僅學習變得簡單許多,對大腦記憶的負擔也就更低,針對CSS屬性的分類,Amos簡單的列舉一些給各位參考看看

  • 文字相關的CSS屬性
  • 段落相關的CSS屬性
  • 背景相關的CSS屬性
  • 清單相關的CSS屬性
  • 尺寸設定相關的CSS屬性
  • 色彩相關的CSS屬性
  • 邊框相關的CSS屬性
  • 定位相關的CSS屬性

對於這樣的分類,不知道各位看了之後有沒有比較有點概念了呢。針對你的工作需求,一項項去把他學習起來,感覺就簡單許多了呢!

3.學習每個CSS屬性時,了解該屬性的作用對象是誰?

在學習CSS屬性時,多數的新手都會發生「這個屬性設定了怎麼沒有作用?」的狀況,明明看別人設定都有效啊,我也是複製他的原始碼過來改的啊,怎麼他就可以我就不行 (怎麼你就沒懷疑過是你人品有問題嗎) ?其實這一類的狀況Amos也是時有所聞,其實一開始Amos也不懂為什麼一個版面我就可以你就不行 (我知道!我都是靠顏值切出版面的,人帥就是個罪過...甩髮) ,其實我們在學習CSS屬性時,需要特別注意CSS屬性作用的對象可以簡單分成以下三種+一種影響因素

  1. 屬性作用對象是自己
  2. 屬性作用對象是子層
  3. 屬性作用對象是自己跟子層
  4. 是否對周遭物件產生影響

Amos舉寬度(width)來作例子好了,寬度的設定是對自己有作用,對子層基本上沒作用,但對周遭物件可能產生空間的擠壓,再舉個例子則是字級(font-size)這個屬性,font-size這個屬性可以對HTML元素(tag)內的文字產生作用,並且對其內部所有子層都能產生繼承的效果,而width則不會有這繼承的問題。

註: 「繼承」一詞簡單的說,就是子層物件會直接套用跟父層相同CSS屬性設定,常見會有繼承這種特性的CSS屬性,多見於文字相關的CSS屬性,其他的CSS屬性則大都不會繼承父層的CSS屬性。

4.做好筆記

作筆記是一定需要的,但是作筆記的方式則是每個人都不同,對於Amos來說,我會將筆記做成一個教學文章,而這個教學文章的教學對象則是我自己,因為Amos本身不是個天資聰穎的人,所以會盡量用自己能看懂的文字描述來寫給自己看,字數或許會多一點,但對於未來可能會忘記的自己來說,這份教學筆記可說是Amos的寶典啊!而在撰寫筆記的過程中,為了將艱澀難懂的技術轉成金魚都能懂的筆記文字,在腦內會經過多段的梳化過程,好把文字變的更加簡單理解,相對的反倒讓自己對技術有更深入的理解,且更容易記憶。縱使對於目前盛行的速食文化,甚麼都要快!甚麼都要標準答案的生活型態來說,這種方式可能顯得非常沒有效率,但對長久而言,其實是更穩固了自己的觀念,對日後的工作其實起了非常大的幫助呢!

5.善用心智圖

心智圖是Amos近年來一直大力推坑周遭朋友的一個筆記方式,許多新手或非領域內的人可能會說「我邏輯不好」、「我記憶不好」、「我理解能力不佳」、「我就金魚腦」、「我就是笨才會喜歡你這麼久」...,其實多數人邏輯不好是正常的 (你才邏輯不好,你全家都邏輯不好) ,想當初Amos邏輯也不好,現在也不好,以後可能也不好,但是我會善用工具(已知用火的猿人),在學習一個新技術時,Amos經常利用心智圖來將雜亂無章的內容或要點做整理、歸納、分析,然後找出自己容易記憶的方式與筆記方式,一但發現筆記上面有歸納或分類的矛盾或衝突,就重新思考並檢視這邊的理解哪裡有問題?最終對於這些技術的理解就會越來越清晰透澈。

學習CSS的盲點,太懶!

許多新手在學習CSS屬性的時候,卡到問題時有不少人都會選擇找人詢問,因為這是最快能拿到答案的方式,也最省時間,但卻自我放棄了思考的能力,其實有時候仔細去檢視一下畫面上面的問題,並且一樣樣的去分析撰寫中的順序,與畫面產出的狀況,接著回頭想想CSS屬性的原理,並推導那個過程,通常答案就會呼之欲出了,在Amos的教學歷程中,有把這個過程做好的人,多數都會在自我推導的過程中得到解答。

學習CSS請善用工具

學習CSS的過程中,經常會發生設定無效,或是與預想不符的狀況,此時我們可以利用網頁開發者工具來檢視你的原始碼與畫面,看看你的網頁實際套用了哪些CSS,接著來判斷是出了甚麼問題? 有時候是CSS優先權的問題(可參閱「金魚都能懂的CSS選取器」一書第1-3節)、有時候是英文拼錯字的問題、有時候是屬性寫錯的問題。

此外目前許多的文字編輯器(如 VS Code、Sublime text)都有提供原始碼提示及補全功能,你只需要輸入CSS屬性開頭的文字,軟體就會跳出相關的CSS屬性提示,這樣即可降低CSS屬性輸入的錯誤。但倘若英文不好,好歹也能善用「google翻譯」來將屬性翻譯成中文來增加記憶的成效,這樣就不會成為被英文耽誤的CSS學習者了。

學習CSS請保持積極開放的心態

許多學習者都是遇到問題就卡在那邊停滯不前,基本上有時候可以饒過自己一下,先把其他補足再靜下心回頭來想想卡住的這個部分,往往都會有不錯的成效,講個經驗,Amos當初自習 Photoshop時可是卡關卡了半年,學習CSS 3D時也是卡了數個月呢,但經過不屈不撓的牛步學習,最終也是學會了啊!所以千萬不要因為一個小挫折就放棄了,CSS真的很好玩的,相信我!不相信的話,你來上我的課你就會知道了(喂!不要突然開工商模式啊)

以上就是學習CSS屬性的幾個基本原則、方法與心態,接下來的二十多天,就跟著Amos一起來體驗金魚都能懂的CSS必學屬性有哪些吧!讓我們最後也能喊出「我金魚!我驕傲!」


「金魚都能懂的CSS選取器」已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
https://ithelp.ithome.com.tw/upload/images/20200917/20112550bxAFk2frMp.jpg
讓我們好好善用CSS選取器吧


金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的Bootstrap5網頁框架開發

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


下一篇
Font-family - 金魚都能懂的CSS必學屬性
系列文
金魚都能懂的CSS必學屬性31

尚未有邦友留言

立即登入留言