1.2 有色有彩——網頁文本顏色

在學習了網頁中文本的簡單排版之后，下面將介紹如何給網頁文本修飾顏色，使得網頁變得更加精彩。

1.2.1 為文本挑選顏色

01 如圖1-13所示，新建一個網頁并在Dreamweaver文檔窗口中打開。輸入文本“這是一段紅色的文本”。

02 按【Enter】鍵換行繼續輸入文本“這是一段藍色的文本”。

03 選擇文本“這是一段紅色的文本”，（按【Ctrl】+【F3】組合鍵）打開【屬性】面板，單擊【文本顏色】拾取器，在彈出的色盤中選擇紅色，此時在【文本顏色】的文本框中顯示為“#FF0000”的字符串。

04 按照03的步驟，為文本“這是一段藍色的文本”選擇“藍色”，此時【文本顏色】的文本框中顯示為“#0000FF”的字符串。

總之，給文本添加顏色的方法很簡單：只要選擇需要添加顏色的文本，然后通過屬性面板上的顏色拾取器選擇相應顏色即可。

那么，當選擇了顏色之后，在【文本顏色】的文本框中出現的字符又該如何解釋呢？

我們說，這里的字符串表示的是顏色的16進制代碼。所謂16進制，相對于我們日常的10進制而言，0～9表示10位，而a～f則表示新增的6位，那么從“0，1，……，9，a， b，……f”即是所有的16位。

而顏色代碼中表示顏色的有 6 個字符串，其中前兩位表示紅（Red）色，中間兩位表示綠（Green）色，而最后兩位就表示藍（Blue）色了，這也就是我們常說的RGB三原色。此時可以調和這三種原色的比例來得到世界上的各種顏色，比如“#FFFF00”表示的是調和了充分的紅和綠，不摻入任何的藍，得出的顏色就是“黃”顏色了。

1.2.2 為文本應用顏色樣式

在 1.2.1 節，我們已經給頁面中的文本定義了兩種顏色：紅色和藍色。當在網頁中繼續輸入文本并需要繼續給這些文本定義顏色，并且還將需要到紅色或藍色中的一種顏色時，可不必如 1.2.1 節那樣通過【文本顏色】拾取器來選擇顏色，我們有更快捷方便的方法。

首先，我們來關注在1.2.1節給文本定義了兩種顏色之后網頁的本質變化在哪里。

如圖1-14所示，在Dreamweaver的【文檔工具欄】上單擊【顯示代碼視圖】按鈕，切換網頁至【代碼】視圖，這里我們將看到網頁的本質：HTML源代碼。

01 “這是一段紅色的文本”之所以在【設計】視圖下顯示為紅色，究其核心是被代碼class="STYLE1"應用而起的作用。

02 “STYLE1”是在選擇了顏色之后Dreamweaver自動生成的CSS樣式名稱，該名稱的樣式在網頁的開始即被定義了“.STYLE1 {color: #FF0000}”。

03 這也表明了只要定義了一個樣式，在網頁中就可以多次應用該樣式了。這也就是本小節開篇所介紹的快捷方法的原理所在。

01 如圖1-15所示，切換文檔至【設計】視圖，換行繼續輸入文本“這里還是一段紅色的文本”。

02 選擇該段文本，打開其【屬性】面板，在【樣式】下拉列表框中選擇“STYLE1”選項就可以快速地定義了“紅顏色”出來。

使用“STYLE1”樣式的好處不僅僅是可以快捷方便地定義顏色，而且當為“STYLE1”編輯定義了新的樣式，比如文字的大小、背景顏色等時，凡是應用了“STYLE1”的所有網頁對象均作出了相應調整并一致表現為新樣式定義的內容。

1.2.3 自定義（顏色）樣式

通過1.2.1和1.2.2兩節內容的學習，我們可以了解到CSS樣式的功能更強大更易于掌握，但這些樣式均是由Dreamweaver軟件自動生成的。若需要個性化的網頁，可以通過自定義一些樣式來實現。

注：本節雖然是針對自定義顏色的樣式，但對于其他屬性的定義均是如出一轍，所以通過本例也可以觸類旁通，讀者可以通過本例介紹的方法舉一反三。

01 如圖1-16所示，按【Shift】+【F11】組合鍵打開【CSS】面板。

02 單擊【CSS】面板底部的【新建CSS規則】按鈕。

03 彈出【新建CSS規則】對話框：

ⅰ.在【選擇器類型】中選擇“類（可應用于任何標簽）”單選按鈕。

ⅱ.在【名稱】中輸入“.GreenTxt”。

ⅲ.在【定義在】中選擇“僅對該文檔”單選按鈕。

04 單擊【確定】按鈕進行該CSS樣式的定義。

注：CSS規則的【名稱】“.GreenTxt”中的“.”號是針對當前【選擇器類型】是“類”而決定的，當使用“標簽”或者“高級”時，不一定需要到“.”號。當然，如果此時選擇“類”并且在 CSS 規則的名稱少寫了“.”號，Dreamweaver 軟件也會自動判斷并添加 “.”號。

如圖1-17所示即是對新建的CSS規則類名是“GreenTxt”的規則設置窗口。窗口的左側顯示為“分類”，窗口的右側顯示為該分類需要設置的內容，選擇不同的“分類”將動態顯示不同分類設置內容。有關該窗口中所有的“分類”，本書將在后面章節一一介紹。這里只針對網頁中文本定義的樣式進行介紹，所以“類型”正是設置的文本的各類屬性樣式的。

因定義的CSS規則類名是“GreenTxt”，意為定義一個“綠顏色文本”的自定義樣式，所以在當前窗口中只需選擇設置顏色即可。單擊【顏色】拾取器，在彈出的色盤中選擇“綠色”，【顏色】文本框中顯示為“#00FF00”，則表示顏色設置成功。單擊【.GreenTxt的 CSS 規則定義】對話框中的【確定】按鈕即可完成自定義樣式“GreenTxt”的樣式定義。

注：通過【顏色】拾取器的選色，相應地在【顏色】文本框中顯示出顏色的 16 進制代碼的現象，表示當確定某種顏色時，不一定非要使用拾取器選色，如果記得顏色的 16 進制代碼，完全可以在【顏色】文本框中輸入該代碼即可。

如圖1-18所示，繼續在網頁中輸入文本“這是一段綠色的文本”，選擇該段文本，打開【屬性】面板，在【樣式】的下拉列表框中就出現了剛才自定義的樣式“GreenTex”。選擇該樣式名稱，即為該文本應用了樣式，在網頁中這段文本同時顯示出了綠色。

通過對顏色的綜合運用即可制作出如圖1-19所示的網頁。