慶祝學呀
百萬
造訪!
尚未建立名稱
能量:0
我的帳號中心
問 學Bot 任何問題!
首頁&搜尋
最愛&收藏
所有課程
分享資源
帳號設定
關於學呀
線上募款
章節設定
章節名稱
章節類別
章節標籤
或者建立新標籤
章節內容
全螢幕編輯與預覽
# 什麼是CSS? ## CSS 讓 HTML 變漂亮 這十幾年裡,網際網路成為了我們日常生活中不可或缺的一部分。對於一位使用者而言,在使用網路時,最想要遇到的必定就是介面簡單、明瞭、易操作的網站了;而對於一位網頁設計師而言,如何將網頁設計得讓使用者覺得簡單,便是一大功課了! 在[什麼是HTML?](/view/9828fcf7dc?subj=programming) 的章節中我們提到,每一個網站背後的基本架構,都是由 HTML 這個**標籤程式**語言所構成的。它提供基本的網頁版面切割,將一個網頁切割成不同的部分以供設計師編輯。 ![](https://www.w3docs.com/uploads/media/default/0001/05/6d07a36ebe6d55273b39440f2391f1d7e6d4092a.png) 然而,因為它的功能只有切割版面,單單 HTML 本身,並沒有辦法為網站帶來特別的視覺效果。也就是說,網頁設計師無法單單用 HTML 來決定網站的細部設計——按鈕大小、字體顏色、響應式網頁,等。 這個時候,CSS 便派上用場了!**CSS**(全名:Cascading Style Sheets)的工作即為將切割完後的 HTML 網頁美化,讓設計師能夠將網頁中的每個細節都變得更完善。接下來,讓我們來看看 CSS 是如何將 HTML 變漂亮的吧! ## 所以 CSS 究竟如何運作? 讓我們假設,在一個很簡單的 HTML 檔案裡,有一個 `h1` 標籤,如下: ``` <h1>你好我是標題:我想變色</h1> ``` 接著,我們想要將 `h1` 標籤內的文字改為紅色,但是要怎麼做呢?沒錯!即是要使用 CSS 來修飾它。我們可以在檔案中加入像這樣的文字: ``` h1{color: red;} ``` 此行程式碼中,一開始先告訴電腦我們所欲選取的 HTML 標籤是 `h1`。接著,在大括號內,我們告訴電腦 `color: red;`,也就是將字體顏色設為紅色的意思!是不是相當的簡單呢? 讓我們來看看上述的程式碼在瀏覽器中所呈現出來的結果吧!下圖中的左側即為被更改成紅色後的標題文字,右側為瀏覽器的程式碼視窗(有興趣的話,可以對著這個頁面按下滑鼠右鍵,點擊選單中的**檢視**按鈕哦!) ![](https://www.zetria.org/content_img/9chatygty.jpg) ::: suggestion 詳細的操作方法將會在之後的章節介紹。此章節僅提供 CSS 的簡單介紹。 :::
儲存章節
前往實際頁面