循序漸進學習 CSS 排版指令的網站（有中文）

英文版： http://goo.gl/GcEPU
繁中版： http://goo.gl/g3JuY2
#CSS
本文FB網址： https://goo.gl/GJpBKJ

CSS 在網頁設計中，可以用來「排版」、「顯示動畫」、「滑鼠移入移出動畫」等特效。特別是現在筆電、平板、手機螢幕尺寸各個不同的情況下，CSS 更是肩負起「版面自動調整（Responsive Design，又稱「自適應設計」）」的重責大任。在內容不改變的條件下，如何將版面、照片，重排縮放至每種螢幕尺寸都能舒適閱讀，更是目前網頁程式設計師的一大挑戰。而這一切，都可以靠 CSS 來完成。CSS 在網頁程式設計的重要性，自是不可言喻！

有人曾經跟我抱怨，CSS 語法艱澀難學。的確，它的一些語法邏輯，跟常見的程式語言有點不一樣。想要學會 CSS，得確實掌握「Selector」這個概念。但市面上的書籍，都是一股腦將一大堆 Selector 洋洋灑灑列出來，光看眼睛都花了，怎麼能靜下心來學習呢？

今天介紹的這個網站，可以確實幫您學會 CSS！首先，它有英、簡中、繁中...等 13 種語言版本，我看過繁中版了，翻譯得很好！閱讀上毫無困難！此外，它是用「下一頁」、「下一頁」...的方式進行整個課程。每一頁的課程都限定在特定主題，讓你不至於因為資料過多而分神。所以特別推薦給想學 CSS 排版的朋友。

這個網頁的缺點，就是它只講 CSS 排版。「CSS 屬性」這部分並沒有細講。但 CSS 最不好懂、用在 Responsive Design 上最多的，也是排版指令。所以掌握 CSS 排版指令，您大概也克服掉六成以上的難關了。

如果您真的對 CSS 很有興趣，想把它的一切「吃乾抹淨」，推薦一本最近剛出的好書：「CSS：The Missing Manual國際中文版 第四版」（博客來網址： http://goo.gl/BKoM1x ）。裡面全方位包含了 CSS 的每個細節，是本還不錯的好書。

今天推薦的內容還喜歡嗎？喜歡的話還請不吝按讚鼓勵一下喔！加點意見、轉發到自己的 Facebook 上，久而久之更能讓您成為這方面的「意見領袖」。有任何疑問，歡迎在本篇下方留言（本篇FB網址： https://goo.gl/GJpBKJ ），我會盡快回覆您的！

舊文新寫！
以前寫的教學都看不懂自己在寫啥了，所以重新更新了這篇文章，要做垂直置中沒有想像的難，簡單幾行語法就可以達成囉 :)

http://blog.mukispace.com/css-div-center/

[WebTech #72] CSS > 4. CSS 範例 > 4-5 圖形處理 > 4-5-1 縮圖（Thumbnails）

喜歡拍照的朋友，一定會想要在一個網頁內，顯示越多圖片越好。那麼，您就不能錯過現在正要介紹的功能：縮圖（Thumbnails）。

用 CSS 呈現縮圖是相當方便、且效果多元的。本篇分享的縮圖效果有：一般、動畫（含：縮放、糊化、加註...）等效果。讓我們現在馬上就來看看吧！

一般縮圖：
(1) http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/perfectly-rotate-and-mask-thumbnails-with-css3/
(2) http://webdesignerwall.com/tutorials/creating-a-modern-lightbox-with-css3-and-javascript
(3) http://webdesignerwall.com/tutorials/css3-image-styles

動畫縮圖（縮放）：
(1) http://tutorialzine.com/2012/05/growing-thumbnails-portfolio-jquery-css3/
(2) http://www.tangledindesign.com/blog/enhancing-thumb-galleries-css3-transitions-transforms/
(3) http://tympanus.net/codrops/2012/01/04/thumbnail-proximity-effect/
(4) http://inspectelement.com/tutorials/create-a-css3-image-gallery-with-a-3d-lightbox-animation/

動畫縮圖（糊化，Blur）：
(1) http://www.red-team-design.com/css-filter-effects-in-action

動畫縮圖（加註，Annotation）：
(1) http://pehaa.com/2012/02/create-your-portfolio-gallery-using-html5-canvas-tutorial/
(2) http://tympanus.net/codrops/2011/12/26/css3-lightbox/
(3) http://tympanus.net/codrops/2012/01/09/filter-functionality-with-css3/

其它縮圖效果：
(1) http://tympanus.net/codrops/2012/07/20/3d-flipping-circle-with-css3-and-jquery/

底下這個雖然不算縮圖，不過它與製作縮圖所用的技巧差不多，因此我就把它放在這裡了：
* 使用 CSS 製作「便利貼」： http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/

---
最棒的 CSS Selector 或 Properties 線上參考手冊：
（進入後，Selector 在中央，Properties 在左下選單）
http://www.w3schools.com/cssref/css_selectors.asp