CSS顏色與度量單位

2021-09-18 02:31:21 字數 1222 閱讀 3788

顏色表方案顏色的表現形式主要有三種方式:

顏色名稱

p解釋:這是將乙個段落內的文字設定為紅色,採用的是英文顏色名稱

解釋:

rgb(r,g,b)用rgb模型表示顏色 ,如rgb(0,128,128)

rgba(r,g,b,a)同上,a表示透明度0~1之間,如rgba(0,128,128,0.5)

hsl(h,s,l)用hsl模型(色相、飽和度和透明度)來表示顏色,如hsl(120,100%,30%)

hsla(h,s,l,a)同上,a表示透明度0~1之間,如hsla(120,100%,30%,0.5)

我們可以使用photoshop等平面設計軟體的調色盤獲取相應的值。

css中長度單位又分為絕對長度和相對長度。

in英吋

cm厘公尺

mm公釐

pt

pcpica

em與元素字型大小掛鉤

p 解釋:em是相對單位,與字型大小大小掛鉤,會根據字型大小改變自己的大小,靈活性很高

ex與元素字型的「x高度」掛鉤

rem與根元素的字型大小掛鉤

px畫素,與解析度掛鉤

解釋:雖然px也是相對單位,但由於和解析度掛鉤,導致他其實就變成乙個絕對單位了,自然靈活性沒有em高,但是使用難度較低,且大量的開發者習慣性使用它,字型無論多大,就是乙個固定值

%相對另一值的百分比

這是乙個段落

body

p 解釋:長度比較好理解,就是掛鉤它所在區塊的寬度(即body)。而font-size則是繼承到的原始大小的百分比(如果父元素body下沒設定font-size,則是原始大小的百分比,如果設定了,如上50px,則font-size為100px)。通過父元素的資料決定自己資料

CSS中的度量單位

px 相對長度單位。畫素 pixel 畫素是相對於顯示器螢幕解析度而言的。em相對長度單位。相對於當前物件內文字的字型尺寸。如當前行文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。ex相對長度單位。相對於字元 x 的高度。此高度通常為字型尺寸的一半。如當前行文字的字型尺寸未被人為設定,則相...

CSS度量單位rem em vw vh詳解

單位 說明相容性 em相對長度單位,相對於當前物件內文字的字型尺寸,根據父元素的大小變化而變化 良好rem 相對長度單位,相對於跟元素 即 html 元素 font size 的倍數,不會被它的父元素影響 ie9 火狐 3.6 safari5.0 vw相對於視口的寬度,視口被均分為 100 單位的v...

常用的CSS度量單位

em 相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。ex 相對長度單位。相對於字元 x 的高度。此高度通常為字型尺寸的一半。如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。px 畫素 pixel 相對長度單位...