search

Hướng dẫn css named colors - css được đặt tên màu sắc

1 năms trước
Trả lời: 0
Lượt xem: 73

Kiểu dữ liệu <named-color> CSS là tên của một màu, chẳng hạn như red, blue, black hoặc lightseagreen. Về mặt cú pháp, A <named-color> là <ident>.<named-color> CSS data type is the name of a color, such as red, blue, black, or lightseagreen. Syntactically, a <named-color> is an <ident>.

Show

Một giá trị <named-color> có thể được sử dụng ở bất cứ đâu, 

<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
1 có thể được sử dụng.

Cú pháp

color: red;
color: orange;
color: tan;
color: rebeccapurple;
color: transparent;

Giá trị

Giá trị CSS Cấp 1

CSS cấp 1 chỉ bao gồm 16 màu cơ bản, được gọi là màu VGA khi chúng được lấy từ bộ màu hiển thị trên card đồ họa VGA.

Từ khóaGiá trị Hex RGBVật mẫu
black
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
3		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
4
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
5		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
6
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
7		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
8
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
9		 
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
0
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
1
red
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
3		 
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
4
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
5		 
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
6
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
7		 
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
8
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
9
<named-color>0<named-color>1
<named-color>2<named-color>3
<named-color>4<named-color>5
<named-color>6<named-color>7
blue<named-color>9
red0red1
red2red3

Giá trị CSS Cấp 2

Giá trị sau đây được xác định trong CSS cấp 2.

Từ khóaGiá trị Hex RGBVật mẫu
black
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
3

<div id="container"> <div id="one"></div> <div id="two"></div> <div id="three"></div> </div> 4

<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
5

Từ khóaGiá trị Hex RGBVật mẫu
black
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
3		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
4
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
5		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
6
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
7		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
8
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
9		 
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
0
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
1
red
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
3		 
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
4
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
5		 
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
6
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
7		 
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
8
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
9
<named-color>0<named-color>1
<named-color>2<named-color>3
<named-color>4<named-color>5
<named-color>6<named-color>7
blue<named-color>9
red0red1
red2red3
Giá trị CSS Cấp 2Giá trị sau đây được xác định trong CSS cấp 2.
red4
(synonym of red2) 		red3
Giá trị CSS Cấp 2Giá trị sau đây được xác định trong CSS cấp 2.
red4red5
Giá trị CSS Cấp 3Mặc dù các màu khác nhau không có trong đặc điểm kỹ thuật (chủ yếu được điều chỉnh từ danh sách màu X11) được hỗ trợ bởi các trình duyệt ban đầu, nhưng cho đến khi SVG 1.0 và CSS màu cấp 3 mà chúng được xác định chính thức. Chúng được gọi là từ khóa màu mở rộng, màu X11 hoặc màu SVG.
red6red7
red8red9
blue0red7
red8red9
blue0blue1
blue2blue3
blue4blue5
blue6blue7
blue8blue9
black0black1
black2black3
black4black5
black6black7
black8black7
black8black9
lightseagreen0lightseagreen1
lightseagreen2lightseagreen3
lightseagreen4lightseagreen5
lightseagreen6lightseagreen7
lightseagreen8lightseagreen7
lightseagreen8lightseagreen9
________ 80 (Từ đồng nghĩa của red2)<named-color>3
<named-color>4<named-color>5
<named-color>6<named-color>7
<named-color>8<named-color>9
<ident>0<ident>1
<ident>2<ident>3
<ident>5<ident>6
<ident>7<ident>8
<ident>9
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
7		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
00
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
01		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
02
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
03		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
04
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
05		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
06
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
07		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
08
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
09		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
10
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
11		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
12
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
13		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
14
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
15		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
17
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
18		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
19
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
20		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
21
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
22		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
23
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
24		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
25
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
26		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
27
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
29		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
30
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
31		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
32
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
33		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
34
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
31		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
32
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
33		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
34
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
35		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
36
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
37		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
38
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
39		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
40
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
41		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
42
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
41		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
42
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
43		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
44
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
45		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
46
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
47		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
49
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
50		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
51
(synonym of 
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
6) 
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
7		 
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
8
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
9
<named-color>0<named-color>1
<named-color>2<named-color>3
<named-color>4<named-color>5
<named-color>6<named-color>7
blue<named-color>9
red0red1
red2red3
Giá trị CSS Cấp 2Giá trị sau đây được xác định trong CSS cấp 2.
red4red5
Giá trị CSS Cấp 3Mặc dù các màu khác nhau không có trong đặc điểm kỹ thuật (chủ yếu được điều chỉnh từ danh sách màu X11) được hỗ trợ bởi các trình duyệt ban đầu, nhưng cho đến khi SVG 1.0 và CSS màu cấp 3 mà chúng được xác định chính thức. Chúng được gọi là từ khóa màu mở rộng, màu X11 hoặc màu SVG.
red6red7
red8red9
blue0blue1
blue2blue3
blue4blue5
blue6blue7
blue8blue9
black0black1
black2black3
black4black5
black6black7
black8black9
lightseagreen0lightseagreen1
lightseagreen2lightseagreen3
lightseagreen4lightseagreen5
lightseagreen6lightseagreen7
lightseagreen8lightseagreen9
________ 80 (Từ đồng nghĩa của red2)<named-color>3
<named-color>4<named-color>5
<named-color>6<named-color>7
<named-color>8<named-color>9
<ident>0<ident>1
<ident>2<ident>3
<ident>5<ident>6
<ident>7<ident>8
<ident>9
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
00		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
01
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
02		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
03
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
04		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
05
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
04		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
05
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
06		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
07
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
08		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
09
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
10		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
11
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
12		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
13
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
14		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
15
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
17		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
18
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
19		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
20
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
21		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
22
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
23		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
24
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
25		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
26
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
27		 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
29
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
30		 

<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
31

<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
32

Để ngăn chặn hành vi bất ngờ, chẳng hạn như trong <named-color>12, thông số CSS hiện tại nói rằng 

#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
98 nên được tính toán trong không gian màu alpha-premultiplied. Tuy nhiên, hãy lưu ý rằng các trình duyệt cũ hơn có thể coi nó là màu đen với giá trị alpha là <named-color>14.

Từ khóa 

#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
98 không phải là một màu thực sự trong CSS cấp 2 (Sửa đổi 1). Đó là một từ khóa đặc biệt có thể được sử dụng thay vì giá trị 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
1 thông thường trên hai thuộc tính CSS: <named-color>17 và <named-color>18. Về cơ bản, nó đã được thêm vào để cho phép các nhà phát triển ghi đè một màu rắn di truyền. Với sự ra đời của các kênh alpha trong CSS Colors Cấp 3, 
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
98 đã được xác định lại là một màu thực sự. Bây giờ nó có thể được sử dụng bất cứ nơi nào giá trị 
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
1 có thể được sử dụng.

Giá trị cấp 4 của CSS

Màu sắc CSS Cấp 4 đã thêm từ khóa <named-color>21 để tôn vinh Tiên phong Web Eric Meyer.

Từ khóaGiá trị Hex RGBVật mẫu
<named-color>21<named-color>23

Sự mô tả

Tất cả các tên chỉ định một màu trong không gian màu SRGB. Mặc dù các tên ít nhiều mô tả màu sắc tương ứng của chúng, về cơ bản chúng là nhân tạo, không có lý do nghiêm ngặt đằng sau các điều khoản được sử dụng.

Các từ khóa màu đều đại diện cho màu sắc đơn giản, chắc chắn mà không có độ trong suốt.

Một số từ khóa là bí danh cho nhau:

  • red2 / <named-color>0
  • #container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
    6 / 
    #container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
    03
  • <named-color>9 / <ident>3
  • <div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
    13 / 
    <div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
    15
  • <div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
    25 / 
    <div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
    27
  • <div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
    77 / 
    <div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
    81
  • <div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
    91 / 
    <div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
    93
  • <div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
    6 / 
    <div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
    47
  • #container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
    82 / 
    #container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
    84

Mặc dù nhiều từ khóa đã được điều chỉnh từ X11, các giá trị RGB của chúng có thể khác với màu tương ứng trên các hệ thống X11 vì các nhà sản xuất đôi khi điều chỉnh màu X11 theo phần cứng cụ thể của chúng.

Ví dụ

Sử dụng màu sắc được đặt tên

HTML

<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>

CSS

#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}

Kết quả

Thông số kỹ thuật

Sự chỉ rõ
Mô-đun màu CSS Cấp độ 4 #
# named-colors

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

  • <div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
    1: Kiểu dữ liệu của định nghĩa <named-color> là một phần cấu thành.

programming css CSS text color Color names Background-color: transparent Color html name A color a

Bài Viết Liên Quan

Hướng dẫn php mysql socket - ổ cắm mysql php
Hướng dẫn php mysql socket - ổ cắm mysql php

Hướng dẫn python open file create directory if not exist - python mở thư mục tạo tệp nếu không tồn tại
Hướng dẫn python open file create directory if not exist - python mở thư mục tạo tệp nếu không tồn tại

Hướng dẫn is python ok for interviews? - python có phù hợp cho các cuộc phỏng vấn không?
Hướng dẫn is python ok for interviews? - python có phù hợp cho các cuộc phỏng vấn không?

Hướng dẫn what is the relationship between xhtml and xml xml and xhtml are same? - mối quan hệ giữa xhtml và xml xml và xhtml có giống nhau không?
Hướng dẫn what is the relationship between xhtml and xml xml and xhtml are same? - mối quan hệ giữa xhtml và xml xml và xhtml có giống nhau không?

Hướng dẫn python section comment - bình luận phần python
Hướng dẫn python section comment - bình luận phần python

Royal Caribbean World Cruise 2023 itinerary
Royal Caribbean World Cruise 2023 itinerary

Hướng dẫn html css jobs for freshers - Việc làm html css cho người mới
Hướng dẫn html css jobs for freshers - Việc làm html css cho người mới

Hướng dẫn how do you extract specific parts of a text file in python? - làm cách nào để bạn trích xuất các phần cụ thể của tệp văn bản trong python?
Hướng dẫn how do you extract specific parts of a text file in python? - làm cách nào để bạn trích xuất các phần cụ thể của tệp văn bản trong python?

Hướng dẫn mysql select substring computer 3 4 the output will be - mysql select substring computer 3 4 đầu ra sẽ là
Hướng dẫn mysql select substring computer 3 4 the output will be - mysql select substring computer 3 4 đầu ra sẽ là

Gala thách thức danh hài 2023
Gala thách thức danh hài 2023

MỚI CẬP NHẬP

Chỗ nguyên toa không bán trên tầu là gì năm 2024
29 giâys trước . bởi MoltenEarnings
Lỗi unable to save permission changes on usbstor năm 2024
5 phúts trước . bởi EthicalCyclone
Limited liabilities company with two or more member là gì năm 2024
23 phúts trước . bởi FadingVomiting
Liên hệ giám đốc công an tỉnh thanh hóa năm 2024
33 phúts trước . bởi FlabbergastedBroth
Ngành quản lý nghệ thuật là gì năm 2024
49 phúts trước . bởi TurbulentJoseph
Đề ôn thi học kì 1 lớp 6 môn toán năm 2024
52 phúts trước . bởi PaganGunman
Bài tập hiện tại tiếp diễn có dấu hiệu năm 2024
1 giờs trước . bởi LeafyAccommodation
Bài tập hình sự trần thị quang vinh năm 2024
1 giờs trước . bởi FortunateMayhem
Các đề văn liên quan đến tuyên ngôn độc lập năm 2024
1 giờs trước . bởi GuaranteedSpoiler
Quai ruột nhiều hơi là gì năm 2024
1 giờs trước . bởi JadedConstable

Xem Nhiều

Chúng ta cùng cảnh ngộ nghĩa tiếng anh là gì năm 2024
4 ngàys trước . bởi CoronaryClerk
Chứng khoán có dấu sao nghĩa là gì năm 2024
5 ngàys trước . bởi GrainyDwelling
Top 20 view của bts twice và black pink youtube năm 2024
6 ngàys trước . bởi SolicitousArchitecture
On the weekend là thì gì năm 2024
3 ngàys trước . bởi FierceCovering
Co số điện thoại di động nào 9 đó năm 2024
1 ngàys trước . bởi SilverTo-day
Himax premium lub ts40 là gì năm 2024
1 ngàys trước . bởi DeepeningMirth
81 2 nguyễn văn giai quận 1 f dakao năm 2024
1 ngàys trước . bởi First-rateMedics
Lỗi font tiếng việt send sms from web to phone năm 2024
6 ngàys trước . bởi InauguralClutches
Các phương pháp dạy học tích cực môn hóa học năm 2024
4 ngàys trước . bởi HastyClearing
Giấy cam kết tiếng anh là gì năm 2024
4 ngàys trước . bởi CountlessAdjustment

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Bản quyền © 2024 Inc.