- Dreamweaver CS3網站制作炫例精講
- 戴一波編著
- 1467字
- 2019-03-01 20:34:30
1.6 網頁字體樣式正常設置步驟
對于一個新的網頁，應該按照怎樣的順序進行字體樣式的定義呢？下面進行詳細介紹。
1.6.1 網頁主體文本的定義
01 如圖1-44所示，新建網頁文件，并在文檔窗口中打開。
02 打開【CSS樣式】面板，單擊【新建CSS規則】按鈕。
03 彈出【新建CSS規則】對話框：
ⅰ.在【選擇器類型】中選擇“標簽（重新定義特定標簽的外觀）”單選按鈕。
ⅱ.在【標簽】中選擇“body”。
ⅲ.在【定義在】中選擇“僅對該文檔”單選按鈕。
04 單擊【確定】按鈕進行該樣式的定義。
圖1-44 新建CSS規則
01 彈出如圖1-45所示的【body的CSS規則定義】對話框，在【分類】列表中選擇“類型”選項。
圖1-45 【body的CSS規則定義】對話框
02 在【字體】下拉列表框中選擇“Verdana, Arial, Helvetica, sans-serif”。
03 在【大小】下拉列表框中輸入“12”，在其右側下拉列表框中選擇“像素”選項。
04 在【行高】下拉列表框中輸入“150”、“%”，表示網頁中文本行之間的高度是文本高度的1.5倍。
05 單擊【確定】按鈕完成網頁主體樣式的定義。
注：網頁的主體就是對標簽“<body>”的CSS樣式的定義，能起到定義整個網頁中所有文本的應用作用。凡是網頁中沒有特別定義的文本均遵循這里所定義的樣式。
1.6.2 網頁段落文本的定義
01 如圖1-46所示，打開【CSS樣式】面板，單擊【新建CSS規則】按鈕。
圖1-46 新建、定義CSS規則
02 彈出【新建CSS規則】對話框：
ⅰ.在【選擇器類型】中選擇“標簽（重新定義特定標簽的外觀）”單選按鈕。
ⅱ.在【標簽】中選擇“p”，表示段落標簽。
ⅲ.在【定義在】中選擇“僅對該文檔”單選按鈕。
03 單擊【確定】按鈕進行該樣式的定義，彈出【CSS規則定義】對話框。
04 在【分類】列表中選擇“區塊”選項，同時在【文字縮進】中輸入“2”，并在其右側下拉列表框中選擇“字體高（em）”。
05 單擊【確定】按鈕完成對“段落”樣式的定義。
如圖1-47所示，定義了“p”段落標簽的“文字縮進”，在網頁設計時頁面中文本就遵循了該樣式定義而進行顯示。
圖1-47 定義了段落文本縮進的樣式顯示
無論是對網頁主體“body”標簽的定義，還是對段落“p”的樣式定義，均只需定義樣式網頁中主體文本、段落文本即可立即顯現出樣式定義的效果。而對于一些有特殊要求的文本，則需要獨立定義，并且這些獨立定義的樣式還需要在頁面中應用，兩者缺一不可。
1.6.3 自定義文本樣式
01 如圖1-48所示，打開【CSS樣式】面板，單擊【新建CSS規則】按鈕。
02 彈出【新建CSS規則】對話框：
ⅰ.在【選擇器類型】中選擇“類（可應用于任何標簽）”單選按鈕。
ⅱ.在【名稱】中輸入“entxt”。
ⅲ.在【定義在】中選擇“僅對該文檔”單選按鈕。
03 單擊【確定】按鈕進行該樣式的定義。
圖1-48 新建CSS規則
01 彈出如圖1-49所示的【.entxt的CSS規則定義】對話框，在【分類】列表中選擇“類型”選項。
02 在【大小寫】下拉列表框中選擇“首字母大寫”。
03 在【分類】列表中選擇“區塊”選項，在【字母間距】下拉列表框中輸入“1”，并在其右側下拉列表框中選擇“像素”選項。
04 單擊【確定】按鈕完成該樣式的定義。
圖1-49 【.entxt的CSS規則定義】對話框
01 如圖1-50所示，在文檔中輸入全部小寫的英文文本段落。
02 選擇該英文文本段落，打開【屬性】面板，在【樣式】下拉列表框中選擇“entxt”。
03 保存網頁文檔，按【F12】鍵在瀏覽器中查看英文段落，可以看到原本均是小寫字母的英文單詞經過樣式的定義之后顯示為首字母大寫，同時字母之間有“1 像素”的間距使得英文閱讀更有可讀性了。
圖1-50 應用CSS樣式
本章主要介紹的是文本的表現和使用，不過這僅僅是文本在網頁中應用的部分內容，當然這也是較為常用的一部分，還有部分屬于技巧性操作的內容，則需要讀者平時多操作、多思考、多鉆研。本書后面章節中也將多次混合應用這些技術來滿足和豐富我們的網頁設計要求。