姬小光前端興趣班【第003期】- 所謂樣式

在上一期的程式碼中，我們用到 h1，p，a 等標籤，這些標籤確定了我們想在網頁中展示一個標題，一個段落，和一個連結。

在上一節我們也看到了，瀏覽器會給我們的標籤“渲染”一個預設的樣式，包括預設的字型大小，顏色，間距等。

那麼，如果我們想自己改變這些字型大小和顏色的話，該怎麼做呢？這一期，我們來談談所謂“樣式”。

所謂樣式

我們所說的樣式，是特指可以改變 HTML 表現的一種程式碼，全稱叫做“層疊樣式表”，英文為 CSS（ Cascading Style Sheets），稍後我們會再深入講解。

我們首先從“內聯樣式”開始，內聯樣式是以 HTML 屬性（回覆 002 ）的形式定義的，屬性名為 style。

我們再次開啟記事本，編輯上一次的 index.html 檔案並儲存：

<h1 style="font-size: 14px; color: red;">此非然並卵</h1>

這裡，從字面意思上大致可以猜到，一個是設定了字型大小（font-size），一個是設定了顏色（color）。那麼讓我們來預覽一下效果：

我們可以看到圖中的 h1 標籤已經變成了我們設定的字型和顏色了。接下來，我們再做一點點改變：

<a style="text-decoration:none;" href=“http://diao.it” target=“_blank” title=“Why are you so diao?”>DIAO.IT</a>

這個單詞貌似複雜一點了... 這個屬性是用來設定文字的一些“裝飾”性的表現的，類似 Word 裡面的 U 和 I 功能。

這裡，我們設定 text-decoration:none; 意思就是讓文字沒有任何修飾，所以下劃線也就不復存在了：

關於 CSS 還有很多屬性可以設定，幾乎可以控制一切你能想到的方方面面。想了解更多 CSS 屬性，建議去 www.w3school.com.cn 學習或查詢資料。

當然，對於你安裝的不同瀏覽器來說，同樣的程式碼在顯示的時候會略有差異，處理這些瀏覽器之間的展示差異，也是前端工程師的重要工作內容之一。

下一節，我們將簡單介紹一下與這些相容性相關的東西。