css還有這種顏色寫法，學到了

相信您已經熟悉顏色的 RGB 和 HEX 表示，因為這是大多數文章/教程在編寫 CSS 顏色時使用的，但這些并不是在 CSS 中編寫顏色的最佳方法。HEX 和 RGB 很難理解，使顏色變淺/變深或將顏色從紅色轉換為橙色并不容易。這就是 HSL 的用武之地。HSL 是一種更容易閱讀的格式，它使更改顏色的亮度或色調等操作變得簡單。

什么是 HSL？

HSL 代表色相、飽和度和亮度。這類似于 RGB 如何通過將其紅色、綠色和藍色值組合在一起來表示顏色，但使用 HSL，這些值更直觀。

色調

顏色的色調由圍繞一個圓圈的度數表示。試想一個色輪，0 度代表紅色，180 度代表青色，360 度代表同樣的紅色。

飽和

飽和度由 0 到 100 之間的百分比表示，并確定顏色的灰色程度。如果顏色是 100% 飽和度，則根本沒有灰色，而飽和度為 0% 的顏色將是沒有顏色的灰色陰影。

亮度

亮度也用百分比表示，并確定顏色的白色或黑色。如果顏色是 50% 的亮度，那么這意味著沒有額外的白色或黑色添加到顏色中。隨著百分比增加到 50% 以上，它會在顏色中添加更多的白色，直到在 100% 亮度下達到完全白色。隨著百分比降低到 50% 以下，它會為顏色添加更多黑色，直到在 0% 亮度下達到完全黑色

如何使用 HSL？

現在我們了解了 HSL 是什么，我們可以談談如何使用它。它的工作原理與 RGB 一樣，您可以在 CSS 中調用該hsl函數來定義 HSL 顏色。

.class {
  /* Pure red #FF0000 */
  background-color: hsl(0, 100%, 50%);
}

傳遞給 hsl 的第一個值是色調，它是 0 到 360 之間的度數，第二個值是飽和度，它是 0% 到 100% 之間的百分比值，最后傳遞的最終值是亮度，它是一個百分比值在 0% 和 100% 之間。您還可以使用hsla來表示部分透明的顏色。這個函數接受第四個參數，它是一個介于 0 和 1 之間的值，其中 1 是完全不透明的，而 0 是完全透明的。

為什么這很重要？

像這樣寫顏色可能看起來有點奇怪，因為你很可能習慣于 HEX 或 RGB，但是一旦你習慣了它，它會讓寫 CSS 變得更加愉快。以下是幾個原因：

輕松更改亮度/飽和度

正如我在本文開頭提到的，您經常需要在 CSS 中更改顏色的亮度或飽和度，以執行諸如為按鈕引入懸停狀態之類的操作。使用 HEX 可能會很痛苦，因為沒有人知道暗 10% 的版本#FA652F是什么，但是暗 10% 的版本hsl(16, 95%, 58%)很容易計算。您只需將亮度值降低 10% 即可hsl(16, 95%, 48%)。

您甚至可以更進一步，使用calcCSS 中的自定義屬性為您自動執行此操作。

.btn {
  --background-hue: 200;
  background-color: hsl(
    var(--background-hue),
    100%,
    calc(50% + var(--lightness-offset))
  );
}
.btn:hover {
  --lightness-offset: -10%;
}
.btn:focus {
  --lightness-offset: -20%;
}
.btn-danger {
  --background-hue: 0;
}

使用這少量代碼，我們設置了一個基本的 btn 類，它總是使背景在懸停時變暗 10%，在焦點上變暗 20%。我們也這樣做了，以便我們可以更改其他類型按鈕的按鈕色調，我們甚至不需要修改這些新按鈕類型的懸停和焦點狀態，因為它們都是使用自定義屬性和calc.

輕松獲取相關顏色

如果您熟悉任何顏色理論，那么您就會知道理解互補色、原色/次色、相似色等很重要。使用 RGB 或 HEX 很難找出這些不同類型的顏色，但使用 HSL 很容易找到諸如互補色之類的東西。這是因為互補色只是色輪另一側的顏色，在 HSL 的情況下，這意味著它們的色調彼此相差 180 度。

這很重要，因為您可以使用這些知識在 CSS 中創建一個顏色主題，該主題使用數學來計算這些互補色，并允許您一次輕松地更改整個站點的顏色主題。下面是我建立的一個可以做到這一點的網站的例子。

輕松更改色調

最后，HSL 的最后一個重大勝利是它可以輕松更改顏色的色調。如果你想讓你的紅色更橙色一點，你可以通過讓你的色調更大一點來做到這一點，因為橙色在色輪上的紅色之后。這真的很有用，因為在設計和開發的早期階段，像這樣的小顏色變化非常普遍，并且能夠輕松地制作它們可以節省大量時間。

結論

HSL 是一種在 CSS 中表示顏色的不同方式，它不僅更易于閱讀，而且更易于在 CSS 中修改和使用。在我看來，它是 CSS 中最好的顏色格式。

文由公眾號 “把科學帶回家” 提供

給孩子最好的科學教育

本文轉載自公眾號“環球科學ScientificAmerican”（ID：huanqiukexue）

撰文怡若樂

編輯丁家琦

小學美術課告訴我們三原色是紅黃藍，初中物理課又告訴我們光的三原色是紅綠藍，為什么偏偏都是三種？這兩套三原色為什么又不一樣？它們之間有關系嗎？今天我們就來解答一下這個問題。

光學三原色：色光加色混合法

顏料三原色：顏料減色混合法

我們看到的“顏色”，到底是什么？

顏色就是不同波長的可見光投射到我們的視網膜里，被視網膜感知后在大腦里產生不同的反應。為了區分不同的色光，視網膜背后的感光細胞肯定不能只有一種，不然我們看到的世界就只有一種深淺不同的顏色了，就像黑白照片一樣。

實際上，我們人眼用于區分色光的細胞（即視錐細胞）有三種，每種只對特定波長范圍的光敏感：

第一種對長波長可見光敏感，叫做L（long）視錐細胞；

第二種對中波長可見光敏感，叫做M（medium）視錐細胞；

第三種對短波長可見光敏感，叫做S（short）視錐細胞。

三種視錐細胞對光譜中不同波長光的響應見下圖，幾乎能覆蓋可見光領域。

這樣，眼睛在接收任一波長的可見光時，都能不同程度地激活一種到兩種，甚至三種視錐細胞，它們產生的信號疊加起來，形成了我們感受到的顏色。

但這樣一來，聰明的讀者可能就注意到了一個問題：波長為580nm的黃光會同時激發代表綠色的M視錐細胞和代表紅色的L視錐細胞，那它看起來和綠光與紅光兩種單色光的某種疊加有何區別呢？

答案是，沒區別——在人眼看來。這就是為什么在人眼看來綠光+紅光=黃光，藍光+綠光=淺藍光，三原色與色光疊加原理都是我們人眼的這三種視錐細胞帶來的。

早在上世紀初，亥姆霍茲等人在還不知道視錐細胞存在的情況下就提出了視覺的三原色學說，設想在視網膜中存在著分別對紅、綠、藍的光線特別敏感的三種細胞或相應的三種感光色素，當光線作用于視網膜時，可以不同程度地刺激相應的細胞或感光色素，在中樞引起介于此二原色之間的色覺。

這種假說得到實驗證實之后，反過來又被科學家用來開發電子顯示屏——我們從電視、電腦、手機屏幕上看到的彩色圖像，就是紅綠藍三原色色光經不同程度疊加產生的，所以一旦你湊近了仔細看彩色電子屏幕，就能看到紅綠藍顏色的顆粒（在老式的電視機上更容易看到，如果對著蘋果的Retina屏找，你可能就要瞎了……）。

顯示器采用色光加色混合法三原色：紅綠藍

那為什么顏料的三原色與光不同呢？

這是因為顏料的疊加原理與色光的疊加原理不同。

顏料之所以呈現出特定的顏色，不是因為它本身發出了該顏色的光，而是它吸收了其他色光，而顏料的疊加，也就是吸收的疊加。

舉個栗子：黃色顏料反射了紅光和綠光（紅光與綠光的疊加在我們眼里就是黃光），而我們日常所用的藍色顏料反射藍光和綠光。把它們配在一起的時候，黃色顏料吸收了藍色顏料所反射的藍光，而藍色顏料吸收了黃色顏料反射的紅光，所以就只剩下了綠色光。一旦再疊加其他多種顏料，把所有的色光吸收殆盡，在我們眼前的就是一團漆黑了。

那會不會有少數人有兩種或者四種視錐細胞？其他動物呢？

大多數人類擁有三種視錐細胞，但并不是每個人都能感受到三原色下的世界，有些患者其中一種或兩種視錐細胞會出現缺陷，這就會導致色覺缺陷，稱為色盲。色盲（color blindness）最先由英國化學家約翰·道爾頓詳細描述，因而也叫道爾頓癥（daltonism）。

色盲主要分紅綠色盲、藍黃色盲和全色盲。紅綠色盲是最常見的色盲，患者無法分辨紅色和綠色（看起來接近灰色或就是灰色），藍黃色盲則無法分辨藍色和黃色，全色盲最為稀少，患者只能看到像黑白照片一樣不同灰度的世界。

色盲眼中的世界是什么樣？下面這張圖可能會給我們一個直觀的印象。

@Johannes Ahlmann/Wiki Commons

左上是正常色覺的人看到的的彩色風車，右上和右下是紅綠色盲患者看到的景象（嚴格來說紅色盲和綠色盲并不一樣，但癥狀是類似的），左下是藍黃色盲看到的景象。

可以看到，紅綠色盲的眼里沒有紅色和綠色，他們看到的“紅色”和“綠色”只是偏藍或偏黃的灰色。

不過，“正常視力”與“色盲”之間并不存在一個一刀切的分界線，辨色能力是個連續譜。

很多色盲患者都不是缺失了一種或多種視錐細胞，而是兩種視錐細胞的敏感范圍過于接近，從而減小了對三種顏色辨別的范圍。這種情況比三種單色色盲更常見，并且會使顏色視覺具有更多變化的結果。

此外，界定一個人是否色盲也應取決于他/她的環境和職業需求：視覺設計師和珠寶鑒定師需要對顏色有敏銳的鑒定能力，但對記者而言要求就沒有那么高了。

那怎么知道你是不是色盲呢？最常見的測試方法莫過于石原氏色盲測驗了。也許我們體檢的時候都有測過這一項，醫生給你拿出一張這樣色彩斑斕的圖片，色覺正常的人和色盲患者看到的圖案會不同。如下圖，色覺正常的人看到的數字是74，而色盲患者看到的就是21。

有超過三種顏色視覺是怎樣的體驗？

既然擁有三種視錐細胞的“正常人”能比色盲患者看到更多的顏色，那會不會存在擁有四種甚至以上色覺的人？澳大利亞藝術家孔切塔·安蒂科（Concetta Antico）就是這樣一位“四色視者”。

@ConcettaAntico.com

經研究人員測定，她的第四種視錐細胞的敏感波段大約在紅色與橙色之間，她看到的顏色據說能比普通人多百倍。她的藝術創作，正是為了將自己看到的斑斕的世界傳達給我們普通的三色視者。

安蒂科筆下的樹與（三色視覺者眼中）真實場景對比。
@Concetta Antico

那么其他動物呢？

對于大多數動物，豐富的色覺都非常有利于適應多變環境。現存的脊椎動物中，爬行動物、鳥類和真骨下綱的魚類都具有四種視錐細胞，它們能看到波長更短的紫外線。

通過研究這些動物調控視蛋白合成的基因，我們得知這三群動物的共同祖先，也就是3.6億年前的硬骨魚類就具有了四色視覺。

這種金光菊能反射出紫外光，因此，鳥類能看到花心以外一個更大的黑色圓圈。圖片由美國羅切斯特理工學院教授安德魯·大衛德哈齊（Andrew Davidhazy）用檢測紫外線的照相機拍攝。
@《環球科學》

也許用動物的眼光來看待這個世界，就可以理解它們行為的關鍵。一些動物可以看見更加五彩斑斕的世界，而另一些動物眼里的世界就相對平淡很多。

這些都是為了相互溝通，吸引異性和躲避捕食。研究那些我們所能看到的和看不到的顏色，不管對人類的自我認知和發展，還是對動物行為的了解以及規律的總結，都具有重要意義。

不過癮，請戳

把科學帶回家

ID：steamforkids

給孩子最好的科學教育

轉載請聯系 kids@huanqiukexue.com

長按二維碼關注我們

參考鏈接：

en.wikipedia.org/wiki/Color

en.wikipedia.org/wiki/Cone_cell

en.wikipedia.org/wiki/Color_blindness

www.bbc.com/future/story/20140905-the-women-with-super-human-vision

www.bio1000.com/qw/tupian/417042.html

www.handprint.com/HP/WCL/color1.html#receptors

reamweaver的CSS面板分類

type(類型)

background(背景)

block(區塊)

box(方框) 或盒子意思

border(邊框)

list(列表)

positioning(定位)

extensions(擴展)

共八個部分

1. type(類型)

type面板主要是對文字的字體，大小，顏色，效果等基本樣式進行設置。

注意：屬性名帶*號的是指樣式效果不能在編輯文檔時顯示，要用瀏覽器打開才能看到效果。

(1)font-family：設置字體系列。什么叫字體系列呢?是指對文字設定幾個字體，當遇到第一個字體不能顯示的文字時會自動用系列中的第二個

字體或后面的字體顯示。

注意:一般英文字體我們用"Verdana, Arial, Helvetica, sans-serif"這個系列比較好看。如果不用這些字體系列，你就需要自己編輯字體系列，

也可以直接手動在下拉框里寫字體名，字體之間用逗號隔開。中文網頁默認字體是宋體, 一般就空著不要選取任何字體。

默認值： not specified(取決于瀏覽器,系統默認的字體, 如: 微軟雅黑)

注意：

1.如果有漢字, 那么我們要加引號

2.如果有多個英文字母組成的單詞, 我們也要加引號; "microsoft yahei" 中間用空格隔開

3.font-family:"黑體","宋體","華文隸書"; 首先找黑體, 沒有黑體找宋體...

為了避免在CSS中使用 font 或 font-family 設置中文字體時亂碼, 可以使用 Unicode 編碼來表示字體。

/* 示例:使用Unicode字體編碼設置字體為"微軟雅黑" */
font-family: "\5FAE\8F6F\96C5\9ED1";

(2)font-size：定義文字的大小。你可以通過選取數字和度量單位來選擇具體的字體大小，或者你也可以選擇一個相對的字體大小。

最好使用pixels作為單位，這樣不會在瀏覽器中文本變形。一般字體用比較標準的12px或14px, 默認值為16px。

注意：CSS中長度的單位分絕對長度單位和相對長度單位:

絕對長度單位有：

pt：磅(point)

mm、cn、in、pc：(毫米、厘米、英寸、活字)根據顯示的實際尺寸來確定長度。

此類單位不隨顯示器的分辨率改變而改變。

相對長度單位有：

px：(像素)根據顯示器的分辨率來確定長度。

em：當前文本的尺寸。例如：{font-size:2em}是指文字大小為原來的2倍。

比如自身font-size: 30px; 那么此時1em=30px;

ex：當前字母"x"的高度，一般為字體尺寸的一半。

%：是以當前文本的百分比定義尺寸。例如：{ font-size:300%}是指文字大小為原來的3倍。

small、large：表示比當前小一個級別或大一個級別的尺寸。

默認值：medium(標準大小)

(3)font-style：定義字體樣式為normal、italic、oblique。默認設置為normal。

注意： italic 斜體 oblique 歪斜體 italic和oblique實際效果是一樣的。

默認值:normal

(4)line-height：設置文本所在行的行高。默認為normal。可以是行內元素、行內塊元素, 通常與height設置的高度值相同, 可以做到垂直居中的作用。

你也可以自己鍵入一個精確的數值并選取一個計量單位。

比較直觀的寫法用百分比, 例如140%是指行高等于文字大小的1.4倍。

最常用的方法: line-height:1.5em; /*行間距,相對數值,1.5倍行距,*/ 可有效的避免文字發生重疊

默認值： normal

(5)text-decoration：在文本中添加underline(下劃線)、overline(上劃線)、line-through(中劃線)、blink(閃爍效果)。

這些效果可以同時存在，將效果前的復選框選定即可。

注意：鏈接的默認設置是underline，我們可以通過選none去除下劃線。blink(閃爍效果)只在mozilla瀏覽器里可以看到, IE、opera不支持

默認值： none

(6)font-weight：給字體指定粗體字的磅值。

normal 默認值。定義標準的字符。

bold 定義粗體字符。

bolder 定義更粗的字符。

lighter 定義更細的字符。

100

200

300

400

500

600

700

800

900

inherit 規定應該從父元素繼承字體的粗細。

定義由粗到細的字符。400 等同于 normal, 而 700 等同于 bold。

默認值: normal

(7)font-variant：允許你選取字體的變種, 選small-caps(小型大寫字母)時, 此樣式區域內所有字母大寫。

normal表示正常的字體, 為默認值；

默認值: normal

(8)text-transform：將選區中每個單詞的第一個字母轉為大寫, 或者令單詞全部大寫或全部小寫。

參數：capitalize(單詞首字母大寫)、uppercase(轉換成大寫)、lowercase(轉換成小寫)、none(不轉換)。

默認值：none

(9)color：定義文字顏色。包括對表單輸入的文字顏色。

CSS中顏色的值有三種表示方法：

#RRGGBB格式，是由紅綠藍三種顏色的值組合，每種顏色的值為"00 – FF"的兩位十六進制正整數。

例如：#FF0000表示紅色，#FFFF00表示黃色。

rgb(R,G,B)格式, RGB為三色的值, 取0~255, 例如：rgb(255,0,0)表示紅色, rgb(255,255,0)表示黃色。

用顏色名稱。CSS可以使用已經定義好的顏色名稱。例如：red表示紅色, yellow表示黃色。

顏色值的縮寫:

p{color:#000000} 可以縮寫為：p{color:#000}

p{color:#336699} 可以縮寫為：p{color:#369}

默認值： not specified

color: transparent; 透明色

rgba() 解釋: rgba(紅0-255, 綠0-255, 藍0-255, 透明度0-1)

注意: 如果文字的顏色通過單獨的類選擇去設置沒有改變顏色, 則應該通過組合選擇器(.header .top .topR .blue)去設置, 改變它的優先級。

2. background(背景)

background面板主要是對元素的背景進行設置，包括背景顏色、背景圖象、背景圖象的控制。

一般是對body(頁面)、table(表格)、div(區域)的設置。

(1)background-color：設置元素的背景色。包括對input表單輸入框的背景顏色;

默認值: transparent(背景顏色為透明)

rgba() 解釋: rgba(紅0-255, 綠0-255, 藍0-255, 透明度0-1) 一般用于背景色

(2)background-image：設置元素的背景圖像。

默認值:none

CSS3支持多重背景圖,只要加上一個url指定圖片路徑,并用逗號(,)將兩組url分隔就可以了

background-image:url(a.jpg),url(b.jpg);

base64使用

background-image: url("data:image/png;base64,iVBORw0KGgo=...");

(3)background-repeat：確定背景圖像是否以及如何重復。

repeat 默認值。背景圖像將在垂直方向和水平方向重復。

repeat-x 背景圖像將在水平方向重復。

repeat-y 背景圖像將在垂直方向重復。

no-repeat 背景圖像將僅顯示一次。

inherit 規定應該從父元素繼承background-repeat屬性的設置。

注意：如果定義的元素的body，可以控制頁面背景是否重復。

默認值: repeat

(4)background-attachment：固定背景圖像或者跟隨內容滾動。

參數fixed表示固定背景(不隨屏幕滾動而滾動，決定背景圖像是否要固定在原來的位置), scroll表示跟隨內容滾動的背景。

注意：如果定義的元素的body, 可以使頁面背景固定。

默認值: scroll

(5)background-position(X)：指定背景圖像的水平位置。

可以指定為left(左邊), center(居中)，right(右邊)；

也可以指定數值，如20px是指背景距離左邊20象素。

background-position(Y)：指定背景圖像的垂直位置。

可以指定為top(頂部), center(居中), bottom(底部)；也可以指定數值。

background-position屬性值:

left top

center top

right top

left center

center center

right center

left bottom

center bottom

right bottom

如果您僅規定了一個關鍵詞，那么第二個值將是"center"。

注意:采用英文單詞的水平位置和垂直位置的屬性值可以調換

x% y% 第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規定了一個值，另一個值將是 50%。

xpos ypos 第一個值是水平位置，第二個值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。

如果您僅規定了一個值，另一個值將是50%。

您可以混合使用 % 和 position 值。

默認值：0% 0%

在線咨詢

上一篇：兩種常用的CSS樣式文件引用方法
下一篇：哇哦！原來大數據分析是這樣入門的

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商