如何新增樣式：從入門到精通的完整指南

Byadmin

「唉呀，我的網頁怎麼看起來這麼單調，一點都不吸引人！」相信很多剛開始接觸網頁設計的朋友，都有這樣的困擾吧？看著別人網站美輪美奐，自己卻只能望著一堆白花花的文字和呆板的圖片，心裡難免有些小失落。別擔心！今天這篇文章，就是要跟你好好聊聊「如何新增樣式」，從最基本的操作，到進階的應用，一步一步帶你打造出獨一無二、亮眼吸睛的網頁！

什麼是網頁樣式？

在我們開始動手新增樣式之前，先來搞懂「樣式」到底是什麼。簡單來說，網頁樣式就是用來控制網頁「看起來」怎麼樣的一系列規則。它包含了字體的大小、顏色、粗細，背景的顏色、圖片，元素的間距、排列方式，甚至是動畫效果等等，全都屬於樣式的範疇。想像一下，HTML 就像是房子的骨架，而 CSS（Cascading Style Sheets，層疊樣式表）就是裝潢師傅，負責把這個骨架變得美輪美奐，讓它真正成為一個有「靈魂」的空間。

為什麼要強調「新增樣式」呢？因為如果沒有額外新增樣式，瀏覽器預設呈現出來的網頁，通常都非常陽春，甚至可以說是有點醜。例如，標題文字可能就只是單純的粗體和較大字號，段落文字則是標準的黑體。這樣的網頁，很難在眾多網站中脫穎而出，也很難給人留下深刻的印象。所以，學會如何新增樣式，是提升網頁專業度與吸引力的關鍵第一步！

新增樣式的三大主要方式

要將樣式「加」到我們的網頁裡，主要有三種方法。每一種都有它的優點和適用情境，我們就來一一認識一下：

1. 行內樣式 (Inline Styles)

這大概是最直接、最簡單的新增樣式方式了。行內樣式是直接寫在 HTML 標籤的 `style` 屬性裡面。就像我們直接在家具上塗顏色一樣，非常直觀。

範例：

假設我們想讓一個段落的文字變成紅色，並且字體加大一點：

<p style="color: red; font-size: 18px;">這是一段用行內樣式設定的紅色粗體文字！</p>

優點：

  • 直接明瞭： 樣式寫在哪個 HTML 元素旁，一目了然，非常容易理解。
  • 專一性強： 這種樣式只會影響這個特定的 HTML 元素，不會影響到其他地方。

缺點：

  • 不利於維護： 如果你的網頁有很多元素都需要相同的樣式，你就必須在每個元素上都寫一遍，這會讓 HTML 程式碼變得又長又亂，日後修改起來會非常痛苦。想像一下，如果要改個顏色，可能要在幾十個地方修改！
  • 重複性高： 造成大量的程式碼重複，效率低下。
  • 不符合最佳實踐： 專業的網頁開發，通常會盡量避免過度使用行內樣式，以保持程式碼的清晰與易於管理。

總體來說，行內樣式適合用在測試、或是只有極少數、非常特殊的單一元素需要臨時套用樣式時。一般情況下，我們不太建議大量使用它。

2. 內部樣式表 (Internal Style Sheet)

內部樣式表是將所有的 CSS 樣式規則，集中寫在 HTML 文件中的 `` 標籤內的 `