CSS中常用的單位_經驗交流

一、長度單位

長度單位是Web頁設計中最常用的一個單位。一個排列無序、雜亂無章的頁面不可能給人們留下什麼好的印象。於是，在設計的時候需要為元素的位置、尺寸精確地定義一些值，以使其達到預期的效果。

CSS給予人們精確控制網頁的能力，這一點為人們津津樂道。它允許人們定義外觀、尺寸、空間及其他的樣式。但是，CSS所給出的控制同時也是一個危險的東西，這不僅表現在設計者缺乏經驗，更在於如何給出一個尺寸和空間值。為什麼呢？因為一個設計者雖然能夠決定某一個特殊的螢幕解析度，但是不可能決定別人的大腦和別人的視力或者那些富有個性的自訂設定。

CSS的主要功能之一就是CSS定位，這個定位的概念即包括位置的定位，也包括尺寸的定位。無論哪一種，都需要使用長度單位，不然，精確定位就無從談起。

在CSS中，長度是一種度量尺寸，用於寬度、高度、字型大小、字和字母間距、文本的縮排、行高、頁面邊界、貼邊、邊框線寬以及許許多多的其他屬性。

1．定義長度

在Dreamweaver 4中要定義長度，首先應該在所選擇的選項後面的文字框中寫符號部分，這個符號可以是“+”（正號），表示正長度值，也可以是“－”（負號），表示負長度值。如果不寫符號，那麼預設值是“+”。在符號後緊接著是一個數值，這個數值可以是整數，也可以是小數。然後再在該選項的長度單位下拉式清單方塊中選擇一種長度單位。長度單位一般是一個由兩個字母組成的單位縮寫，例如cm，pt，em等。

2．絕對長度單位

網頁定義上常常使用的絕對長度值由厘米（cm）、毫米（mm）、英寸（in）、點（pt）、派卡（pc）等等。

單位 英寸(in) 厘米(cm) 毫米(mm) 磅(pt) 派卡(pc)
英寸 1.0 2.54 25.4 72 6
派卡 0.16667 0.4233 4.233 12 1.0
厘米 0.3937 1 10 28.3464 4.7244
毫米 0.03937 0.1 1.0 2.83464 0.47244
磅 0.01389 0.0352806 0.352806 1.0 0.83333

絕對長度值的使用範圍比較有限，只有在完全知道外部輸出裝置的具體情況下，才使用絕對長度值。也就是說，絕對長度值最好用於印表機輸出裝置，而在僅僅作為螢幕顯示時，使用絕對長度值意義不大，應該盡量使用相對長度值。 knowsky.com

3．相對長度值

每一個瀏覽器都有其自己預設的通用尺寸標準，這個標準可以由系統決定，也可以由使用者按照自己的愛好進行設定。因此，這個預設值尺寸往往是使用者覺得最適合的尺寸。於是使用相對長度值，就可以是需要定義尺寸的元素按照預設大小為標準，相應地按比例縮放。這樣就不可能產生難以辨認的情況。其實，百分比單位以及關鍵字都能產生相類似的效果。

CSS還支援下列三種長度的相對單位：em（當前字型中字母M的寬度）、ex（當前字型中字母X的高度）、px（一個象素的大小）。

使用em和ex的目的就是為所給的字型設定合適的寬度，而沒有必要知道字型有多大，在顯示時，可通過比較當前字型中的M和X來確定。字型越大，所對應的em和ex也就越大。

以象素為單位的長度是相對於顯示器上的象素(或許為方形)的高度和寬度。影像的寬度和高度經常是以象素給出的。象素測量法通常不是個好方法。首先，象素的大小依分辯率變化較大，大多數使用者都會將顯示器設定成儘可能高的分辯率，從而導致象素太小，而無法閱讀。

二、百分比單位

在Dreamweaver 4中要使用百分比，首先應該在所選擇的選項後面的文字框中寫符號部分，這個符號可以是“+”（正號），表示正長度值，也可以是“—”（負號），表示負長度值。如果不寫符號，那麼預設值是“+”。在符號後緊接著是一個數值，符號後面可以輸入任意值，但是由於在某些情況下，瀏覽器不能處理帶小數的百分數，因此最好不用帶小數的百分比。然後再在該選項的長度單位下拉式清單方塊中選擇“%”。
百分比總是相對於另一個值來說的。那個值可以是長度單位或是其他的。每一個可以使用百分比值單位指定的屬性同時也自訂了這個百分比值的參照值。大多數情況下，這個參照值是此元素本身的字型大小。

三、顏色單位

大量地使用圖片可能會使網頁富有生氣。但是，每一個上過網的人都有為等待一個圖片而焦急不安的經曆。其實，適當地在不同的部位使用不同的顏色，也能起到類似圖片的效果，把讀者的注意力吸引到關鍵的部分，然而，下載網頁的時間卻大幅度地減少了。

color屬性用來定義一個元素的前景顏色，在大多數情況下，這個元素中所包含的使文字物件。使用color屬性同時還可以用來決定一個元素邊框的顏色。通用的定義顏色的文法是：color：顏色值。

定義顏色值最簡單也最直接的方法是使用百分比值。在這種情況下，紅、綠、藍顏色值的等級用百分比數來確定。格式是：color:rgb(R%,G%,B%)。使用百分比值來指定顏色還有一個好處是它能夠聲明一組真正的數字，不論它的值是多少。

指定顏色的另一種方法是使用範圍在0～255之間的整數來設定。格式是color:rgb(128,128，128)。
定義顏色的第三種方法是使用十六進位數組定義顏色。這種定義的方法對於經常進行程式設計的人來說比較熟悉。定義顏色時使用三個前後按順序排列的十六進位數組表示，例如“#FC0EA8”。這種定義的方式就是形如#RRGGBB的格式。即在紅、綠、藍的位置上添上需要的十六進位值。

定義顏色最後一種方法也最簡單的方法是指定顏色的名稱。例如如下所示的代碼指定文本的顏色為紫色。

在Dreamweaver 4中，可以單擊顏色選取器的表徵圖，從開啟的顏色選取器中選擇一種合適的顏色。

四、URL單位

URL單位和連結的地址有關。所謂URL就是“Uniform Resource Locator”的簡寫，連結是網頁的靈魂。通過連結的方式可以使各個網頁之間聯結起來，使網站中眾多的頁面構成一個有機整體，使訪問者能夠在各個頁面之間跳轉。連結可以是一段文本，一幅映像或其他網頁元素，當在瀏覽器中用按一下滑鼠這些對象時，瀏覽器可以根據其指示載入一個新的頁面或者跳轉到頁面的其他位置。

在建立連結的過程中，路徑是非常重要的。Dreamweaver 4中有兩種路徑：絕對路徑和相對路徑，其中相對路徑可分為和根目錄相對的路徑及和文當相對的路徑。

絕對路徑時含伺服器協議（在網頁上通常是http://或ftp://）的完全路徑。絕對路徑包含的是精確位置而不用考慮來源文件的位置。但是如果目的文件被移動，則連結無效。建立對當前網站以外檔案的連結時必須使用絕對路徑。

和根目錄相對的路徑總是從當前網站的根目錄開始。網站上的所有可以公開的檔案都存放在網站的根目錄下。和根目錄相對的路徑使用斜杠告訴伺服器從根目錄開始。例如，/ Dreamweaver /index.html將連結到網站根目錄Dreamweaver檔案夾的index.html檔案。如果要在內容經常被移動的環境中連結檔案，那麼使用和根目錄相對的路徑往往是最佳的方法。在使用與根目錄相對的路徑時，包含連結的文檔在網站內移動，連結不會中斷。但是，和根目錄相對的路徑和適合於本地查看網站，在這種情況下，可以使用和文檔相對的路徑。

注意：當在瀏覽器中按照本地方式預覽檔案時，和根目錄相對的路徑所連結的內容不會出現。這是因為瀏覽器不能像伺服器那樣識別網站根目錄，要預覽和根目錄相對的路徑所連結的內容，必須將檔案放置到遠程伺服器並從那裡進行查看。

和文檔相對的路徑是指和當前文檔所在的檔案夾相對的路徑。例如文檔test.swf在檔案夾Flash中，它指定的就是當前檔案夾內的文檔。…/test.swf指定的則是當前檔案夾上級目錄中的文檔；而/test/test.swf指定是 Flash檔案夾下test檔案夾中的test.swf文檔。和文檔相對的路徑通常是最簡單的路徑，可以用來連結總是和當前文檔在同一檔案夾中的檔案。

注意：在建立和文檔相對的路徑之前必須儲存新檔案，因為在沒有定義起始點的情況下，和文檔相對的路徑是無效的。在文檔儲存之前，Dreamweaver 4會自動使用以File://開始的絕對路徑。

