整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
頭條創(chuàng)作挑戰(zhàn)賽#
顏色對(duì)于 css 來說是非常重要的，網(wǎng)站之所以會(huì)呈現(xiàn)出五彩斑斕的樣式，就是這些顏色樣式起的作用。在 css 中，對(duì)于顏色樣式有很多種表達(dá)方式，今天我們就來盤點(diǎn)下 css 中顏色的格式。
在 css 中，默認(rèn)定義了很多名字顏色，比較常見的比如 yellow，blue，red，pink 等，實(shí)際上，css 中一共定義了 140 個(gè)顏色名字，這些名字你都可以直接拿來使用。雖然 140 種看起來很多，但是實(shí)際上它比 8bit 的顏色還要少，因此，平時(shí)我們很少使用它。
這是一種顏色格式，從名字我們就知道它是 red，green，blue 三種顏色的簡(jiǎn)寫，我們都知道三原色原理，也就是通過三種基本顏色，我們就可以組合出其它的顏色出來，因此，rgb 就可以表示出我們可以看到的各種顏色。
在 css 中，red，green，blue 被稱作三通道，每個(gè)通道的值是從 0-255，通過混合這些通道顏色，我們就可以創(chuàng)造出 1600 多萬種顏色。需要注意的是 rgb(255,255,255,0.5) 允許我們有第四個(gè)參數(shù)，它的值從 0-1，用來表示透明度。
.translucent-box {
background: rgb(255 0 0 / 0.5);
}
通過十六進(jìn)制數(shù)字來表示顏色代碼，6 位數(shù)字被分成了三組，每?jī)晌灰唤M，一位是 16，兩位就是 16*16=256，所以它其實(shí)和 RGB 基本是相同的，只不過它是用 16 進(jìn)制進(jìn)行表示。
它的三組也是代表著 red，green，blue，和 RGB 一樣的是，它也可以指定透明度，也就是說我們可以使用 8 位十六進(jìn)制來表示顏色。
.translucent-box {
background: #ffff0080;
}
和 RGB 不同的是，HSL 是通過指定色調(diào)，飽和度，亮度來表示顏色的。
在 HSL 中，我們的色調(diào)是在 0deg-360deg 之間，轉(zhuǎn)一圈的大致顏色范圍就是紅橙黃綠青藍(lán)紫，飽和度是在 0-100%之間，亮度是在 0%-100%之間。
HSL 是可以和 RGB 進(jìn)行轉(zhuǎn)換的，其中色調(diào)的轉(zhuǎn)換公式比較復(fù)雜。
.translucent-box {
background-color: hsl(0deg 100% 2%);
}
P3 是一個(gè)在繼承 sRGB 色彩空間范圍之外，又提供了更亮更充滿活力的色彩范圍，也就是說 P3 表示的色彩范圍要更大。
因此，使用 P3 的時(shí)候，需要使用特殊的屬性值 color 形式來表示，但是對(duì)于 color 這個(gè)屬性，目前只有 safari 支持。
.translucent-box {
background: color(display-p3 1 0 0);
}
因?yàn)?HSL 對(duì)于不同顏色在表示亮度的時(shí)候給人的感覺是不同的，因此，人們發(fā)明了 LCH 用來更接近人眼感知的色彩表示方式。
LCH 代表 “亮度色相”。“色度”或多或少是“飽和度”的同義詞。它在概念上與 HSL 非常相似，但有兩個(gè)很大的區(qū)別：
與我們看到的其他顏色格式不同，LCH 不受 sRGB 的約束。它甚至沒有綁定到 P3！它通過對(duì)色度沒有上限來實(shí)現(xiàn)這一點(diǎn)。
在 HSL 中，飽和度范圍從 0%（無飽和）到 100%（完全飽和）。這是可能的，因?yàn)槲覀冎牢覀冋谡務(wù)?sRGB 色彩空間，一個(gè)有限的調(diào)色板。
但是 LCH 與特定的色彩空間無關(guān)，因此我們不知道飽和上限在哪里。它不是一成不變的：隨著顯示技術(shù)的不斷改進(jìn)，我們可以期待顯示器達(dá)到越來越寬的色域。LCH 將自動(dòng)能夠通過調(diào)高色度來引用這些擴(kuò)展的顏色。談?wù)撁嫦蛭磥恚?/span>
.translucent-box {
background: lch(50% 120 20);
}
CSS 是一種令人驚訝的難以掌握的語言。無論花了多少年練習(xí)，總會(huì)覺得有很多我不知道的東西。
就目前而言，在 LCH 沒有被完全支持的情況下，HSL 也許更加適合表達(dá)。
所以說很多時(shí)候，當(dāng)我們以為自己已經(jīng)很熟悉或者掌握一門語言的時(shí)候，其實(shí)可能我們才僅僅是剛?cè)腴T而已，任何知識(shí)當(dāng)我們深入研究的時(shí)候我們都會(huì)發(fā)現(xiàn)我們對(duì)它的了解其實(shí)并不是真的很透徹。
CSS 是什么？
CSS是Cascading Style Sheets的簡(jiǎn)稱，中文稱為層疊樣式表。
屬性和屬性值用冒號(hào)隔開，以分號(hào)結(jié)尾。
CSS 四種引入方式：
1.行內(nèi)式
行內(nèi)式是在標(biāo)簽的style屬性中設(shè)定CSS樣式。
<div style="..."></div>2.嵌入式
嵌入式是將CSS樣式集中寫在網(wǎng)頁的<head>標(biāo)簽的<style></style>標(biāo)簽對(duì)中。
<head>
...
<style type="text/css">
...此處寫CSS樣式
</style>
</head>3.導(dǎo)入式
將一個(gè)獨(dú)立的.css文件引入HTML文件中，導(dǎo)入式使用@import 引入外部CSS文件，<style>標(biāo)記也是寫在<head>標(biāo)記中。
導(dǎo)入式會(huì)在整個(gè)網(wǎng)頁裝載完后再裝載CSS文件。
<head>
...
<style type="text/css">
@import "My.css"; 此處注意.css文件的路徑
</style>
</head>4.鏈接式
將一個(gè)獨(dú)立的.css文件引入到HTML文件中，使用<link>標(biāo)記寫在<head>標(biāo)記中。
鏈接式會(huì)以網(wǎng)頁文件主體裝載前裝載CSS文件。
<head>
...
<link href="My.css" rel="stylesheet" type="text/css">
</head>
樣式應(yīng)用順序：
.nick {
color: yellow !important;
}基本選擇器：
1.通用元素選擇器
* 表示應(yīng)用到所有的標(biāo)簽。
* {color: yellow}2.標(biāo)簽選擇器
匹配所有使用 div 標(biāo)簽的元素（可以匹配所有標(biāo)簽）
div {color: yellow}3.類選擇器
匹配所有class屬性中包含info的元素。
語法：.類名{樣式}（類名不能以數(shù)字開頭，類名要區(qū)分大小寫。）
.Mycolor {color: yellow}
<h3 class="Mycolor">nick</h3>4.ID選擇器
使用id屬性來調(diào)用樣式，在一個(gè)網(wǎng)頁中id的值都是唯一的（是W3C規(guī)范而不是規(guī)則，所以不會(huì)報(bào)錯(cuò)）。
語法：#ID名{樣式}（ID名不能以數(shù)字開頭）
#Mycolor {color: yellow}
<h3 id="Mycolor">Nick.</h3>組合選擇器：
1.多元素選擇器
同時(shí)匹配h3,h4標(biāo)簽，之間用逗號(hào)分隔。
h3,h4 {color: yellow;}
<h3>Nick</h3>
<h4>Jenny</h4>
2.后代元素選擇器
匹配所有div標(biāo)簽里嵌套的P標(biāo)簽，之間用空格分隔。
div p {color: yellow;}
<div>
<p>Nick</p>
<div>
<p>Nick</p>
</div>
</div>3.子元素選擇器
匹配所有div標(biāo)簽里嵌套的子P標(biāo)簽，之間用>分隔。
div > p {color: yellow;}
<div>
<p>Nick</p>
<p>Nick</p>
</div>4.毗鄰元素選擇器
匹配所有緊隨div標(biāo)簽之后的同級(jí)標(biāo)簽P，之間用+分隔（只能匹配一個(gè)）。
div + p {color: yellow;}
<div>Nick</div>
<p>Nick</p>屬性選擇器：
1.[title] & P[title]
設(shè)置所有具有title屬性的標(biāo)簽元素；
設(shè)置所有具有title屬性的P標(biāo)簽元素。
[title]
{
color: yellow;
}
p[title]
{
color: yellow;
}
<div title>Nick</div>
<p title>Nick</p>2.[title=Nick]
設(shè)置所有title屬性等于“Nick”的標(biāo)簽元素。
[title="Nick"]
{
color: yellow;
}
<p title="Nick">Nick</p>3.[title~=Nick]
設(shè)置所有title屬性具有多個(gè)空格分隔的值、其中一個(gè)值等于“Nick”的標(biāo)簽元素。
[title~="Nick"]
{
color: yellow;
}
<p title="Nick Jenny">Nick</p>
<p title="Jenny Nick">Nick</p>4.[title|=Nick]
設(shè)置所有title屬性具有多個(gè)連字號(hào)分隔（hyphen-separated）的值、其中一個(gè)值以"Nick"開頭的標(biāo)簽元素。
例：lang屬性："en"、"en-us"、"en-gb"等等
[title|="Nick"]
{
color: yellow;
}
<p title="Nick-Jenny">Nick</p>
5.[title^=Nick]
設(shè)置屬性值以指定值開頭的每個(gè)標(biāo)簽元素。
[title^="Nick"]
{
color: yellow;
}
<p title="NickJenny">Nick</p>6.[title$=Nick]
設(shè)置屬性值以指定值結(jié)尾的每個(gè)標(biāo)簽元素。
[title$="Nick"]
{
color: yellow;
}
<p title="JennyNick">Nick</p>7.[title*=Nick]
設(shè)置屬性值中包含指定值的每個(gè)元素
[title*="Nick"]
{
color: yellow;
}
<p title="SNickJenny">Nick</p>偽類選擇器：
1. link、hover、active、visited
a:link{color: black}
a:hover{color: yellow}
a:active{color: blue}
a:visited{color: red}
<a href="#">Nick</a>2. before、after
p {
color: yellow;
}
p:before{
content: "before...";
}
p:after{
content: "after...";
}
<p> Nick </p> 1. 顏色屬性：
color
transparent
opacity
2. 字體屬性:
font-style: 用于規(guī)定斜體文本
font-weight: 設(shè)置文本的粗細(xì)
font-size: 設(shè)置字體的大小
font-family：字體名稱
font：簡(jiǎn)寫屬性
3. 文本屬性:
white-space: 設(shè)置元素中空白的處理方式
direction: 規(guī)定文本的方向
text-align: 文本的水平對(duì)齊方式
line-height: 文本行高
vertical-align: 文本所在行高的垂直對(duì)齊方式
text-indent: 文本縮進(jìn)
letter-spacing: 添加字母之間的空白
word-spacing: 添加每個(gè)單詞之間的空白
text-transform: 屬性控制文本的大小寫
text-overflow: 文本溢出樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
<style>
div {
width: 100px;
height: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧</div>
</body>
</html>text-decoration: 文本的裝飾
text-shadow：文本陰影
word-wrap：自動(dòng)換行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
width: 150px;
height: 160px;
background-color: #FFA500;
/*邊框陰影*/
box-shadow: 10px 10px 5px #888;
/*自動(dòng)換行*/
word-wrap: break-word;
}
h1 {
text-shadow: 5px 5px 5px #888;
}
</style>
</head>
<body>
<p>
When you are old and grey and full of sleep,And nodding by the fire, take down this book,And slowly read, and dream of the soft look
</p>
<h1>索寧</h1>
</body>
</html> a {
text-decoration: none;
/*去除a標(biāo)簽下劃線*/
}4. 背景屬性
background-color: 背景顏色
background-image 設(shè)置圖像為背景
background-position 設(shè)置背景圖像的位置坐標(biāo)
background-repeat 設(shè)置背景圖像不重復(fù)平鋪
background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)
background 簡(jiǎn)寫
5. 列表屬性
list-style-type: 列表項(xiàng)標(biāo)志的類型
list-style-image：將圖象設(shè)置為列表項(xiàng)標(biāo)志
list-style-position：列表項(xiàng)標(biāo)志的位置
list-style：縮寫
1. 邊框
border-style：邊框樣式
border-color：邊框顏色
border-width：邊框?qū)挾?/strong>
border-radius：圓角
border: 簡(jiǎn)寫
box-shadow：邊框陰影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border:2px solid;
border-radius:25px;
width: 140px;
}
</style>
</head>
<body>
<div>
點(diǎn)贊哦！dear.
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.radius1 {
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 20px;
}
.radius2 {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
border-radius: 20px 35px;
}
.radius3 {
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
border-radius: 20px 35px 50px;
}
.radius4 {
display: inline-block;
width: 100px;
height: 100px;
background-color: green;
border-radius: 20px 35px 50px 60px;
}
</style>
</head>
<body>
<div>
<span class="radius1"></span>
<span class="radius2"></span>
<span class="radius3"></span>
<span class="radius4"></span>
</div>
</body>
</html>邊框?qū)崿F(xiàn)各種三角符號(hào)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.triangle-one {
display: inline-block;
border-top: 50px red solid;
border-right: 50px green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-two {
display: inline-block;
border-top: 0 red solid;
border-right: 50px green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-stree {
display: inline-block;
border-top: 50px red solid;
border-right: 0 green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-four {
display: inline-block;
border-top: 50px red solid;
border-right: 0 green solid;
border-bottom: 0 yellow solid;
border-left: 50px blue solid;
}
.triangle-five {
display: inline-block;
border: 50px transparent solid;
border-top: 50px red solid;
}
.triangle-six {
display: inline-block;
border: 50px transparent solid;
border-bottom: 50px yellow solid;
}
.triangle-seven {
display: inline-block;
border: 50px transparent solid;
border-top: 60px red solid;
border-right: 0;
}
.triangle-eight {
display: inline-block;
border: 50px transparent solid;
border-left: 30px yellow solid;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="triangle-one"></div>
<div class="triangle-two"></div>
<div class="triangle-stree"></div>
<div class="triangle-four"></div>
<div class="triangle-five"></div>
<div class="triangle-six"></div>
<div class="triangle-seven"></div>
<div class="triangle-eight"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back {
width: 1000px;
height: 1000px;
margin: 0 auto;
background-color: #ddd;
position: relative;
}
.back-in {
position: absolute;
width: 1020px;
height: 45px;
left: -20px;
top: 50px;
background-color: #2F4F4F;
}
.back-img {
border: 20px solid transparent;
border-top: 10px solid dimgrey;
border-right: 0;
display: inline-block;
position: absolute;
top: 95px;
left: -20px;
}
.back-font {
line-height: 9px;
margin-left: 30px;
color: white;
}
</style>
</head>
<body>
<div class="back">
<div class="back-in"><h3 class="back-font">妹子求關(guān)注 ^.^</h3></div>
<div class="back-img"></div>
</div>
</body>
</html>2.★ 盒子模型
一個(gè)標(biāo)準(zhǔn)的盒子模型：
padding:用于控制內(nèi)容與邊框之間的距離;
margin: 用于控制元素與元素之間的距離;
一個(gè)參數(shù)，應(yīng)用于四邊。
兩個(gè)參數(shù)，第一個(gè)用于上、下，第二個(gè)用于左、右。
三個(gè)參數(shù)，第一個(gè)用于上，第二個(gè)用于左、右，第三個(gè)用于下。
邊框在默認(rèn)情況下會(huì)定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器的窗口的邊框，這是因?yàn)閎ody本身也是一個(gè)盒子，外層還有html，
在默認(rèn)情況下，body距離html會(huì)有若干像素的margin，所以body中的盒子不會(huì)緊貼瀏覽器窗口的邊框了。
解決方法：
body {
margin: 0;
}3.★ display
4. visibility
5.★ float 浮動(dòng)
讓一行顯示兩個(gè)塊級(jí)標(biāo)簽，會(huì)脫離文檔流
clear 清除浮動(dòng)：
6. clip 剪裁圖像
rect 剪裁定位元素：
7. overflow 設(shè)置當(dāng)對(duì)象的內(nèi)容超過其指定高度及寬度時(shí)如何顯示內(nèi)容
8.★ position 規(guī)定元素的定位類型
9. z-index 元素層疊順序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.z-index1 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
z-index: -1;
}
.z-index2 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 20px;
left: 20px;
z-index: 5;
}
</style>
</head>
<body>
<div class="z-index1"></div>
<div class="z-index2"></div>
</body>
</html>10. outline 邊框輪廓
11. zoom 縮放比例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.zoom1 {
zoom: 100%;
}
.zoom2 {
zoom: 150%;
}
.zoom3 {
zoom: 200%;
}
</style>
</head>
<body>
<div class="zoom1">Nick 100%</div>
<div class="zoom2">Nick 200%</div>
<div class="zoom3">Nick 300%</div>
</body>
</html>12. cursor 鼠標(biāo)的類型形狀
鼠標(biāo)放在以下單詞上，There will be a miracle：
url: 自定義光標(biāo)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
<style>
body {
cursor: url("mouse.png"), auto;
/*圖片地址：http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/
}
</style>
</head>
<body>
<div><img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"></div>
</body>
</html> Auto: 默認(rèn)
Default: 默認(rèn)
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Crosshair
Pointer
Move
text
wait
help
not-allowed
13. transform、transition 動(dòng)畫效果
transform 轉(zhuǎn)換，變形
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nick</title>
<meta charset="utf-8" />
<style type="text/css">
div {
border: 1px solid black;
height: 30px;
width: 30px;
background-color: yellow;
/*transform-origin: 50px 50px;*/
transform-origin: left;
transform: rotate(50deg);
/*transform: skew(50deg,50deg);*/
/*transform: translate(50px,50px);*/
/*transform: scale(2);*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Transition 平滑過渡
#property 指定屬性對(duì)應(yīng)類型
1、color： 通過紅、綠、藍(lán)和透明度組件變換（每個(gè)數(shù)值單獨(dú)處理），如：background-color，border-color，color，outline-color等CSS屬性；
2、length：真實(shí)的數(shù)字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等屬性；
3、percentage：真實(shí)的數(shù)字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等屬性；
4、integer 離散步驟（整個(gè)數(shù)字），在真實(shí)的數(shù)字空間，以及使用floor()轉(zhuǎn)換為整數(shù)時(shí)發(fā)生，如：outline-offset，z-index等屬性；
5、number真實(shí)的（浮點(diǎn)型）數(shù)值，如：zoom，opacity，font-weight等屬性；
6、transform list。
7、rectangle：通過x、 y、 width和height（轉(zhuǎn)為數(shù)值）變換，如：crop；
8、visibility：離散步驟，在0到1數(shù)字范圍之內(nèi)，0表示“隱藏”，1表示完全“顯示”,如：visibility；
9、shadow：作用于color、x、y、和blur（模糊）屬性，如：text-shadow；
10、gradient：通過每次停止時(shí)的位置和顏色進(jìn)行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的停止數(shù)值以便執(zhí)行動(dòng)畫，如：background-image；
11、paint server (SVG)：只支持下面的情況：從gradient到gradient以及color到color，然后工作與上面類似；
12、space-separated list of above：如果列表有相同的項(xiàng)目數(shù)值，則列表每一項(xiàng)按照上面的規(guī)則進(jìn)行變化，否則無變化；
13、a shorthand property：如果縮寫的所有部分都可以實(shí)現(xiàn)動(dòng)畫，則會(huì)像所有單個(gè)屬性變化一樣變化。#支持執(zhí)行transition效果的屬性
Property Name Type
background-color as color
background-position as repeatable list of simple list of length, percentage, or calc
border-bottom-color as color
border-bottom-width as length
border-left-color as color
border-left-width as length
border-right-color as color
border-right-width as length
border-spacing as simple list of length
border-top-color as color
border-top-width as length
bottom as length, percentage, or calc
clip as rectangle
color as color
font-size as length
font-weight as font weight
height as length, percentage, or calc
left as length, percentage, or calc
letter-spacing as length
line-height as either number or length
margin-bottom as length
margin-left as length
margin-right as length
margin-top as length
max-height as length, percentage, or calc
max-width as length, percentage, or calc
min-height as length, percentage, or calc
min-width as length, percentage, or calc
opacity as number
outline-color as color
outline-width as length
padding-bottom as length
padding-left as length
padding-right as length
padding-top as length
right as length, percentage, or calc
text-indent as length, percentage, or calc
text-shadow as shadow list
top as length, percentage, or calc
vertical-align as length
visibility as visibility
width as length, percentage, or calc
word-spacing as length
z-index as integer鼠標(biāo)放在以下圖片上，There will be a miracle：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nick</title>
<meta charset="utf-8" />
<style type="text/css">
.img-see-2016-7-2 {
background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg");
background-size: 660px;
background-repeat: no-repeat;
height: 300px;
width: 600px;
transition-duration: 30s;
transition-timing-function: ease;
transition-property: background-size;
}
.img-see-2016-7-2:hover {
background-size: 2000px;
}
</style>
</head>
<body>
<div class="img-see-2016-7-2"></div>
</body>
</html>作者：suoning
原文鏈接：https://www.cnblogs.com/suoning/p/5625582.html
文翻譯自 Color Formats in CSS，作者：Joshwcomeau。 略有刪改
CSS 中的顏色格式可以采用不同的表示方式，包括常用的十六進(jìn)制、RGB、RGBA、HSL 和 HSLA 等格式。十六進(jìn)制是最常用的格式，使用 6 個(gè)十六進(jìn)制數(shù)字來表示顏色，例如 #FF0000 表示紅色；RGB 格式使用紅、綠、藍(lán)三個(gè)顏色通道的數(shù)值來表示顏色，例如 rgb(255,0,0) 也表示紅色；RGBA 格式在 RGB 的基礎(chǔ)上增加了一個(gè)透明度通道，用于控制顏色的不透明度；HSL 格式利用色相、飽和度和亮度三個(gè)參數(shù)來表示顏色，例如 hsl(0,100%,50%) 表示紅色；而 HSLA 格式則在 HSL 的基礎(chǔ)上增加了一個(gè)透明度通道。選擇和使用這些不同的顏色格式時(shí)，需要考慮實(shí)際需求并進(jìn)行決策。
對(duì)于不同的顏色格式，它們之間存在一些重要的區(qū)別。本文將帶您深入了解這些選項(xiàng)，包括它們的工作原理、如何解析它們以及如何靈活應(yīng)用，以下是原文翻譯。
CSS有很多不同的顏色格式：hex codes，rgb（），hsl（），lch（），等等！
我們應(yīng)該用哪一個(gè)？這似乎是一個(gè)無關(guān)緊要的決定，但它們之間卻有一些非常重要的區(qū)別。而且，老實(shí)說我認(rèn)為我們大多數(shù)人都在優(yōu)先考慮使用錯(cuò)誤的方式。
在本教程中，我將帶您瀏覽不同的選項(xiàng)。我們將看到它們是如何工作的，以及我們?nèi)绾卫盟鼈優(yōu)槲覀兏玫姆?wù)。后面我將向您展示現(xiàn)代CSS如何讓我們?cè)谶x擇正確的顏色格式時(shí)進(jìn)行動(dòng)態(tài)調(diào)整。
這并不是一個(gè)真正的顏色格式，但它是一個(gè)很好的開始！
HTML有140種命名顏色。這些是特殊的關(guān)鍵字值，如dodgerblue、hotpink和tomato。
開發(fā)人員Anthony Lieuallen創(chuàng)建了這個(gè)簡(jiǎn)潔的演示，在一個(gè)圓圈中顯示了所有140種命名的Web顏色：
由Anthony Lieuallen創(chuàng)作，MIT許可
當(dāng)你需要一個(gè)占位符顏色時(shí)，命名式顏色名是很好的。例如，如果您正在構(gòu)建原型并需要臨時(shí)值，或者如果您正在編寫教育內(nèi)容。在可讀性方面，沒有什么比color: red更好。
這可能是不言而喻的，實(shí)際開發(fā)中140種顏色是不夠的，通常不會(huì)使用命名的顏色在生產(chǎn)環(huán)境中。
看看這兩種命名的顏色：
“darkgray”實(shí)際上是比“gray”更淺的顏色？ 這是因?yàn)?40種命名的Web顏色來自不同的地方，包括HTML4規(guī)范，X11 Unix窗口系統(tǒng)等。這是一個(gè)不同調(diào)色板的大雜燴，沒有一個(gè)好的規(guī)范約束。
這是我們的第一個(gè)“真實(shí)的”顏色格式。以下是我們?nèi)绾问褂盟?/span>
color: rgb(255 0 0);
對(duì)應(yīng)顯示的樣式如下：
像大多數(shù)顏色格式一樣，rgb是一個(gè)縮寫。它代表綠色藍(lán)。
在我們今天要學(xué)習(xí)的所有顏色格式中，rgb是最不抽象的。你的電腦/手機(jī)顯示屏實(shí)際上只是數(shù)百萬個(gè)微小的紅色、綠色和藍(lán)色LED的集合，它們被組裝成像素。因此，rgb顏色格式允許我們直接調(diào)整這些燈光的亮度。
每個(gè)值（紅色、綠色、藍(lán)色）被稱為通道。每個(gè)通道從0到255。通過將這些通道以不同的量混合，我們可以創(chuàng)造超過1600萬種不同的顏色。
RGB顏色的巧妙之處在于它是基于光的物理學(xué)。我們可以混合紅色、綠色和藍(lán)色光來創(chuàng)造任何顏色。把它們調(diào)到255，我們得到白色。把它們都設(shè)為0，剩下黑色。
rgb color格式還允許我們?yōu)閍lpha通道指定第四個(gè)可選值，以控制透明度：
background: rgb(255 0 0 / 0.5);
以上代碼設(shè)置了紅色50%的透明度，最終的樣式的如下：
Alpha通道的范圍從0（完全不可見）到1（完全不透明）。介于兩者之間的任何東西都會(huì)產(chǎn)生半透明的顏色。
這可能是網(wǎng)絡(luò)上最常用的顏色格式。它看起來像這樣：
color: #FF0000;
它的工作原理如下：6位十六進(jìn)制碼包含三個(gè)2位值，每個(gè)通道一個(gè)值（紅/綠色/藍(lán)）。它不使用10位十進(jìn)制系統(tǒng)，而是使用16位十六進(jìn)制系統(tǒng)。
以下圖示可以更加了解十六進(jìn)制代碼的工作原理（原文可拖動(dòng)滑塊實(shí)時(shí)更新顏色）：
基本上，十六進(jìn)制代碼與RGB值相同。在這兩種情況下，我們都為紅色、綠色和藍(lán)色提供了一個(gè)值。 background: #FFFF0080; 在十進(jìn)制系統(tǒng)中，一個(gè)兩位數(shù)的值可以包含100個(gè)可能的值（10 × 10）。如果是十六進(jìn)制，則總數(shù)為256（16 × 16）。因此，它實(shí)際上就像rgb()一樣，我們?yōu)槊總€(gè)R/G/B通道指定一個(gè)介于0和255之間的值。
還有個(gè)有趣的事實(shí)如果我們想包含一個(gè)alpha通道，我們可以傳遞一個(gè)八位十六進(jìn)制代碼：
background: #FFFF0080;
代碼效果圖：
在本例中，我們指定80作為alpha通道，相當(dāng)于十進(jìn)制系統(tǒng)中的128。因此，這個(gè)盒子是50%不透明的。
8位十六進(jìn)制代碼在現(xiàn)代瀏覽器中得到了廣泛應(yīng)用，全球支持率達(dá)到96％，IE瀏覽器不支持。
到目前為止，我們看到的兩種顏色格式都是基于相同基本思想的不同“包裝器”：傳遞紅/綠色/藍(lán)通道的特定值。
但這并不是思考顏色的唯一方式！讓我們來看看一個(gè)完全不同的顏色格式：HSL。
讓我們從顏色選擇器開始：
這個(gè)顏色選擇器可能感覺更熟悉。它類似于圖形設(shè)計(jì)軟件中使用的圖形設(shè)計(jì)軟件，如Figma或Photoshop。
此顏色格式采用3種不同的值：
這往往是一個(gè)非常直觀的方式來思考顏色。我們沒有直接控制R/G/B光值，而是轉(zhuǎn)向了更高層次的抽象，這與人類通常對(duì)顏色的看法更接近。
css中使用hsl：
background: hsl(0deg 100% 50% / 0.5);
所以，我們到目前為止看到的所有顏色格式都已經(jīng)存在了很多很多年。HSL甚至早在Internet Explorer 9（2011年發(fā)布）中就支持了！
最近我們?cè)贑SS中得到了一些新的顏色格式。它們很有吸引力。讓我們談?wù)勊麄儭?/span>
這篇文章是關(guān)于顏色格式，我們用來指定顏色的語法。到目前為止，我們看到的所有真彩色格式 rgb()、十六進(jìn)制代碼和hsl() 都是由“標(biāo)準(zhǔn)RGB顏色空間”（通常縮寫為sRGB）所約束的。
sRGB中有數(shù)百萬種可能的顏色，但它并沒有接近捕捉人眼能夠看到的全部顏色范圍。
請(qǐng)看下面兩個(gè)紅色方塊：
左邊的顏色是rgb(255 0 0)。它是sRGB顏色空間中最紅的紅色。然而，在右邊，我使用的是P3顏色空間。更紅了！（這兩個(gè)方塊看起來很有可能是一樣的。如果是這樣，這可能意味著您的顯示器或?yàn)g覽器不支持寬色域顏色格式）
P3擴(kuò)展了標(biāo)準(zhǔn)的sRGB色彩空間，使我們能夠獲得更明亮，更鮮艷的色彩。如下圖所示：
不幸的是，在CSS中，顏色空間與顏色格式相關(guān)聯(lián)。如果我選擇使用rgb()語法（或十六進(jìn)制代碼，或hsl()），我只能在sRGB顏色空間中指定顏色。
因此，如果我們想使用P3顏色，我們需要使用不同的顏色格式。語法如下：
.box {
background: color(display-p3 1 0 0);
}
color()函數(shù)接受一個(gè)顏色空間，然后是一組R/G/B值。它使用0到1的十進(jìn)制值，而不是從0到255。但目前只有主流的瀏覽器對(duì)color()函數(shù)支持。
我們使用HSL顏色格式創(chuàng)建以下兩種顏色：
正如我們所看到的，這兩種顏色都具有相同的50%的“亮度”值。但它們感覺不一樣輕，黃色的感覺比藍(lán)色的輕多了！
HSL顏色格式是在數(shù)學(xué)/物理之后建模的。它沒有考慮到人類的感知。而且，事實(shí)證明，人類并不能非常準(zhǔn)確地感知顏色！
LCH是一種顏色格式，旨在對(duì)人類感知一致。兩種顏色具有同等的“亮度”值應(yīng)該感覺同樣輕！
例如，在LCH中，黃色和藍(lán)色在55%亮度下的樣子：
LCH代表“亮度 色度 色調(diào)”。“色度”或多或少是“飽和度”的同義詞。它在概念上與HSL非常相似，但有兩個(gè)很大的區(qū)別：
與我們看到的其他顏色格式不同，LCH不綁定到sRGB。它甚至沒有綁定到P3！它通過不具有色度上限來實(shí)現(xiàn)這一點(diǎn)。
在HSL中，飽和度范圍從0%（無飽和）到100%（完全飽和）。這是可能的，因?yàn)槲覀冎牢覀冋務(wù)摰氖莝RGB顏色空間，一個(gè)有限的顏色調(diào)色板。
但是LCH并沒有鏈接到特定的顏色空間，所以我們不知道飽和度上限在哪里。它不是靜態(tài)的：隨著顯示技術(shù)的不斷改進(jìn)，我們可以預(yù)期顯示器將達(dá)到越來越寬的色域。LCH將自動(dòng)能夠通過調(diào)高色度來參考這些擴(kuò)展的顏色。
background: lch(50% 120 20);
瀏覽器支持情況：
文章的主要內(nèi)容已經(jīng)結(jié)束了，我們看到了許多不同的顏色格式。那么應(yīng)該在工作中真正使用哪一個(gè)呢？
我建議使用HSL。至少在LCH獲得廣泛的瀏覽器支持之前。
我知道很多開發(fā)者喜歡使用十六進(jìn)制代碼。它們簡(jiǎn)潔，易于在設(shè)計(jì)軟件和我們的代碼之間復(fù)制/粘貼，并且通用。但這些好處也伴隨著一些相當(dāng)大的權(quán)衡。
即使你對(duì)十六進(jìn)制符號(hào)很熟悉，它仍然很難直觀破譯。問：#0F52B7是什么顏色？#F3E248怎么樣？
HSL的奇妙之處在于它是直觀的。它與我們對(duì)顏色的看法密切相關(guān)。通過一些練習(xí)，當(dāng)您看到hsl()值時(shí)，您將能夠立即描繪任何顏色。
這意味著我們可以很容易地調(diào)整值，在運(yùn)行中。我甚至不需要打開一個(gè)顏色選擇器。如果我希望我的顏色稍微暗一點(diǎn)，我可以減少亮度百分比。如果我想讓它更生動(dòng)和激烈，我可以調(diào)高飽和度。
當(dāng)我們將HSL與現(xiàn)代CSS特性相結(jié)合時(shí)，它會(huì)變得更加強(qiáng)大。
有興趣的可以看看原文，可以在線體驗(yàn)不同顏色格式是如何工作的。看完本文如果覺得有用，記得點(diǎn)個(gè)贊支持，收藏起來說不定哪天就用上啦～
專注前端開發(fā)，分享前端相關(guān)技術(shù)干貨，公眾號(hào)：南城大前端（ID: nanchengfe）
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
