顏色值
在網(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)乱陡。