css zen garden是一個非常知名的網頁設計分享平台，分享什麼呢!?就是css設計者(通常是專家，或常年在從事網頁設計者)分享他們用css語法，改變網頁外觀(版型)的傑作，值得注意的是他們所用的html檔都是一樣的，但是他們所用的css語法冏異，所創造的外觀也另人歎為觀止。csszengarden創始者還有出書。個人有幸在好幾年前就買了這本書了，但都沒用，因為我對程式語言方面就是無感啊！@_@

近來在學drupal，覺得它的強項在只憑藉網頁的架構設計，再加模組連結，就可以不用語法呈現動態網頁了。但是它的外觀呢！還是得用版型或區塊......，但是最後還是必需動到它的css，css才是設計的王道啊！

有薦於此，不禁又上csszengarden的網站，想從大師的觀點學起。但下載範例檔(index.html;style.css)後，發覺兩者兜不起來，沒有呈現設計過的架構@_@。後來拜google所賜，發覺youtube有教學，關鍵就在於修改index.html，在</head>前置一段語法，就可以有它的版型了^_^(p.s.index.html;style.css要放在同一資料夾才可以讀取)，語法如下：

 <link href="style.css" rel="stylesheet" type="text/css"

但是前項的作法，只能用在範例檔，若你想要看該作品的css，就要找到VIEW THIS DESIGN’S CSS的連結下載下來，語法就有些不同了。

例：你想要208例的版型，就要下載208.css，而且語法要寫成：

<link href="208.css" rel="stylesheet" type="text/css"

話說在前，所用的css並不會連圖片一起呈現。也就是字的版型有了，圖形的版型卻沒有!?這就有待再研究了。其實到這個地步，資深的設計師應該知道怎麼做了吧!?^_^

註※：csszengarden的範例版型，圖形好像沒法用另存圖片的方法，但我用chrome檢查元素，在Matched CSS Rules就能找到它所連結的圖形，只要圖形放在html&css同一路徑，是可以呈現的。所以若您想要完整仿作整個的版型當練習，並不是不行喔！^_^