酷站兩連發！免費可商用圖庫+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 說明手冊找到非常詳細的介紹及使用方式，透過圖片說明就能更容易理解，假如你想快速複製每個屬性內容，只要點擊語法即可快速複製到剪貼簿。

轉自優設