酷站兩連發！免費可商用圖庫+CSS前端設計師必備手冊

　　今天的兩個酷站，分別是高質量的圖庫網站+CSS 參考手冊，它將所有 CSS 標簽都列在網站中，同時提供快速檢索功能，當你點擊任一標簽后會開啟詳細使用教學，讓你真正了解每個語法標記如何使用。

　　MMT

　　這個圖庫收錄許多高畫質相片，且都具備一定的拍攝水平和風格，對于想找圖的朋友來說也是個值得收藏的網站。

　　MMT 首頁很清楚告訴大家：本圖庫內所有相片皆可自由、免費使用于商業用途，無論是使用在你的網站、主題、模板、專案、印刷或社群網站文案等等，采用 CC0 授權方式釋出，每周更新。MMT 收錄各種相片主題類型，包括大自然、城市、工作空間、科技、美食、交通等等與我們生活息息相關。

　　MMT 網站收錄的相片由 Jeffery Betts 拍攝，他在 2014 年推出這個網站，想與全世界分享他的攝影作品，這些年來已累積無數相片，決定把相片開放、回饋給在線社群，讓需要的使用者免費下載使用。

　　使用者可從 MMT 免費取得許多漂亮的相片素材，而且無須注冊或登入賬號。

　　STEP 1

　　開啟 MMT 網站，可以看到網頁設計非常簡約，從首頁就能瀏覽最近更新的相片。

　　

 

　　STEP 2

　　如果你想快速尋找特定主題的相片，點擊上方選單「Collections」即可找到網站整理好的相片類別，例如工作相關、文具、綠色植物、景點等等。

　　

 

　　另一種瀏覽方式是從上方選單找到「More」，里頭有分類(Categories)和標簽(Tags)都是讓你快速找到合適圖片的方法(當然你也可以利用右上角的搜尋功能)。

　　前面有提到 MMT 其實收錄不少免費相片，分類也是五花八門，隨意搜尋一下就看到：科技、城市、大自然、夕陽、季節、美食和飲品、天空、交通運輸等圖片類別。

　　

 

　　STEP 3

　　我很喜歡 MMT 頁面設計，瀏覽時非常舒服，可以看一下底下兩張是我開啟的兩個相片分類頁面，只會呈現出預覽圖，右上角可切換不同顯示模式。

　　

 

　　STEP 4

　　如果看到喜歡的相片，點擊開啟原始相片頁面后按下右側「Download」按鈕，就能獲取原始圖文件，圖片尺寸蠻大張的，高分辨率，可以免費使用于個人或商業用途，同時頁面中也會顯示該相片授權信息，目前幾乎都是 CC0 授權喔!

　　

 

　　之前介紹過「HTML Reference 網頁開發者必備手冊!收錄所有 HTML 元素及屬性說明」，有讀者說這個網站比 W3Schools 更方便快速，對于開發者來說實在非常實用，但可能有些人和我一樣接觸 HTML 機會不多，反倒是常要改網頁樣式，假如你平常會需要和 CSS 為伍，本文要推薦的網站會更適合你。

　　CSS Reference 和 HTML Reference 來自同一開發者，從網站名稱你應該可以知道兩者差異，CSS Reference 主要專注于網站級聯樣式表(Cascading Style Sheets，簡稱 CSS)語法參數，網站宗旨「透過范例學習」和我們熟悉的參考手冊差不多，實際上許多在線教學也都是從實例來學習語法操作。

　　CSS Reference 將所有 CSS 標簽都列在網站中，同時提供快速檢索功能，當你點擊任一標簽后會開啟詳細使用教學，使用者可從設定方式對照范例，就能得出如何將某個語法正確運用到你的網頁設計。

　　更重要的是 CSS Reference 讓你真正了解每個語法標記如何使用，而不用從 Google 去翻找不一定正確(或可能過時)的網絡文章。

　　就如同 HTML Reference 一文寫道，我認為所有學習都必須有參考手冊，用于更全面的了解及對照查詢，包括 CSS 當然也是如此，尤其 CSS 3 又出現許多新的語法和設定方式，若沒有參考手冊很容易疏漏。若你屬于前端工程師或設計師，CSS 是每天日常，將網站加入書簽就對了。

　　CSS Reference

　　STEP 1

　　開啟 CSS Reference 網站后，會發現它長得跟 HTMLReference.io 差不多，不過在細部設計上顏色倒沒有用得那么復雜。

　　上方 Collections 收錄一些 CSS 主題，例如動畫、背景、容器模型、Flexbox、位置、過場動畫及排版，下方則有搜尋框及所有 CSS 屬性，目前一共收錄 129 個。

　　

 

　　STEP 2

　　開啟關于文字排版主題分類，能找到一些很常用于文字設計的樣式類別，例如：font-family、font-size、color、text-align、letter-spacing 等等，每個語法都有設定范例、說明并顯示成效于右側供開發者參考。

　　

 

　　比較容易遇到的定位(Positioning)設定，如果你和我一樣時常搞不太清楚的話，從這網站的范例應該更能清楚理解。

　　

 

　　STEP 3

　　每一個 CSS 屬性都會有詳細的設定說明，例如很常用到的 font-style，可以變更文字樣式，加上斜體或粗體等等，各種設定方式都有對應的范例，即使看不懂英文敘述也沒關系，從這里亦能學習每個屬性要如何使用。

　　

 

　　STEP 4

　　其他例如很常遇到的 padding、margin 等 CSS 屬性，一樣可以在 CSS Reference 說明手冊找到非常詳細的介紹及使用方式，透過圖片說明就能更容易理解，假如你想快速復制每個屬性內容，只要點擊語法即可快速復制到剪貼簿。