7777久久亚洲中文字幕蜜桃,亚洲av无码专区在线观看亚,香蕉大伊亚洲人在线观看

原文轉(zhuǎn)自：
Dreamweaver 8.0學(xué)習(xí)教程 - 使用CSS美化頁(yè)面 http://www.zznj.com/web2/info/info_982.html

二、使用CSS樣式美化頁(yè)面

在“CSS規(guī)則對(duì)話框”中，我們可以通過(guò)類型、背景、區(qū)塊、方框、邊框、列表、定位和擴(kuò)展項(xiàng)的設(shè)置，來(lái)美化我們的頁(yè)面，當(dāng)然啦，我們?cè)诙x某個(gè)CSS樣式的時(shí)候，不需要對(duì)每一個(gè)項(xiàng)都進(jìn)行設(shè)置，需要什么效果，選擇相應(yīng)的項(xiàng)進(jìn)行設(shè)置就可以了。

1、文本樣式的設(shè)置

新建CSS樣式, “選擇器類型”為類，名稱為 “style1”定義在“僅對(duì)該文檔”。保存至站點(diǎn)根目錄下的CSS文件夾內(nèi)，彈出“CSS規(guī)則定義”對(duì)話框，默認(rèn)顯示的就是對(duì)文本進(jìn)行設(shè)置的“類型”項(xiàng)。

字體：可以在下拉菜單種選擇相應(yīng)的字體。

大小：大小就是字號(hào)，可以直接填入數(shù)字，然后選擇單位。

樣式：設(shè)置文字的外觀，包括正常、斜體、偏斜體。

行高：這項(xiàng)設(shè)置在網(wǎng)頁(yè)制作種很常用。設(shè)置行高，可以選擇“正常”，讓計(jì)算機(jī)自動(dòng)調(diào)整行高，也可以使用數(shù)值和單位結(jié)合的形式自行設(shè)置。需要注意的是，單位應(yīng)該和文字的單位一致，行高的數(shù)值是包括字號(hào)數(shù)值在內(nèi)的。例如，文字設(shè)置為12pt，如果要?jiǎng)?chuàng)建一倍行距，則行高應(yīng)該為24pt。

變量：在英文種，大寫(xiě)字母的字號(hào)一般比較大，采用“變量”中的“小型大寫(xiě)字母”設(shè)置，可以縮小大寫(xiě)字母。

顏色：設(shè)置文字的色彩。

2、背景樣式的設(shè)置

在HTML中，背景只能使用單一的色彩或利用圖像水平垂直方向的平鋪。使用CSS之后，有了更加靈活的設(shè)置。

在CSS規(guī)則定義”對(duì)話框左側(cè)選擇“背景”項(xiàng)，可以在右邊區(qū)域設(shè)置CSS樣式的背景格式。

背景顏色：選擇固定色作為背景。

背景圖像：直接填寫(xiě)背景圖像的路徑，或單擊“瀏覽”按鈕找到背景圖像的位置。

重復(fù)：在使用圖像作為背景的時(shí)，可以使用此項(xiàng)設(shè)置背景圖像的重復(fù)方式，包括“不重復(fù)”、“重復(fù)”、“橫向重復(fù)”、和“縱向重復(fù)“。

附件：選擇圖像做背景的時(shí)候，可以設(shè)置圖像是否跟隨網(wǎng)頁(yè)一同滾動(dòng)。

水平位置：設(shè)置水平方向的位置，可以“左對(duì)齊“右對(duì)齊”、“居中”。還可以設(shè)置數(shù)值與單位結(jié)合表示位置的方式，比較常用的是像素單位。

垂直位置：可以選擇“頂部”、“底部”、“居中”。還可以設(shè)置數(shù)值和單位結(jié)合表示位置的方式。

3、區(qū)塊樣式設(shè)置

在CSS規(guī)則定義”對(duì)話框左側(cè)選擇“區(qū)塊”項(xiàng)，可以在右邊區(qū)域設(shè)置CSS樣式的區(qū)塊格式。

單詞間距“英文單詞之間的距離，一般選擇默認(rèn)設(shè)置。

字母間距：設(shè)置英文字母間距，使用正值為增加字母間距，使用負(fù)值為減小字母間距。

垂直對(duì)齊：設(shè)置對(duì)象的垂直對(duì)齊方式。

文本對(duì)齊：設(shè)置文本的水平對(duì)齊方式。

文字縮進(jìn)：這是最重要的項(xiàng)目。中文文字的首行縮進(jìn)就是由它來(lái)實(shí)現(xiàn)的。首先填入具體的數(shù)值，然后選擇單位。文字的縮進(jìn)和字號(hào)要保持統(tǒng)一。如字號(hào)為12px，像創(chuàng)建兩個(gè)中文自的縮進(jìn)效果，文字縮進(jìn)就應(yīng)該為18px。

空格：對(duì)源代碼文字空格的控制。選擇“正常”，忽略源代碼文字之間的所有空格。選擇“保留”，將保留源代碼中所有的空格形式，包括由空格鍵、Tab鍵、Enter鍵創(chuàng)建的空格。

顯示：制定是否以及如何顯示元素。選擇“無(wú)”則關(guān)閉它被制定給的元素的顯示。在實(shí)際控制中很少使用。

4、方框樣式的設(shè)置

在前面我們?cè)O(shè)置過(guò)圖像的大小、設(shè)置圖像水平和垂直方向上的空白區(qū)域、設(shè)置圖像是否有文字環(huán)繞效果等。方框設(shè)置進(jìn)一步完善、豐富了這些設(shè)置。

在CSS規(guī)則定義”對(duì)話框左側(cè)選擇“方框”項(xiàng)，可以在右邊區(qū)域設(shè)置CSS樣式的方框格式。

寬：通過(guò)數(shù)值和單位設(shè)置對(duì)象的寬度。

高：通過(guò)設(shè)置和單位設(shè)置對(duì)象的高度。

浮動(dòng)：實(shí)際就是文字等對(duì)象的環(huán)繞效果。選擇“右對(duì)齊”、對(duì)象居右。文字等內(nèi)容從另外一側(cè)環(huán)繞對(duì)象。選擇“左對(duì)齊”。對(duì)象居左，文字等內(nèi)容從另一側(cè)環(huán)繞。“無(wú)”取消環(huán)繞效果。

清除：規(guī)定對(duì)象的一側(cè)不許有層。可以通過(guò)選擇“左對(duì)齊”、“右對(duì)齊”，選擇不允許出現(xiàn)層的一側(cè)。如果在清除層的一側(cè)有層，對(duì)象將自動(dòng)移到層的下面。“兩者”是指左右都不允許出現(xiàn)層。“無(wú)”是不限制層的出現(xiàn)。

“填充”和“邊界”：如果對(duì)象設(shè)置了邊框，“填充”是指邊框和其中內(nèi)容之間的空白區(qū)域；“邊界”是指邊框外側(cè)的空白區(qū)域。

5、邊框樣式設(shè)置

邊框樣式設(shè)置可以給對(duì)象添加邊框，設(shè)置邊框的顏色、粗細(xì)、樣式。

在CSS規(guī)則定義”對(duì)話框左側(cè)選擇“邊框”項(xiàng)，可以在右邊區(qū)域設(shè)置CSS樣式的邊框格式。

樣式設(shè)置邊框的樣式，如果選中“全部相同”復(fù)選框，則只需要設(shè)置“上”樣式，其它方向的樣式與“上”相同。

寬度：設(shè)置4個(gè)方向邊框的寬度。可以選擇相對(duì)值：細(xì)、中、粗。也可以設(shè)置邊框的寬度值和單位。

顏色：設(shè)置邊框?qū)?yīng)的顏色，如果選中“全部相同”復(fù)選框，則其他方向的設(shè)置都與“上”相同。

6、列表樣式設(shè)置

CSS中有關(guān)列表的設(shè)置豐富了列表的外觀。在CSS規(guī)則定義”對(duì)話框左側(cè)選擇“列表”項(xiàng)，可以在右邊區(qū)域設(shè)置CSS樣式的列表格式。

類型：設(shè)置引導(dǎo)列表項(xiàng)目的符號(hào)類型。可以選擇圓點(diǎn)、圓圈、方塊、數(shù)字、小寫(xiě)羅馬數(shù)字、大寫(xiě)羅馬數(shù)字、小寫(xiě)字母、大寫(xiě)字母、無(wú)列表符號(hào)等。

項(xiàng)目符號(hào)圖像：可以選擇圖像作為項(xiàng)目的引導(dǎo)符號(hào)，單擊右側(cè)的“瀏覽”按鈕，找到圖像文件即可。選擇ul標(biāo)簽可以對(duì)整個(gè)列表應(yīng)用設(shè)置，選中l(wèi)i標(biāo)簽可對(duì)單獨(dú)的項(xiàng)目應(yīng)用。

位置：決定列表項(xiàng)目縮進(jìn)的程度。選擇“外”，列表貼近左側(cè)邊框，選擇“內(nèi)”，列表縮進(jìn)。這項(xiàng)設(shè)置效果不明顯。

7、定位樣式設(shè)置

“定位”項(xiàng)實(shí)際上是對(duì)層的設(shè)置，但是因?yàn)镈W提供了可視化的層制作功能，所以此項(xiàng)設(shè)置在實(shí)際操作中幾乎不會(huì)使用。

8、擴(kuò)展樣式的設(shè)置

CSS樣式還可以實(shí)現(xiàn)一些擴(kuò)展功能，這些功能集中在擴(kuò)展面板上。這個(gè)面板主要包括3種效果：分頁(yè)、光標(biāo)和過(guò)濾器。在CSS規(guī)則定義”對(duì)話框左側(cè)選擇“擴(kuò)展”項(xiàng)，可以在右邊區(qū)域設(shè)置CSS樣式的擴(kuò)展格式。

分頁(yè)：通過(guò)樣式來(lái)為網(wǎng)頁(yè)添加分頁(yè)符號(hào)。允許用戶指定在某元素前或后進(jìn)行分頁(yè)。分頁(yè)的概念是打印網(wǎng)頁(yè)種的內(nèi)容時(shí)在某指定的位置停止，然后將接下來(lái)的內(nèi)容繼續(xù)打印在下一頁(yè)紙上。

光標(biāo)：通過(guò)樣式改變鼠標(biāo)形狀，鼠標(biāo)放置于被此項(xiàng)設(shè)置修飾的區(qū)域上的時(shí)，形狀會(huì)發(fā)生改變。具體的形狀包括：Hand（手）、crosshair（交叉十字）、text（文本選擇符號(hào)）、wait（Windows的沙漏形狀）、default（默認(rèn)的鼠標(biāo)形狀）、help（帶問(wèn)號(hào)的鼠標(biāo)）、e-resize（向東的箭頭）、ne-resize（指向東北方的箭頭）、n-resize（向北的箭頭）、nw-resize（指向西北的箭頭）、w-resize（向西的箭頭）、sw-resize（向西南的箭頭）、s-resize（向南的箭頭）、se-resize（向東南的箭頭）、auto（正常鼠標(biāo)）。）

過(guò)濾器：使用CSS語(yǔ)言實(shí)現(xiàn)過(guò)濾器（濾鏡）效果。單擊“過(guò)濾器”下拉列表框旁的按鈕，可以看見(jiàn)有多種濾鏡效果可供選擇。

濾鏡效果

描述

Alpha

設(shè)置透明效果

Blru

設(shè)置模糊效果

Chroma

把指定的顏色設(shè)置為透明

DropShadow

設(shè)置投射陰影

FlipH

水平反轉(zhuǎn)

FlipV

垂直反轉(zhuǎn)

Glow

為對(duì)象的外邊界增加光效

Grayscale

降低圖片的彩色度

Invert

將色彩、飽和度以及亮度值完全反轉(zhuǎn)建立底片效果

Light

設(shè)置燈光投影效果

Mask

設(shè)置遮罩效果，Color指定遮罩的顏色

Shadow

設(shè)置陰影效果

Wave

設(shè)置水平方向和垂直方向的波動(dòng)效果

Xray

設(shè)置X光照效果

posted on 2008-09-02 14:42 黃小二閱讀(250) 評(píng)論(0) 編輯收藏所屬分類: Web Design

文章分類(147)

文章檔案(108)

在線幫助

開(kāi)源軟件庫(kù)

社區(qū)

最新評(píng)論

評(píng)論排行榜


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問(wèn) 管理
相關(guān)文章: html中圖片ATL參數(shù)分行、出錯(cuò)顯示 CSS網(wǎng)頁(yè)配色、隔行換色、選項(xiàng)卡、Div滾動(dòng)條 [轉(zhuǎn)] 完美打造超完美CSS圓角框 CSS 書(shū)寫(xiě)相關(guān) 《重構(gòu)HTML: 改善Web應(yīng)用的設(shè)計(jì)》讀書(shū)筆記正則表達(dá)式相關(guān)（增加收集中...）網(wǎng)頁(yè)實(shí)際時(shí)用GBK還是UTF-8 Dreamweaver 8.0 里的樣式設(shè)計(jì)器