CSS學習文大鋼

之前有朋友問，CSS要怎麼開始學?

其實也就看著網路字典，實戰訓出來的。

可是如果真的要有個什麼參考的順序，比如自己的訣竅，學習的思考方式，感覺其實也挺有意思的，也可讓學弟妹參考，或是提醒自己。


大略的架構XD

1. 網頁組成的基本認識
2. 標籤語意預設的CSS屬性
3. CSS各種屬性嘗試
4. 瀏覽器的影響
5. 版型的CSS
6. 元件的CSS
7. 各種目標解決方式

以下我會稍為概述分享，包含我的學習經驗：

一、網頁組成的基本認識

例如HTML5是什麼呢?

這個詞我大學時聽到完全不能理解，就算當時很潮，在當時腦帶是以圖形構成的我來說還是很難理解。

原來"5"是版本的意思。

HTML5 = HTML + CSS3 + javascript
(CSS3的3也是版本的意思...)

還記得老師當時是這麼告訴我們，但是我也錯愕HTML是啥?CSS3啥?javasc.....
當時透過圖書館借的書，都沒有辦法可以讓我馬上理解(當時還是個FLASH網站流行的時候)

回過頭來看其實就是，新版本擁有新的標籤，新的CSS搭配，新的運作形式。
(為什麼比較沒聽過HTML4? 謎：可能因為他做了很多的改變)

為了瞭解它我還去書局找新書看，找了字典書去練習實做，當然有自己做一寫小頁面。
(就是它，而且聽說很像後來有出新版@@→http://www.books.com.tw/products/0010535734)

不過最後熟練是在出社會工作，把整個從構思、設計圖、切圖、套程式、架站到整個建立出來並且手刻 CSS RWD web 才真的完完全全的了解。
熟練的情形大概是不需要翻書查資料的情況下，直覺的可以記得屬性要打什麼出來，怎麼調整，大概是自己或者他人需求需要一直微調畫面的過程中，我就記住它了。

二、標籤語意預設的CSS屬性

雖然每個標籤都可以透過CSS屬性做改變，再早期HTML組成從table切版到div的流行，技術有了許多的突破跟考量。

每個標籤都有他的語意(或者可以說它們預設的用途)，跟閱讀排版的結構也有點關係，誰在誰裡面...等。

可以看官方的網站說明，或者有時候我會跟工程師討論，也可以多看其他網站怎麼做。
例如：https://www.w3.org/ 用Chrome瀏覽器右鍵檢查，或是F12看看別人怎麼做。

三、CSS各種屬性嘗試

最快的方法就是買一本字典書，我自己買了兩本。

• HTML標籤辭典+CSS
  http://www.books.com.tw/products/0010627555?loc=P_asb_008
  (我買得很像是第一版...)
• CSS Secrets 中文版：解決網頁設計問題的有效秘訣
  http://www.books.com.tw/products/0010702536?loc=P_asb_005
  )國外知名CSS專家寫的書，由歐萊禮出的!適合第一本都熟讀後)

其他是網路上別人分享的字典網站，有時候突然忘記的時候非常好用。

• http://www.w3school.com.cn/css/index.asp
• https://www.w3schools.com/css/default.asp
• http://www.w3cplus.com/CSS3

他們很多很像，也不知道誰先出的，就各自挑順眼的進去複習吧!

(待續...)