用CSS控制網(wǎng)頁總體風格

2020-03-24 16:26:36

字體：大中小

供稿：網(wǎng)友

在網(wǎng)站建設(shè)中我們通常需要統(tǒng)一網(wǎng)站的整體風格，統(tǒng)一的風格大部分關(guān)系到網(wǎng)頁中文字屬性、網(wǎng)頁背景色以及鏈接文字屬性等等，如果我們應(yīng)用CSS來控制這些屬性，會大大提高網(wǎng)頁設(shè)計速度，更加統(tǒng)一網(wǎng)站總體效果。
為了達到修改整個網(wǎng)頁的目的，我們需要編輯一個外掛式的CSS文檔。根據(jù)這個文檔定義和修改不同CSS屬性并在頁面元素相同或者相似的網(wǎng)頁里調(diào)用它。
整體改變頁面風格
現(xiàn)在網(wǎng)頁中流行宋體的9pt和10.5pt的字體，按快捷鍵“Shift+F11”打開“CSS Style控制面板”，單擊“New Style”按鈕，彈出“New Style”對話框，復選“Redefine HTML Tag”的“Type”類型，這時在Tag處會出現(xiàn)“body”、“br”、“cite”等選項，選擇“body”后確認。這樣我們就建立了一個外掛的CSS文檔，在保存對話框中保存為all后就進入“Style Definition for body in all.css”對話框(如圖1)。選擇“Category”中的“Type”項，定義“Font”為“宋體”、“Size”參數(shù)為“9”，其后的下拉框選擇“Points”、“Color”自定義為喜好顏色就可以了。當然還可以選擇“Category”中的“Background”項來定義“Background”顏色和其他背景屬性。這時您會看到頁面中內(nèi)容的整體改變。

圖1
偏好元素風格的改變
經(jīng)過上面的改變有時不免給您帶來一定麻煩，如果遇到頁面中某個元素，比如突出顯示的文字的字體、字號以及顏色怎么辦！這里我們就需要再定義一個新的html' target='_blank'>CSS樣式單來對其進行控制，右鍵點擊頁面編輯區(qū)，在彈出快捷菜單中點擊“CSS Style/Edit Style Sheet”命令，彈出“Edit Style Sheet”對話框，選擇列表中的all.css，點擊“New”按鈕，在彈出的“New Style”對話框中選擇“Make Custom Style(class)”的“Type”類型定義一個自己偏好的CSS控制。如果想更改頁面中某一元素的屬性，選中它然后右鍵單擊“CSS Styles”面板中“Apply Styles”中剛才定義的CSS，執(zhí)行“Apply”命令就可以了(如圖2)。

圖2
統(tǒng)一控制超級鏈接
超級鏈接也是網(wǎng)頁中經(jīng)常使用的，而網(wǎng)頁的鏈接色默認都是藍色，雖然可以更改，但單一色彩在不同背景色的網(wǎng)頁上顯示就不是那么奏效了，我們來看一下如何用CSS控制網(wǎng)頁實現(xiàn)不同的個性鏈接顏色。在“New Style”對話框中，選擇“Use CSS Selector”的“Type”類型，在“Selector”下拉框中會列出“a:link(鏈接屬性)”、“a:hover(鼠標移動到鏈接上的屬性)”、“a:visited(鏈接被訪問后屬性)”、“a:active(鏈接焦點狀態(tài)下的屬性)”4個選項(如圖3)，這4個選項的設(shè)置會控制網(wǎng)頁中所有的鏈接的屬性，我們可以分別定義這4個屬性，然后添加到“CSS Style”面板中與默認設(shè)置不同的CSS控制中，再將其“Apply”到需要改變的鏈接上就實現(xiàn)了。如果將“Hover”的字體設(shè)置的比“Link”稍微大一點，就會出現(xiàn)鼠標移動到鏈接上時字體變大的效果，試試看是不是很奇妙！

圖3
名詞解釋：CSS即層疊樣式表(Cascading Style Sheet)是在網(wǎng)頁制作過程中普遍用到的技術(shù)。采用了CSS技術(shù)控制的網(wǎng)頁，設(shè)計者會更輕松、有效地對頁面的整體布局、顏色、字體、鏈接、背景以及同一頁面的不同部分、不同頁面的外觀和格式等效果實現(xiàn)更加精確地控制。Dreamweaver MX推出后，其改進的CSS渲染和設(shè)計工具、通過增強CSS面板清晰顯示內(nèi)、外部定義的樣式，讓用戶構(gòu)建出符合最新CSS標準的站點html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：解決跨瀏覽器兼容的CSS編碼準則

下一篇：用HTML和CSS打造屬于自己的暖男“大白”