在進(jìn)行CSS設(shè)計時,我們會用到各種各樣的單位,下面就分別進(jìn)行了詳細(xì)的介紹。
長度單位是Web頁設(shè)計中最常用的一個單位。一個排列無序、雜亂無章的頁面不可能給人們留下什么好的印象。于是,在設(shè)計的時候需要為元素的位置、尺寸精確地定義一些值,以使其達(dá)到預(yù)期的效果。
CSS給予人們精確控制網(wǎng)頁的能力,這一點(diǎn)為人們津津樂道。它允許人們定義外觀、尺寸、空間及其他的樣式。但是,CSS所給出的控制同時也是一個危險的東西,這不僅表現(xiàn)在設(shè)計者缺乏經(jīng)驗(yàn),更在于如何給出一個尺寸和空間值。為什么呢?因?yàn)橐粋€設(shè)計者雖然能夠決定某一個特殊的屏幕分辨率,但是不可能決定別人的大腦和別人的視力或者那些富有個性的自定義設(shè)置。
CSS的主要功能之一就是CSS定位,這個定位的概念即包括位置的定位,也包括尺寸的定位。無論哪一種,都需要使用長度單位,不然,精確定位就無從談起。
在CSS中,長度是一種度量尺寸,用于寬度、高度、字號、字和字母間距、文本的縮排、行高、頁邊距、貼邊、邊框線寬以及許許多多的其他屬性。
(1)定義長度
在Dreamweaver 4中要定義長度,首先應(yīng)該在所選擇的選項(xiàng)后面的文本框中寫符號部分,這個符號可以是“ ”(正號),表示正長度值,也可以是“-”(負(fù)號),表示負(fù)長度值。如果不寫符號,那么默認(rèn)值是“ ”。在符號后緊接著是一個數(shù)值,這個數(shù)值可以是整數(shù),也可以是小數(shù)。然后再在該選項(xiàng)的長度單位下拉列表框中選擇一種長度單位。長度單位一般是一個由兩個字母組成的單位縮寫,例如cm,pt,em等。
(2)絕對長度單位
網(wǎng)頁定義上常常使用的絕對長度值由厘米(cm)、毫米(mm)、英寸(in)、點(diǎn)(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
絕對長度值的使用范圍比較有限,只有在完全知道外部輸出設(shè)備的具體情況下,才使用絕對長度值。也就是說,絕對長度值最好用于打印機(jī)輸出設(shè)備,而在僅僅作為屏幕顯示時,使用絕對長度值意義不大,應(yīng)該盡量使用相對長度值。
(3)相對長度值
每一個瀏覽器都有其自己默認(rèn)的通用尺寸標(biāo)準(zhǔn),這個標(biāo)準(zhǔn)可以由系統(tǒng)決定,也可以由用戶按照自己的愛好進(jìn)行設(shè)置。因此,這個默認(rèn)值尺寸往往是用戶覺得最適合的尺寸。于是使用相對長度值,就可以是需要定義尺寸的元素按照默認(rèn)大小為標(biāo)準(zhǔn),相應(yīng)地按比例縮放。這樣就不可能產(chǎn)生難以辨認(rèn)的情況。其實(shí),百分比單位以及關(guān)鍵字都能產(chǎn)生相類似的效果。
CSS還支持下列三種長度的相對單位:em(當(dāng)前字體中字母M的寬度)、ex(當(dāng)前字體中字母X的高度)、px(一個象素的大小)。
使用em和ex的目的就是為所給的字體設(shè)置合適的寬度,而沒有必要知道字體有多大,在顯示時,可通過比較當(dāng)前字體中的M和X來確定。字體越大,所對應(yīng)的em和ex也就越大。
以象素為單位的長度是相對于顯示器上的象素(或許為方形)的高度和寬度。影像的寬度和高度經(jīng)常是以象素給出的。象素測量法通常不是個好方法。首先,象素的大小依分辯率變化較大,大多數(shù)用戶都會將顯示器設(shè)置成盡可能高的分辯率,從而導(dǎo)致象素太小,而無法閱讀。
新聞熱點(diǎn)
疑難解答
圖片精選