CSS學習2(值和單位)

數字

CSS中有兩類數字,整數和實數。

百分數

百分數值幾乎總是相對于另一個值,這個值可以是任意的:可能是同一元素另一個屬性的值,也可以是從父元素繼承的一個值,或者是祖先元素的一個值。接受百分數值的屬性會對所允許的百分數值定義某些限制,還會 定義百分數計算到什么程度。

顏色

命名顏色

h1 {color: maroon;}

RGB

h1 {color: rgb(75%,50%,50%);}
h1 {color: rgb(191,127,127);}

十六進制RGB

h1 {color:#FF0000;} /* set *Hls to red */
h2 {color:#903BC0;} /* set H2s to a dusky purple */

Web安全色

所謂“Web安全”顏色是指在256色計算機系統上總能避免抖動的顏色。
如果使用RGB百分數,要讓所有這3個分量都要么是0%,要么是一個能被20整除的數。
如果使用0~255范圍的RGB值,則各分量值要么是0要么是能被51整除的數。
采用十六進制記法,使用值00、33、66、99、CC和FF的三元組都認為是Web安全的。

長度單位

絕對長度單位

英寸(in)
厘米(cm)
毫米(mm)
點(Pt)
派卡(pc)
鑒于顯示器像素密度各不相同,這些絕對長度往往很不準確。避免使用。

相對長度單位

em
一個em對定義為一種給定字體的font-size值,如果一個元素的font-size為14像素,那么對于該元素,1em就等于14像素。

h1 {font-size: 24px;margin-left: 1em;}
h1 small {font-size: 0.8em;margin-left: 1em;}

這樣時,h1的左邊距就會是24px。
在設置font-size時使用em,此時的em就會是相對于父元素的font-size的大小而言的,比如h1下的small的大小就會是以其父元素h1的font-size的24px為基準的0.8倍。但是small的margin-left的em還是相對自己的font-size而言的。
ex
ex是指所用字體中小寫x的高度。因此,如果有兩個段落,其中文本的大小為24點,但是各段使用了不同的字體,那么各段相應的ex值可能不同。因為不同字體中x的高度可能不同。
px
這個就是像素了。在現代的各種顯示設備中,像素已經不是一個絕對的度量單位,對于像iPhone 6S plus,iMac 5K這種像素密度超高的設備來說,會把9個物理像素映射為一個px,普通的Macbook pro和iPhone則將4個物理像素映射為一個px。這樣來說,px確實是一個相對長度。相對各個設備來說的。

關鍵字

就是像none,normal這樣代表一些意義的值,其中有一個關鍵字比較重要,inherit。這個關鍵字可以顯式的指定一個特性繼承父元素的樣式。
這會讓該元素使用繼承的值而不是用戶代理的默認樣式。正常情況下,直接指定的樣式總會優先于繼承的樣式,但是通過使用inherit可以把情況反過來。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,805評論 1 92
  • CSS基礎 本文包括CSS基礎知識選擇器(重要!!!)繼承、特殊性、層疊、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,181評論 0 40
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表,主要用...
    寥寥十一閱讀 1,875評論 0 6
  • 1.塊級元素和行內元素 塊級(block-level)元素;行內(內聯、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,048評論 1 4
  • 請各位讀者添加一下作者的微信公眾號,以后有新的文章,將在微信公眾號直接推送給各位,非常感謝。 如果您覺得這篇文章還...
    MR_LIXP閱讀 2,870評論 1 9