css值和單位

2021-07-11 11:52:59 字數 1871 閱讀 5394

css中有兩類數字:整數和實數。這些數字型別主要作為其他值型別的基礎,不過在某些情況下,這些基本型別數字也可以用作屬性的值。

百分數值是乙個計算得出的實數,其後跟有乙個百分號。百分數值幾乎總是相對於另乙個值,這個值可以是任意的。

很多css屬性都依賴於長度度量來合適的顯示各種頁面元素。所有長度單位都可以表示為整數或者負數,其後跟有乙個標籤(不過有些屬性只能接受整數)。另外還可以使用實數,也就是有小數部分的數。所有長度單位可以分為兩類:絕對長度單位和相對長度單位

英吋(in)

厘公尺(cm)

公釐(mm)

點(pt)

點是乙個標準印刷度量單位。

派卡(pc)

派卡也是一種印刷術語

畫素如果乙個顯示器的解析度設定為1024畫素*768畫素,其螢幕大小為14.22英吋寬、10.67英吋高,而且現實區完全覆蓋整個螢幕,那麼每個畫素的寬和高都為1英吋的1/72(即14.22/1024和10.67/768)所以實際畫素(ppi)都高於72,有時還會更高,達到120ppi。

相對長度單位之所以得名,是因為他們是根據與其他事物的關係來度量的。所度量的實際距離可能因為不在其控制之下的其他因素而改變,如解析度、可視區的寬度、使用者的首選項設定,以及其他的很多方面,另外,對於某些相對單位,其大小幾乎總是對應於使用該單位的元素,因此會因元素的不同而不同

乙個共有3個相對單位:em、ex和px(其實還有rem)。前兩個單位代表『em-height』和』x-height』,這是常用的印刷度量單位;最後一種長度單位是px,這代表『畫素』。乙個畫素就是計算機顯示器上看到的乙個點。這個值被定義為相對單位,因為他取決於顯示器裝置的解析度。

em和ex單位

em定義為一種給定字型的font-size值,如果乙個元素的font-size為14畫素,那麼對於該元素,1em就是等於14畫素

例如,假設乙個h1的字型大小為24畫素,乙個h2元素的字型大小為18畫素,還有乙個段落的字型大小為12畫素,如果將所有者3個元素的左邊距都設定為1em,那麼他們的左邊距就分別為24畫素、18畫素和12畫素:

ex是指所用字型中小寫x的高度,因此如果有兩個段落,其中文字的大小為24點,但是各種使用了不同的字型,那麼各段相應的ex值可能不同。這是因為,不同字型的x的高度可能不同。

畫素長度

從表面看,畫素很直接。如果仔細地檢視每個顯示器,你會看到,它被劃分為由乙個個小框組成的網格。每個框就是乙個畫素。如果將乙個元素的高和寬定義為某個畫素值那麼這個元素的寬和高就會由相應多個元素組成。

遺憾的是,使用畫素有乙個潛在的缺點。如果按畫素設定字型大小,那麼window(ie7以前)的使用者無法使用瀏覽器中的『文字大小』選單調整字型的大小。如果文字大小太小,使用者無法很好的閱讀,這可能存在問題。如果使用靈活的度量,如em,使用者就能調整文字的大小。

另外乙個方面,非常適合用畫素來度量影象大小,因為影象的高度和寬度本身就是畫素值。實際上,只有一種情況下你可能不想用畫素來表示大小,那就是你希望影象能歲文字大小縮放時。

畫素理論

那麼為什麼響度定義為相對長度單位呢?這個我已經解釋過,顯示器上的小色框是畫素。不過,多少個這樣的色框等於一英吋呢?這個問題看上去可能不合邏輯,不過蓉我來解釋。

在討論畫素時,css規範建議如果乙個顯示型別的設定與96ppi截然不同,使用者**應把畫素度量縮放為一種參考畫素。css2建議將90ppi作為參考畫素,不過css2.1建議採用96ppi,這是windows機器常用的度量,而且也被諸如safari等現代流量器所採納。

針對上述問題,做最好的度量可能是相對度量,特別是em,如果合適也可以使用px。在大多數流量器中,由於ex實際上是em的一部分,所以目前來說ex還不太游泳。如果更多的使用者**支援實際的x高度度量,ex可能就會有用武之地。總的來說,em是最靈活的,因為他隨字型大小縮放,所以元素和元素操作都能更為一致。

關耳。

CSS 單位和值

在網頁中的顏色設定是非常重要,有字型顏色 color 背景顏色 background color 邊框顏色 border 等,設定顏色的方法也有很多種 1 英文命令顏色 前面幾個小節中經常用到的就是這種設定方法 p2 rgb顏色 這個與 photoshop 中的 rgb 顏色是一致的,由 r red...

CSS 值和單位

字元 p.onergb包括數字,百分數,16進製制數 p.two p.three p.four安全色 避免抖動的顏色。rgb值20 和51 十進位制 的倍數的值都是安全色。長度 數字 單位 絕對長度單位 在web設計時很少使用到。5種絕對長度單位 英吋 in 厘公尺 cm 公釐 mm 點 pt 派卡...

CSS值和單位

有時,值用乙個詞表示,這叫關鍵字。none是乙個非常常見的關鍵字,若想移除html文件中鏈結的下劃線,可以這樣寫 a link,a visited 去掉下劃線 a link,a visited 加上下劃線全域性關鍵字 inherit initial unset inherit繼承 initial改為...