CSS

階層樣式表 (Cascading Stylesheets，CSS) ，最主要的功能就是讓 HTML 網頁上的元素套用不同的樣式，讓同一個元素可以有不同的樣貌呈現，不過對於初學者而言，要了解整個 CSS 語法規則並不容易，除了時間之外，如果有輔助的工具可以協助，相信可以更快的跨過門檻，CSS Grab n' Go Editor 是個可視化的 CSS 語法編輯器，其主要鎖定 border、box-shadow、text、filter、transform 常用屬性進行變化，用戶可以透過可操作的面板進行屬性值變更，且立刻可看到所產生的變化，完成整個調整，還可以快速產生 CSS、SASS、SCSS 及 LESS 相關語法，快速套用到元素上。

在網頁想要呈現顏色漸層的效果，為了避免各大瀏覽器版本所支援的 CSS 的問題，通常會使用圖片來解決，若是要使用 CSS 樣式表來呈現，則可以試試這個由微軟做的漸層色 CSS 代碼產生器，支援從各角度的漸層，適用 Firefox、IE、Chrome(10,11+)、Safari、Opera 等主流瀏覽器，簡單好用。

以往在網頁想要利用漸層的色彩來美化時，若要使用 CSS 需要考慮地的因素很多，各家瀏覽器所支援的語法也不盡相同，需要不斷的微調，最後乾脆使用圖片一勞永逸。現在 CSS3 開始普及，想要使用漸層色彩，越見方便，CSS Gradient Background Maker 是微軟所推出利用 CSS 語法漸層背景產生器，只要選好顏色，便能產生不同漸層方向，且支援 IE、Mozilla Firefox、Opera、Safari/Chrome 等瀏覽器的 CSS 語法。

在網頁的設計過程中，免不了都要引用到 CSS 樣式表，如何才能設計出適合自己網頁版型與正確的使用 CSS 語法，可以來試試這個 CSS Lint 線上的 CSS 樣式表檢測服務，使用方式相當簡單，只要將寫好的 CSS 語法，複製後貼到 CSS Lint 的檢查框內，便會幫你指出哪一行的語法不適合及修正建議，相當適合 CSS 新手在入門時所使用的工具。

網頁加載時，如果可以給予提示，告訴訪客網站確實有按要求正在動作，相信訪客會比較願意等候，因此，在很多的網站中，會看到利用百分比的進度條、loading 的動畫圖示來顯示，直到加載完成，以 loading 的動畫圖示來說，可以使用 GIF 動畫圖檔來製作，不過前提是須要有 GIF loading 圖檔，另外一種則是利用 CSS 來製作，Tobiasahlin 這個旗下的 SpinKit 網站，提供了以 CSS 為主的 loading 動畫圖示，並提供 HTML 與 CSS 的語法讓有需要的用戶快速套用。

很難想像英文字母也能利用 CSS 來建立，CSS SANS 利用純 CSS 建立包含 A 到 Z 的所有英文字母（沒有小寫），而且提供開放原始碼免費下載，讓網頁設計師只要透過網頁便可呈現。

網頁在呈現方框、線條、文字等元素時，如果可以適時的加入陰影，就可讓該元素有立體效果的展現，Beautiful CSS box-shadow examples 這個網站做出了 80 多個 box-shadow 模板，使用者僅需要挑選適合自己網頁呈現的樣式，完全不必再經過任何的調整，就可以將 CSS 語法帶走，套用到自己的網頁內，快速又方便。

CSS Scanner 是一款極具便利性和直觀性的瀏覽器擴充功能，它能夠直接顯示出網頁上任何 HTML 元素所套用的 CSS 語法，操作上，只需在網頁上滑動滑鼠游標到任意 HTML 元素上，CSS Scanner 就會立即顯示出該 HTML 元素所使用的 CSS 語法及其相關屬性，並讓使用者能夠輕鬆地複製該語法，以供後續使用。

「提示訊息框」常上網的人應該都有體驗過，也就是滑鼠指標指到某一物件，會出現提示訊息，告訴用戶該如何操作或其意義，如果想要在自己的網頁中加入這種提示訊息，也不用從頭打造起，可以透過 Menucool 這個網站所製作的 CSS Tooltip Generator 這個 Tooltip 產生器，只要對其提供的參數進行調整，就能輕鬆製作出符合各大主流瀏覽器都適用的提示訊息框。

瀏覽網頁時，當我們看到帶有 ? 的圖示符號，通常將滑鼠指標指過去就會出現提示框，而其內容是解釋其意義或是提示使用者該如何操作等，而其出現的位置，可能會是在 ? 圖示符號的上、下、左、右。對 CSS 的初學者而言，要產生這樣的提示框並不容易，但我們可以透過一些輔助工具像是 CSS Tooltip Generator 這個免費網站，使用者僅需修改簡單的參數，便可以快速產生自己理想中的提示框，然後複製其產生的 CSS 語法，就可以應用到網頁內，相當方便。

如果網頁要使用一些動畫圖示，例如滑鼠移動按鈕上方，按鈕的形狀會改變或是等待時常見到的 loading 動畫圖示，這些在以往可能需要 JavaScript 或是 gif 圖片來協助實現，而現在你也可以單純利用 CSS 語法就可辦到，CSS WAND 提供 Hover、Loading 類型的 CSS 動畫，只要複製該範例的 CSS 語法，就可以將範例應用到自己的網頁，相當方便。

在 Windows、Android、IOS 或是網頁上經常都可以看到滑動型的開/關切換按鈕，如果自己在網頁上要做出如此效果的按鈕，免用 Javascript 就可以辦到，proto.io 網站提供滑動開/關切換按鈕 CSS 語法產生器，透過介面輸入所需條件，便可產生 CSS 語法，方便你應用在網頁上。