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

一、長度單位 

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

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

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

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

1．定義長度 

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

2．絕對長度單位 

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

單位 英吋(in)  公分(cm)  毫米(mm)  磅(pt)  派卡(pc)  
 派卡 0.16667  0.4233 4.233  12  1.0  
公分  0.3937  1  10  28.3464   2.83464  0.47244  
磅  0.01389  0.0352806   比較有限，只有在完全知道外部輸出設備的具體情況下，才使用絕對長度值。也就是說，絕對長度值最好用於印表機輸出設備，而在僅僅作為螢幕顯示時，使用絕對長度值意義不大，應該盡量使用相對長度值。 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 です。つまり、必要な 16 進値を赤、緑、青の位置に追加します。

色を定義する最後で最も簡単な方法は、色の名前を指定することです。たとえば、以下に示すコードでは、テキストの色を紫に指定しています。

Dreamweaver 4 では、カラー ピッカー アイコンをクリックして、開いたカラー ピッカーから適切な色を選択できます。

4. URL ユニット

URL ユニットはリンクアドレスに関連付けられます。いわゆる URL は「Uniform Resource Locator」の略であり、リンクは Web ページの魂です。リンクを通じてさまざまな Web ページを接続できるため、Web サイト内の多くのページが有機的な全体を形成し、訪問者がさまざまなページ間を移動できるようになります。リンクは、テキスト、画像、またはその他の Web ページ要素であり、ブラウザーでこれらのオブジェクトがマウスでクリックされると、ブラウザーはその指示に従って新しいページをロードしたり、ページ上の他の場所にジャンプしたりできます。

リンクを作成するプロセスでは、パスは非常に重要です。 Dreamweaver 4 には、絶対パスと相対パスの 2 種類のパスがあり、ルート ディレクトリからの相対パスとファイルからの相対パスに分けられます。

絶対パスには、サーバー プロトコルの完全なパスが含まれます (通常、Web ページでは http:// または ftp://)。絶対パスには、ソースドキュメントの場所に関係なく、正確な場所が含まれます。ただし、対象の文書が移動された場合、リンクは無効になります。現在のサイト外のファイルへのリンクを作成する場合は、絶対パスを使用する必要があります。

ルート ディレクトリに対する相対パスは、常に現在のサイトのルート ディレクトリから始まります。サイト上で公開されているすべてのファイルは、サイトのルート ディレクトリに保存されます。ルート ディレクトリに対する相対パスでは、スラッシュを使用して、ルート ディレクトリから開始するようにサーバーに指示します。たとえば、/Dreamweaver/index.html は、サイトのルートにある Dreamweaver フォルダー内のindex.html ファイルにリンクします。コンテンツが頻繁に移動される環境でファイルをリンクしている場合、多くの場合、ルート ディレクトリからの相対パスを使用することが最善の方法です。ルート ディレクトリに対する相対パスを使用すると、リンクを含むドキュメントはリンクが切れることなくサイト内を移動します。ただし、ルート ディレクトリを基準とした相対パスは、サイトをローカルで表示する場合に適しており、その場合はドキュメントを基準とした相対パスを使用できます。

注: ブラウザでローカルにファイルをプレビューする場合、ルート ディレクトリを基準とした相対パスにリンクされているコンテンツは表示されません。これは、ブラウザがサーバーと同じ方法でサイト ルートを認識しないため、ルートに対する相対パスにリンクされたコンテンツをプレビューするには、ファイルをリモート サーバーに配置し、そこから表示する必要があります。

ドキュメントに対する相対パスは、現在のドキュメントが配置されているフォルダーに対する相対パスを指します。たとえば、ドキュメント test.swf はフォルダ Flash 内にあり、現在のフォルダ内のドキュメントを指定します。 …/test.swf は現在のフォルダーの上位ディレクトリにあるドキュメントを指定し、/test/test.swf は Flash フォルダーの下の test フォルダーにある test.swf ドキュメントを指定します。ドキュメント相対パスは通常、現在のドキュメントと常に同じフォルダー内にあるファイルへのリンクに使用できる最も単純なパスです。

注: ドキュメントに対する相対パスを作成する前に、新しいファイルを保存する必要があります。これは、開始点が定義されていないドキュメントに対する相対パスは無効であるためです。 Dreamweaver 4 では、ドキュメントを保存する前に、File:// で始まる絶対パスが自動的に使用されます。