CSS 單位和值

顏色值

在網(wǎng)頁中的顏色設置是非常重要,有字體顏色(color)百匆、背景顏色(background-color)呜投、邊框顏色(border)等存璃,設置顏色的方法也有很多種:

1纵东、英文命令顏色

前面幾個小節(jié)中經(jīng)常用到的就是這種設置方法:

p{color:red;}

2啥寇、RGB顏色

這個與 photoshop 中的 RGB 顏色是一致的,由 R(red)衰絮、G(green)磷醋、B(blue) 三種顏色的比例來配色。

p{color:rgb(133,45,200);}

每一項的值可以是 0~255 之間的整數(shù)淌友,也可以是 0%~100% 的百分數(shù)骇陈。如:

p{color:rgb(20%,33%,25%);}

3缩歪、十六進制顏色

這種顏色設置方法是現(xiàn)在比較普遍使用的方法谍憔,其原理其實也是 RGB 設置,但是其每一項的值由 0-255 變成了十六進制 00-ff逛球。

p{color:#00ffff;}

配色表:

長度值

長度單位總結一下颤绕,目前比較常用到px(像素)祟身、em% 百分比氯葬,要注意其實這三種單位都是相對單位婉陷。

1、像素

像素為什么是相對單位呢闯睹?因為像素指的是顯示器上的小點(CSS規(guī)范中假設“90像素=1英寸”)楼吃。實際情況是瀏覽器會使用顯示器的實際像素值有關,在目前大多數(shù)的設計者都傾向于使用像素(px)作為單位孩锡。

2、em

就是本元素給定字體的 font-size 值忧吟,如果元素的 font-size 為 14px 斩披,那么 1em = 14px垦沉;如果font-size 為 18px,那么 1em = 18px寡壮。如下代碼:

p{font-size:12px;text-indent:2em;}
上面代碼就是可以實現(xiàn)段落首行縮進 24px(也就是兩個字體大小的距離)讹弯。

下面注意一個特殊情況:

但當給 font-size 設置單位為 em 時,此時計算的標準以 p 的父元素的 font-size 為基礎组民。如下代碼:

html:

<p>以這個<span>例子</span>為例。</p>
css:

p{font-size:14px}
span{font-size:0.8em;}

結果 span 中的字體“例子”字體大小就為 11.2px(14 * 0.8 = 11.2px)莫其。

3耸三、百分比

p{font-size:12px;line-height:130%}
設置行高(行間距)為字體的130%(12 * 1.3 = 15.6px)乱陡。

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市仪壮,隨后出現(xiàn)的幾起案子憨颠,更是在濱河造成了極大的恐慌,老刑警劉巖睛驳,帶你破解...
    沈念sama閱讀 207,248評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件烙心,死亡現(xiàn)場離奇詭異膜廊,居然都是意外死亡,警方通過查閱死者的電腦和手機淫茵,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評論 2 381
  • 文/潘曉璐 我一進店門爪瓜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人铆铆,你說我怎么就攤上這事〉び鳎” “怎么了薄货?”我有些...
    開封第一講書人閱讀 153,443評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長碍论。 經(jīng)常有香客問我谅猾,道長,這世上最難降的妖魔是什么鳍悠? 我笑而不...
    開封第一講書人閱讀 55,475評論 1 279
  • 正文 為了忘掉前任税娜,我火速辦了婚禮,結果婚禮上藏研,老公的妹妹穿的比我還像新娘敬矩。我一直安慰自己,他們只是感情好蠢挡,可當我...
    茶點故事閱讀 64,458評論 5 374
  • 文/花漫 我一把揭開白布弧岳。 她就那樣靜靜地躺著,像睡著了一般业踏。 火紅的嫁衣襯著肌膚如雪禽炬。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,185評論 1 284
  • 那天堡称,我揣著相機與錄音瞎抛,去河邊找鬼艺演。 笑死却紧,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的胎撤。 我是一名探鬼主播晓殊,決...
    沈念sama閱讀 38,451評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼伤提!你這毒婦竟也來了巫俺?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,112評論 0 261
  • 序言:老撾萬榮一對情侶失蹤肿男,失蹤者是張志新(化名)和其女友劉穎介汹,沒想到半個月后却嗡,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,609評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡嘹承,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,083評論 2 325
  • 正文 我和宋清朗相戀三年窗价,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片叹卷。...
    茶點故事閱讀 38,163評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡撼港,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出骤竹,到底是詐尸還是另有隱情帝牡,我是刑警寧澤,帶...
    沈念sama閱讀 33,803評論 4 323
  • 正文 年R本政府宣布蒙揣,位于F島的核電站靶溜,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏懒震。R本人自食惡果不足惜墨技,卻給世界環(huán)境...
    茶點故事閱讀 39,357評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望挎狸。 院中可真熱鬧扣汪,春花似錦、人聲如沸锨匆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽恐锣。三九已至茅主,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間土榴,已是汗流浹背诀姚。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留玷禽,地道東北人赫段。 一個月前我還...
    沈念sama閱讀 45,636評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像矢赁,于是被迫代替她去往敵國和親糯笙。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,925評論 2 344

推薦閱讀更多精彩內(nèi)容

  • CSS基礎 本文包括CSS基礎知識選擇器(重要A靡8椤!)繼承、特殊性够庙、層疊恭应、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,061評論 0 40
  • 學習CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,030評論 0 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,728評論 1 92
  • 請各位讀者添加一下作者的微信公眾號耘眨,以后有新的文章暮屡,將在微信公眾號直接推送給各位,非常感謝毅桃。 如果您覺得這篇文章還...
    MR_LIXP閱讀 2,800評論 1 9
  • 今天的晨讀材料褒纲,介紹了《學習之道》的三個知識點,分別是:張弛有度钥飞、老嫗能解和穿插練習莺掠。 一、張弛有度 我們都知道制...
    程影閱讀 275評論 0 1