CSS 是什麼？學會了可以如何應用？

CSS 是什麼呢？我們除了學會 HTML 基本架構建立好之外，CSS 的功用就是透過樣式檔的方式，讓整個網頁看起來更好看！

我們可以透過 HTML、CSS 的撰寫，把網頁上的任何元素放到我們想要它呈現的位置，甚至 CSS 也有許多動畫的撰寫方式，例如 CSS animation 等方式，應用廣泛又多元，讓網頁不再那麼靜悄悄不動，而是可以很靈活呈現給讀著喔！

CSS 是什麼？

CSS 是一種樣式檔，用來美化網頁設計的一種方式，副檔名是 .css 。

用一個最簡單的舉例：當我用 HTML 寫好一篇文章，我想要讓主標題變成藍色，這時就是要用 CSS 來修改顏色，否則如果完全沒有用 CSS 樣式來修改，整張網頁就會是預設的黑白樣式畫面。

在 HTML 標籤當中，通常主標題是使用<h1>標籤。

因此依照前面的舉例，我們想要讓主標題變成藍色，我們可以這樣寫：

/* CSS 樣式檔 */

h1{
  color:blue;
}

CSS 是用大括號 { } 把你想要的樣式寫在裡面，我們就可以把這樣的樣式，套入 HTML 文件中。

套入的方式有 2 種，第一種方式是直接寫在 HTML 檔案中，並用 <style></style> 標籤把樣式內容包起來。

第二種是寫成 .css 樣式檔，再到 HTML 文件用 <link href=” css樣式檔名稱.css ” rel=”stylesheet”> 的方式，嵌入網頁當中。

這兩種雖然都可以，但為了方便維護，通常我們會用第二種方式來撰寫，而且這兩種的 CSS 權重在實務上是不同的，我們就先理解成至少為了方便維護和修改，盡量初步修改樣式時，可以優先用嵌入的方式撰寫 CSS 吧！

我們學會了 CSS 之後，就是為了可以把網頁中任何你看得到的元素，都做排版設計，你想要排在哪裡就可以排在哪裡！

尤其像是使用模板化的網頁設計平台，如 Weebly、Wix 等架站平台，他們能修改的樣式相當有限。

有些架站平台可以允許我們用自訂的 CSS 程式碼來變更樣式，達到我們想要呈現給使用者的排版設計，那麼這時候就可以用自訂的 CSS 讓這些模板化的網頁，多了很大的自由度，可以修改 90% 左右的樣式調整幅度，不再侷限於架站平台的模板，而是可以自己做比較大幅度的調整了！

這篇用最簡易的方式，帶著大家了解 CSS 是什麼，以及它是能夠讓網頁設計變成自由度高的樣式調整方式。

熟悉 CSS 之後，除了自己撰寫 HTML 和 CSS 的網頁設計方式之外，再也不怕受限於模板的網頁設計平台樣式囉！

點選下方按鈕追蹤獺斯特 IG，獲得更多架設網站、網路行銷相關知識：