css

寫網頁時難免會有需要一些動畫效果，例如當滑鼠指標在按鈕、圖片、功能表上或離開時，或是希望做出具有專業水準個人檔案、新聞、產品卡時，如果是初學者想要從無到有，可能需要花費較長時間，要是可以參考別人已做出的效果，取得其程式碼再來修改成自己想要的效果，這樣才能事半功倍。littlesnippets 這個網站提供按鈕、圖片、Logo、News Card、Menu、Profile Card ....等各式各樣的 CSS + JQuery 效果，且每個都有效果展示，更提供 HTML、CSS、JQuery 完整的範例程式碼，用戶只需取得這些程式碼，稍加修改，就可以在自己網頁呈現，相當方便。

漸層色彩在視覺上可以產生層次感，這對常看單一顏色的人來說，會更加有吸引力，以往要做出漸層色，設計師都會傾向於使用圖片，原因在於各家瀏覽器對 CSS 所支援的程度不相同，造成觀感不佳的問題，而如今瀏覽器對 CSS 3 基本上都支援的情況下，要達成純 CSS 語法就做出漸層色也變得相對簡單。Color gradient generator 這個免費網站提供 light、deep、rainbow 及 intense 四種漸層樣式、漸層方向、漸層大小等可視化工具讓讓用戶自行調整，完成後，就可產生 CSS 語法。

51windows.net 是一個免費提供 CSS 樣式表屬性查詢及語法及參數說明、使用範例的網站，對於想要學習或查詢 CSS 的朋友而言，該網站是一個相當好的工具。

Cascading Style Sheets 簡稱 CSS，這種可應用在網頁(HTML)或 XML 裡的結構式語法，能讓網頁在排版時呈現多樣式的變化，目前 CSS 的標準也從1.0、2.0 進展到最新的 3.0，提供了更多的樣式及效果，讓網頁可以變得更生動，對於某些要呈現的網頁效果也省去了使用像是 Flash 或是其它美工軟體來製作。若是有學習 CSS 3.0 的需求，可以來參考這份 CSS 3.0 參考手冊，內容從語法、參數、使用方法、瀏覽器相容性到語法範例均有詳細說明，是相當好的入門手冊。

在網頁上看到的按鈕有些是利用 CSS 產生，也有利用圖片檔來產生的，端看個人需求，對利用 CSS 的人來說，除非很熟 CSS 語法，不然產生的語法實際應用到各家瀏覽器各版本可能會產不忍賭，相對的，如果是利用圖檔，那幾乎是暢通無阻，Free Call-to-Action Button Generator 是一個替網頁產生按鈕的免費網路服務，透過其介面，可以設計出想要的 CSS 按鈕或 PNG 圖檔，並產生其相關的應用語法，讓設計者可以輕鬆地運用。

寫網頁時，當需要應用一些特效，例如標題文字會閃動、旋轉等，以吸引讀者的注意，很多人都會考慮使用 JavaScript 來實現，如果要透過 CSS 來呈現，對 CSS 語法不熟悉，則變成是一個困擾，即便寫出，還要考慮各大瀏覽器的支援程度。angryTools 網站提供 CSS Animation Kit 產生的文字特效，支援 Edge、Chrome 主要瀏覽器，選好效果可立即檢視與產生 CSS 語法，複製即可使用，簡單方便。

對於要編排網頁的格式、美化網頁的外觀，不懂 CSS 大概很難做出，想要學習 CSS 語法，當然就要有本語法手冊，有了語法手冊，最好還要有範例可以參照，而且這個範例還要能夠在瀏覽器執行並且可以看出立即的效果，最後，當然還要能顯示出範例與語法所支援的瀏覽器種類，免得做白工，以上這些，你都可以在線上參照 CSS 參考手冊來達成。

對 HTML 的初學者來說，如果有 HTML 與 CSS 相關的工具來輔助入門，將可事半功倍，以網頁的製作來看，通常都少不了 table 與 div 的應用，如果要有些變化，就需要在色彩、框線、文字、背景等多加著墨，HTML Table Styler 📅 CSS Generator 是一個免費互動式的 HTML 表格與 CSS 線上程式碼產生器，透過操作方便的調整介面，就能產生出 Gradient、Box Shadow、Text Shadow、Color、Font、Table、Column Border、Border Radius、Transform、Background 各種樣式，每種均可產生 HTML、CSS Code，且可預覽，另外，針對 table 要改用 div 也提供轉換器，讓初學過程大幅減短，兼顧工作效率。

常在網頁上可以看到這樣 Chtouch^TM 或是 log₁₀n²的圖示或符號，為了要顯示這樣的樣式，很多人會利用圖形來製作或是插入特殊符號，這樣其實相當麻煩，其實可以利用 HTML 的 sup 與 sub 兩個 Tag 便可以達到上、下標字。

CSS 是可以用來排版與美化網頁內各種元素的腳本語法，不論是整體布局或是內含元素的美化，均需要透過 CSS來完成，而 CSS 語法說難不難，說簡單也不簡單，尤其是對專攻程式或初學者的用戶來說，還是有學習門檻的，但還好網路上這方面的輔助工具有不少，EnjoyCSS 便是其中的一個，透過該網站所設計的介面，使用者僅需調整所需要參數，便可以輕鬆產生網頁常用到的元素，像是文字、輸入欄、按鈕、區塊會使用到的 Text、Background、Shadows、Border and Radius、Transition、Transform 等效果的 CSS 或是 LESS、SCSS 腳本語法，且還提供各瀏覽器所支援的程度，讓你可以快速佈局到自己的網頁內。

在網頁要呈現照片的特殊效果，難免都要用到圖片編輯軟體中的濾鏡功能，不過現在透過 CSS 也能達到濾鏡的功能，filter.css 這個網站提供一組 CSS 語法並搭配說明，讓 div 區塊中的圖片就能立即套用濾鏡，呈現不同的風格特效。

寫網頁時。通常會先架構好每個網頁的布局，可以使用 Table 來架構，也可以使用 Div 來架構，不過通常使用 Div 時，較會牽扯到不同瀏覽器及瀏覽器版本不同的問題。Layout Gala 這個網站提供了 40 個不同的網頁架構固定尺寸或是使用百分比的 Css 版型，供你免費下載使用。