css

網頁內包含 HTML、JavaScript 及主要內容還有就是用來排版的 CSS語法，因此當檢視網頁原始碼的時候這些全部都會出現，而 Content Parser Website 這個網站可將網頁解析、篩選過雜結構並單純提取成 Markdown 標記式語言、Html 語法或是 Text，使用方式很簡單，僅需輸入網址選擇要提取的格式，就可以在線上預覽提取後的各種格式，方便使用者做後續的應用。

階層樣式表 (Cascading Stylesheets；CSS) 主要用來塑造網站的特殊風格，例如有段文字要用紅色來標明重點或是網頁版面要呈現2欄或 3欄的架構等等，對初學者而言參考別人寫好的 CSS 語法，可以快速增加對 CSS 的靈活運用，「Copy & Paste CSS」 是個提供 Buttons 及 Box-shadows 的模板網站，使用者可以透過其展示的樣式，如果符合自己的需求，便可以複製其 CSS語法，然後套用到自己的網頁，另外，該網站的 Color palettes 還提供已搭配好的顏色組合，供你複製帶走。

Cascading Style Sheets 簡稱 CSS，這種可應用在網頁(HTML)或 XML 裡的結構式語法，能讓網頁在排版時呈現多樣式的變化、美觀網頁裡的元素(字型、字體、顏色、間距...)使其每個元素可以有自己的呈現方式，可說是網頁的排版師，也是每個網頁設計師必學課題。目前 CSS 的標準也從1.0、2.0 進展到最新的 3.0，提供了更多的樣式及效果，讓網頁可以變得更生動，對於某些要呈現的網頁效果也省去了使用像是 Flash 或是其它美工軟體來製作。CSS 3.0 Maker 就是一個相當好應用的 CSS 3.0 線上 CSS 語法產生器，對於所需要的效果，可利用其產生器進行調整設定，便能產生出針對各家瀏覽器的支援度所需要的 CSS 3.0 代碼。

適當的替作品加入背景，可增加作品的整體的滿意度，如果是網頁，以往因 CSS 語法在各家瀏覽器支援程度不一的情況下，多數會使用圖片來製作，不但前期製作麻煩，後續要維護也不容易，而如今瀏覽器與 CSS 標準逐漸統一，使用純 CSS 語法來製作背景圖對後續要更新維護也相對簡單，CSS Background Patterns 這個免費的線上服務，利用 CSS 語法做出多種樣式的背景圖案提供大家使用，使用者在該網站，可以更改背景圖案的前景色、背景色、透明度及圖案的濃密度，且每次更改會在該網頁的背景即時展示，讓使用者即時預覽，滿意就可以將該背景圖的 CSS 一鍵複製，方便使用者後續應用。

想要在網頁上對「Button - 按鈕」進行樣式調整，通常會使用背景圖片或是使用 CSS 來調整按鈕的外觀，若要加上當滑鼠移到按鈕的上方或是離開，也會使用 Javascript 來加上，若對繪製這些圖片、Javascript 都不是很熟悉的話，還是要花一些時間來製作，若是偶而用用，建議可以到 CSS Button Designer 這個免費的按鈕樣式產生器來製作，除了可使用 CSS 改變按鈕樣式，也提供滑鼠移到按鈕的上方或是離開時的 Javascript ，製作完成後，直接複製所產生的 Code 便可應用的網頁裡，相當方便。

透過 HTML 的 <a> 標籤來產生連結，多數會使用文字或是使用圖片，但如果想利用 CSS 樣式表做來調整，甚至是產生一個按鈕的樣式，對初學者來說還是有點門檻，尤其是還要兼容不同廠牌的瀏覽器，更增初學難度。

常可以見到在網路上關於 CSS 排版的提問，例如元件在容器內如何橫排、對齊或是自動縮放等問題，而這些問題幾乎都可以使用 CSS Flexbox 來解決，那什麼是 Flexbox 呢？簡單的說就是將容器的 display 屬性設定為 flex，再透過 flex 的相關屬性來決定容器內的元件要如何排版，所以 Flex 可以分成控制外容器及控制內元件的兩個主要類別屬性，如果是 CSS Flexbox 的初學者建議先看 圖解：CSS Flex 屬性一點也不難 這篇文章，因為即便是想要利用 CSS Flexbox Generator 這個網站來自動產生 flex 相關的 CSS 語法，你也可能需要對 flex 屬性有基本的認識，即便是不全，在實際操作該網站後，便可以完全釐清疑問，增加自己對使用 flex 排版的功力。

CSS 是可以用來控制網頁排版的一種語法，多數的網頁開發工具，均有內建的 CSS 編排功能來協助排版，即便是沒有，也可以利用記事本寫出。想要讓自己寫出的 CSS 語法更容易閱讀，在傳輸的過程中檔案能更小，以便加快網頁的呈現速度時，可以來利用 CleanCss 網站所提供的 CSS Formatter and Optimiser 這個可將 CSS 語法格式化與最佳化的線上工具，只需將寫好的 CSS 語法複製並貼上，便能取得經過格式化與最佳化的 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 新手在入門時所使用的工具。