页面中color颜色值_HTML+CSS 基础知识-入门概括-颜色与单位
生活随笔
收集整理的這篇文章主要介紹了
页面中color颜色值_HTML+CSS 基础知识-入门概括-颜色与单位
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
顏色與單位
一、顏色
1、概述
色調(diào)：很接近通俗意義上的顏色。 是指圖像的相對(duì)明暗程度，在彩色圖像上表現(xiàn)為顏色 ? 飽和度：是指顏色中灰色的含量。 飽和度最大時(shí)，顏色中灰色的含量為零；飽和度最小時(shí)，顏色基本就是灰色。也就是說(shuō)，飽和度與灰色的占比是成反比的。（可以理解為，純度越高,表現(xiàn)越鮮明,純度較低,表現(xiàn)則較黯淡） ? 亮度：是指顏色中黑色的含量。 亮度最大時(shí)，顏色中黑色的含量為零。亮度最小時(shí)，顏色會(huì)變得非常暗。也就是說(shuō)，亮度與黑色的占比是成反比的。 ? 對(duì)比度：前景色與背景色之間的差異。 差異越大，對(duì)比度越大；否則反之。 ? Web 安全色：不需要擔(dān)心顏色在不同硬件環(huán)境、操作系統(tǒng)和瀏覽器之間的差異Web 安全色目前基本具有 216 種顏色，其中色彩為 210 種，非色彩為 6 種。2、前景色與背景色
簡(jiǎn)單來(lái)說(shuō)，CSS中color屬性表示前景色，background-color 屬性表示背景色。 ? 例： before {color: red; } ? last{background-color:lightcoral; }3、顏色值的類型
在上述無(wú)論是 color 屬性還是 background-color 屬性都需要應(yīng)用到顏色值，這個(gè)顏色是一種標(biāo)準(zhǔn) RGB 色彩空間（sRGB color space）的顏色。 ? 顏色值可以通過(guò)如下 3 種類型進(jìn)行定義：色彩關(guān)鍵字、RGB 色彩模式、HSL 色彩模式 ? 注意：雖然 CSS 顏色值是被精確定義的，但在不同的輸出設(shè)備上仍然有可能顯示不一。3.1 色彩關(guān)鍵字
色彩關(guān)鍵字是一個(gè)不區(qū)分大小寫的標(biāo)識(shí)符，其表示一個(gè)具體的顏色，例如 red 表示紅色、blue 表示藍(lán)色等。 ? 注意：除了 16 個(gè) HTML 基本顏色之外，其他任何顏色都需要通過(guò)特定的計(jì)算程序轉(zhuǎn)換（通過(guò)進(jìn)制轉(zhuǎn)換），最終導(dǎo)致不同瀏覽器呈現(xiàn)出的效果可能會(huì)不一致。 transparent 關(guān)鍵字表示一個(gè)完全透明的顏色，并且 transparent 是 background-color 屬性的默認(rèn)值。3.2 RGB 色彩模式
RGB是一個(gè)簡(jiǎn)稱，全稱為 Red-Green-Blue，即紅-綠-藍(lán)。RGB 色彩模式是工業(yè)界的一種顏色標(biāo)準(zhǔn)，是通過(guò)對(duì)紅、綠、藍(lán)三個(gè)顏色通道的變化以及它們相互之間的疊加來(lái)得到各式各樣的顏色的。 ? 在 CSS 中使用 RGB 色彩模式有如下 2 種方式： ? 十六進(jìn)制符號(hào) #RRGGBB 和 #RGB ? #RRGGBB：是 # 符號(hào)后面編寫 6 個(gè)十六進(jìn)制字符（0-9，A-F） #RGB：是 # 符號(hào)后面編寫 3 個(gè)十六進(jìn)制字符（0-9，A_F） ? 說(shuō)明：當(dāng) #RRGGBB 格式中的兩個(gè) R 或 G 或 B 值相同時(shí)，就可以改寫為 #RGB 格式。例如 #ff0033 可以改寫成 #f03。 ? 函數(shù)符 rgb(R, G, B) ? 這里的 R、G、B 的值可以使用 0 ~ 255 之間的值 這里的 R、G、B 的值也可以使用 0% ~ 100% 之間的值 說(shuō)明： rgb(R,G,B) 的 255 和 100% 是一致的，相當(dāng)于十六進(jìn)制符號(hào)中的 FF。 ? 如下示例代碼展示了 RGB 模式的幾種用法： ? #p1 {background-color: #FFCC33; } #p2 {background-color: #FC3; } #p3 {background-color: rgb(255, 204, 51); }3.3 HSL 色彩模式
HSL是一個(gè)簡(jiǎn)稱，全稱為 Hue-Saturation-Lightness，即 色調(diào)-飽和度-亮度。HSL 色彩模式是一種將 RGB 色彩模型中的點(diǎn)在圓柱坐標(biāo)系中的表示法。 ? 在 CSS 中使用 HSL 色彩模式是通過(guò) hsl(H, S, L) 函數(shù)實(shí)現(xiàn)的，具體含義如下： ? H 表示色調(diào)，其值范圍為 0 ~ 360 之間的一個(gè)角度。 S 表示飽和度，其值范圍為 0% ~ 100% 之間的百分值。 L 表示亮度，其值使用百分值表示。0%表示黑色，50%表示標(biāo)準(zhǔn)色，100%表示白色。 ? 如下示例代碼展示了 HSL 模式的幾種用法： ? p {background-color: hsl(50, 33%, 25%); }4、透明度
在 CSS3 版本中新增了 opacity 屬性用來(lái)設(shè)置 HTML 元素的透明度，該屬性的值范圍介于 0 ~ 1 之間。具體情況如下所示： ? 如果值為 0 或 0.0 則表示完全透明 如果值為 0.5 則表示半透明 如果值為 1 或 1.0 則表示不透明 ? 如下示例代碼所示展示了 opacity 屬性的用法： ?div {background-color: lightcoral;} ?.light {opacity: 0.2;} ?.medium {opacity: 0.5;} ?.heavy {opacity: 0.9;}</style> </head> ? <body><div class="light">這是一個(gè)測(cè)試內(nèi)容.</div><div class="medium">這又是一個(gè)測(cè)試內(nèi)容.</div><div class="heavy">這還是一個(gè)測(cè)試內(nèi)容.</div> </body> ? CSS 中的透明度除了提供了 opacity 屬性用法之外，還可以結(jié)合 RGB 模式和 HSL 模式共同使用。具體如下所示： ? RGB 模式增加了 rgba(R,G,B,A) 函數(shù)，其中 A 為 alpha 表示透明度。 HSL 模式增加了 hsla(H,S,L,A) 函數(shù)，其中 A 為 alpha 表示透明度。二、單位
1、css 的值
CSS 中的值是一種定義允許子值集合的方法。例如我們現(xiàn)在可以使用色彩關(guān)鍵字、RGB 色彩模式或 HSL 色彩模式不同類型來(lái)描述顏色值。 ? 在 CSS 中除了顏色值需要不同類型描述之外，比較常見的還有長(zhǎng)度值也需要不同類型描述，例如 10px 或 50% 等。2、CSS 的單位
1、絕對(duì)長(zhǎng)度單位： 絕對(duì)長(zhǎng)度單位所描述的長(zhǎng)度一般與任何其他因素是無(wú)關(guān)的。可以簡(jiǎn)單地理解為無(wú)論在什么情況下，這種的長(zhǎng)度是固定、不變化的。在 HTML 頁(yè)面中比較常用的絕對(duì)長(zhǎng)度單位是像素（px） ? cm 厘米 1cm = 96px/2.54 mm 毫米 1mm = 1/10th of 1cm Q 四分之一毫米 1Q = 1/40th of 1cm in 英寸 1in = 2.54cm = 96px pc 十二點(diǎn)活字 1pc = 1/16th of 1in pt 點(diǎn) 1pt = 1/72th of 1in px 像素 1px = 1/96th of 1in ? ? 2、相對(duì)長(zhǎng)度單位： 相對(duì)長(zhǎng)度單位所描述的長(zhǎng)度一般會(huì)具有一個(gè)明確的參考物，例如父級(jí)元素、根元素或視口大小等。使用相對(duì)長(zhǎng)度單位更適用于現(xiàn)在越發(fā)復(fù)雜的終端設(shè)備的屏幕輸出。（自適應(yīng)） ? em 父元素的字體大小 ex 字符“x”的高度 ch 數(shù)字“0”的寬度 rem 根元素的字體大小 lh 元素的line-height vw 視窗寬度的1% vh 視窗高度的1% vmin 視窗較小尺寸的1% vmax 視圖大尺寸的1%3、像素值
像素的英文為 Pixel，簡(jiǎn)寫為 px。像素是指在由一個(gè)數(shù)字序列表示的圖像中的一個(gè)最小單位。 ? 目前幾乎所有的數(shù)碼設(shè)備都具有分辨率的概念，這里的分辨率更多是指圖像分辨率。該圖像分辨率指的是圖像中存儲(chǔ)的信息量，畢竟典型的是以每英寸的像素?cái)?shù)（PPI，pixel per inch）來(lái)衡量。 ? 在屏幕尺寸固定不變的情況下，分辨率的值越大，每英寸的像素?cái)?shù)（PPI）越大，單個(gè)像素所占的大小就越小。而一般屏幕顯示的字體都是通過(guò)像素來(lái)設(shè)置的，例如 18px。4、百分比
總是將某個(gè)值作為參考，設(shè)置為這個(gè)參考值的百分比5、em 與 rem
em 與 rem 都是相對(duì)單位，目前更多應(yīng)用于移動(dòng)端設(shè)備，例如手機(jī)、平板電腦的顯示。具體的含義如下所示： ? em：是相對(duì)于當(dāng)前 HTML 元素的父級(jí)元素來(lái)進(jìn)行設(shè)置。（理解為相對(duì)） rem：是相對(duì)于當(dāng)前 HTML 根元素（<html>）來(lái)進(jìn)行設(shè)置。（理解為絕對(duì)） ? 上述 2 種單位都具有如下 3 種情況： ? 小于 1 時(shí)：表示相對(duì)于父級(jí)元素或根元素縮小。例如 0.5em 表示是父級(jí)元素的 0.5 倍，0.5rem 表示是根元素的 0.5 倍。 等于 1 時(shí)：表示與父級(jí)元素或根元素的大小保持一致。 大于 1 時(shí)：表示相對(duì)于父級(jí)元素或根元素放大。例如 1.5em 表示是父級(jí)元素的 1.5 倍，1.5rem 表示是根元素的 1.5 倍。 ? 例： <!DOCTYPE html> <html lang="en"> ? <head><meta charset="UTF-8"><title>em與rem</title><style>html {font-size: 16px;} ?.ems li {font-size: 1.3em;} ?.rems li {font-size: 1.3rem;}</style> </head> ? <body><ul class="ems"><li>One</li><li>Two</li><li>Three<ul><li>Three A</li><li>Three B<ul><li>Three B 2</li></ul></li></ul></li></ul> ?<ul class="rems"><li>One</li><li>Two</li><li>Three<ul><li>Three A</li><li>Three B<ul><li>Three B 2</li></ul></li></ul></li></ul> </body> ? </html>總結(jié)
以上是生活随笔為你收集整理的页面中color颜色值_HTML+CSS 基础知识-入门概括-颜色与单位的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： app.vue只执行一次吗_面包可以只发
- 下一篇： 监听对象中某一项的值_Vue中watch