黃小二的讀書筆記
有才而性緩定屬大才，有智而氣和斯為大智。人偏狹我受之以寬容，人險仄我持之以坦蕩。緩事宜急干，敏則有功；急事宜緩辦，忙則多措。 --李叔同

隨筆-7 評論-24 文章-102 trackbacks-0

原文轉自：
Dreamweaver 8.0學習教程 - 使用CSS美化頁面 http://www.zznj.com/web2/info/info_982.html

二、使用CSS樣式美化頁面

在“CSS規則對話框”中，我們可以通過類型、背景、區塊、方框、邊框、列表、定位和擴展項的設置，來美化我們的頁面，當然啦，我們在定義某個CSS樣式的時候，不需要對每一個項都進行設置，需要什么效果，選擇相應的項進行設置就可以了。

1、文本樣式的設置

新建CSS樣式, “選擇器類型”為類，名稱為 “style1”定義在“僅對該文檔”。保存至站點根目錄下的CSS文件夾內，彈出“CSS規則定義”對話框，默認顯示的就是對文本進行設置的“類型”項。

字體：可以在下拉菜單種選擇相應的字體。

大?。捍笮【褪亲痔?，可以直接填入數字，然后選擇單位。

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

行高：這項設置在網頁制作種很常用。設置行高，可以選擇“正常”，讓計算機自動調整行高，也可以使用數值和單位結合的形式自行設置。需要注意的是，單位應該和文字的單位一致，行高的數值是包括字號數值在內的。例如，文字設置為12pt，如果要創建一倍行距，則行高應該為24pt。

變量：在英文種，大寫字母的字號一般比較大，采用“變量”中的“小型大寫字母”設置，可以縮小大寫字母。

顏色：設置文字的色彩。

2、背景樣式的設置

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

在CSS規則定義”對話框左側選擇“背景”項，可以在右邊區域設置CSS樣式的背景格式。

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

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

重復：在使用圖像作為背景的時，可以使用此項設置背景圖像的重復方式，包括“不重復”、“重復”、“橫向重復”、和“縱向重復“。

附件：選擇圖像做背景的時候，可以設置圖像是否跟隨網頁一同滾動。

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

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

3、區塊樣式設置

在CSS規則定義”對話框左側選擇“區塊”項，可以在右邊區域設置CSS樣式的區塊格式。

單詞間距“英文單詞之間的距離，一般選擇默認設置。

字母間距：設置英文字母間距，使用正值為增加字母間距，使用負值為減小字母間距。

垂直對齊：設置對象的垂直對齊方式。

文本對齊：設置文本的水平對齊方式。

文字縮進：這是最重要的項目。中文文字的首行縮進就是由它來實現的。首先填入具體的數值，然后選擇單位。文字的縮進和字號要保持統一。如字號為12px，像創建兩個中文自的縮進效果，文字縮進就應該為18px。

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

顯示：制定是否以及如何顯示元素。選擇“無”則關閉它被制定給的元素的顯示。在實際控制中很少使用。

4、方框樣式的設置

在前面我們設置過圖像的大小、設置圖像水平和垂直方向上的空白區域、設置圖像是否有文字環繞效果等。方框設置進一步完善、豐富了這些設置。

在CSS規則定義”對話框左側選擇“方框”項，可以在右邊區域設置CSS樣式的方框格式。

寬：通過數值和單位設置對象的寬度。

高：通過設置和單位設置對象的高度。

浮動：實際就是文字等對象的環繞效果。選擇“右對齊”、對象居右。文字等內容從另外一側環繞對象。選擇“左對齊”。對象居左，文字等內容從另一側環繞。“無”取消環繞效果。

清除：規定對象的一側不許有層?？梢酝ㄟ^選擇“左對齊”、“右對齊”，選擇不允許出現層的一側。如果在清除層的一側有層，對象將自動移到層的下面。“兩者”是指左右都不允許出現層。“無”是不限制層的出現。

“填充”和“邊界”：如果對象設置了邊框，“填充”是指邊框和其中內容之間的空白區域；“邊界”是指邊框外側的空白區域。

5、邊框樣式設置

邊框樣式設置可以給對象添加邊框，設置邊框的顏色、粗細、樣式。

在CSS規則定義”對話框左側選擇“邊框”項，可以在右邊區域設置CSS樣式的邊框格式。

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

寬度：設置4個方向邊框的寬度?？梢赃x擇相對值：細、中、粗。也可以設置邊框的寬度值和單位。

顏色：設置邊框對應的顏色，如果選中“全部相同”復選框，則其他方向的設置都與“上”相同。

6、列表樣式設置

CSS中有關列表的設置豐富了列表的外觀。在CSS規則定義”對話框左側選擇“列表”項，可以在右邊區域設置CSS樣式的列表格式。

類型：設置引導列表項目的符號類型?？梢赃x擇圓點、圓圈、方塊、數字、小寫羅馬數字、大寫羅馬數字、小寫字母、大寫字母、無列表符號等。

項目符號圖像：可以選擇圖像作為項目的引導符號，單擊右側的“瀏覽”按鈕，找到圖像文件即可。選擇ul標簽可以對整個列表應用設置，選中li標簽可對單獨的項目應用。

位置：決定列表項目縮進的程度。選擇“外”，列表貼近左側邊框，選擇“內”，列表縮進。這項設置效果不明顯。

7、定位樣式設置

“定位”項實際上是對層的設置，但是因為DW提供了可視化的層制作功能，所以此項設置在實際操作中幾乎不會使用。

8、擴展樣式的設置

CSS樣式還可以實現一些擴展功能，這些功能集中在擴展面板上。這個面板主要包括3種效果：分頁、光標和過濾器。在CSS規則定義”對話框左側選擇“擴展”項，可以在右邊區域設置CSS樣式的擴展格式。

分頁：通過樣式來為網頁添加分頁符號。允許用戶指定在某元素前或后進行分頁。分頁的概念是打印網頁種的內容時在某指定的位置停止，然后將接下來的內容繼續打印在下一頁紙上。

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

過濾器：使用CSS語言實現過濾器（濾鏡）效果。單擊“過濾器”下拉列表框旁的按鈕，可以看見有多種濾鏡效果可供選擇。

濾鏡效果

描述

Alpha

設置透明效果

Blru

設置模糊效果

Chroma

把指定的顏色設置為透明

DropShadow

設置投射陰影

FlipH

水平反轉

FlipV

垂直反轉

Glow

為對象的外邊界增加光效

Grayscale

降低圖片的彩色度

Invert

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

Light

設置燈光投影效果

Mask

設置遮罩效果，Color指定遮罩的顏色

Shadow

設置陰影效果

Wave

設置水平方向和垂直方向的波動效果

Xray

設置X光照效果

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

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: html中圖片ATL參數分行、出錯顯示 CSS網頁配色、隔行換色、選項卡、Div滾動條 [轉] 完美打造超完美CSS圓角框 CSS 書寫相關《重構HTML: 改善Web應用的設計》讀書筆記正則表達式相關（增加收集中...）網頁實際時用GBK還是UTF-8 Dreamweaver 8.0 里的樣式設計器

<

2025年6月

>

日

一

二

三

四

五

六

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

文章分類(147)

文章檔案(108)

在線幫助

Java API Specifications
Java 開源大全
javaNB 在線文檔
MSDN 技術資源庫
MySQL 5.1參考手冊
Oracle Documentation
w3school 在線教程

開源軟件庫

Ajax/JavaScript腳本大全
Asp.net源碼專業站
CSDN開源頻道
CSS9.NET
源碼愛好者

社區

developerWorks 中國

文章分類(147)

文章檔案(108)

在線幫助

開源軟件庫

社區

最新評論

評論排行榜