- TEL:131 7970 3111
-
慧網(wǎng)微信
- 掃描二維碼
- 關(guān)注邳州在線
-
手機(jī)網(wǎng)站
- 手機(jī)掃描二維碼
- 進(jìn)入手機(jī)站
網(wǎng)站地圖
付款方式
為了達(dá)到修改整個(gè)網(wǎng)頁(yè)的目的,我們需要編輯一個(gè)外掛式的CSS文檔。根據(jù)這個(gè)文檔定義和修改不同CSS屬性并在頁(yè)面元素相同或者相似的網(wǎng)頁(yè)里調(diào)用它。
整體改變頁(yè)面風(fēng)格
現(xiàn)在網(wǎng)頁(yè)中流行宋體的9pt和10.5pt的字體,按快捷鍵“Shift+F11”打開“CSS Style控制面板”,單擊“New Style”按鈕,彈出“New Style”對(duì)話框,復(fù)選“Redefine HTML Tag”的“Type”類型,這時(shí)在Tag處會(huì)出現(xiàn)“body”、“br”、“cite”等選項(xiàng),選擇“body”后確認(rèn)。這樣我們建立了一個(gè)外掛的CSS文檔,在保存對(duì)話框中保存為all后進(jìn)入“Style Definition for body in all.css”對(duì)話框(如圖1)。選擇“Category”中的“Type”項(xiàng),定義“Font”為“宋體”、“Size”參數(shù)為“9”,其后的下拉框選擇“Points”、“Color”自定義為喜好顏色可以了。當(dāng)然還可以選擇“Category”中的“Background”項(xiàng)來定義“Background”顏色和其他背景屬性。這時(shí)您會(huì)看到頁(yè)面中內(nèi)容的整體改變。
偏好元素風(fēng)格的改變
經(jīng)過上面的改變有時(shí)不免給您帶來一定麻煩,如果遇到頁(yè)面中某個(gè)元素,比如突出顯示的文字的字體、字號(hào)以及顏色怎么辦!這里我們需要再定義一個(gè)新的CSS樣式單來對(duì)其進(jìn)行控制,右鍵點(diǎn)擊頁(yè)面編輯區(qū),在彈出快捷菜單中點(diǎn)擊“CSS Style/Edit Style Sheet”命令,彈出“Edit Style Sheet”對(duì)話框,選擇列表中的all.css,點(diǎn)擊“New”按鈕,在彈出的“New Style”對(duì)話框中選擇“Make Custom Style(class)”的“Type”類型定義一個(gè)自己偏好的CSS控制。如果想更改頁(yè)面中某一元素的屬性,選中它然后右鍵單擊“CSS Styles”面板中“Apply Styles”中剛才定義的CSS,執(zhí)行“Apply”命令可以了(如圖2)。
統(tǒng)一控制超級(jí)鏈接
超級(jí)鏈接也是網(wǎng)頁(yè)中經(jīng)常使用的,而網(wǎng)頁(yè)的鏈接色默認(rèn)都是藍(lán)色,雖然可以更改,但單一色彩在不同背景色的網(wǎng)頁(yè)上顯示不是那么奏效了,我們來看一下如何用CSS控制網(wǎng)頁(yè)實(shí)現(xiàn)不同的個(gè)性鏈接顏色。在“New Style”對(duì)話框中,選擇“Use CSS Selector”的“Type”類型,在“Selector”下拉框中會(huì)列出“a:link(鏈接屬性)”、“a:hover(鼠標(biāo)移動(dòng)到鏈接上的屬性)”、“a:visited(鏈接被訪問后屬性)”、“a:active(鏈接焦點(diǎn)狀態(tài)下的屬性)”4個(gè)選項(xiàng)(如圖3),這4個(gè)選項(xiàng)的設(shè)置會(huì)控制網(wǎng)頁(yè)中所有的鏈接的屬性,我們可以分別定義這4個(gè)屬性,然后添加到“CSS Style”面板中與默認(rèn)設(shè)置不同的CSS控制中,再將其“Apply”到需要改變的鏈接上實(shí)現(xiàn)了。如果將“Hover”的字體設(shè)置的比“Link”稍微大一點(diǎn),會(huì)出現(xiàn)鼠標(biāo)移動(dòng)到鏈接上時(shí)字體變大的效果,試試看是不是很奇妙!
名詞解釋:CSS即層疊樣式表(Cascading Style Sheet)是在網(wǎng)頁(yè)制作過程中普遍用到的技術(shù)。采用了CSS技術(shù)控制的網(wǎng)頁(yè),設(shè)計(jì)者會(huì)更輕松、有效地對(duì)頁(yè)面的整體布局、顏色、字體、鏈接、背景以及同一頁(yè)面的不同部分、不同頁(yè)面的外觀和格式等效果實(shí)現(xiàn)更加地控制。Dreamweaver MX推出后,其改進(jìn)的CSS渲染和設(shè)計(jì)工具、通過增強(qiáng)CSS面板清晰顯示內(nèi)、外部定義的樣式,讓用戶構(gòu)建出符合CSS標(biāo)準(zhǔn)的站點(diǎn)。