ຈຳນວນສີ CSS ທີ່ຖືກກວດສອບຄວາມຖືກຕ້ອງ

ສີ CSS

ສີໃນ CSS ສາມາດກຳນົດດ້ວຍວິທີພື້ນຖານດັ່ງກ່າວ:

  • ສີ HEX
  • ສີ HEX ທີ່ມີຄວາມແປກກະພິບ
  • ສີ RGB
  • RGBA ສີ
  • ສີ HSL
  • HSLA 颜色
  • 预定义/跨浏览器的颜色名称
  • ທີ່ນຳໃຊ້: currentcolor ຄຳປະກອບ

ສີ HEX

ກຳນົດສີແມ່ນ #RRGGBB, RR (red), GG (green) ແລະ BB (blue) ຈຳນວນສາມາດແມ່ນສິບສອງຈຳນວນສະແດງພົບພາຍໃນ #00 ຫາ #FF ກຳນົດສ່ວນສາມາດຂອງສີ (ສາມາດ). ທຸກຈຳນວນຕ້ອງຢູ່ໃນຂອບເຂດ #00 ຫາ #FF.

ອີງຕາມນັ້ນວ່າ #0000ff ສະແດງຈະເປັນສີຟ້າບັນຈາກຄຳປະກອບ blue ທີ່ກຳນົດໃຫ້ຫຼາຍທີ່ສຸດ (ff) ຄວາມສະແດງອື່ນໆແມ່ນ 00。

实例

ກຳນົດສີ HEX ທີ່ຫຼາຍຫຼາຍ:

#p1 {background-color: #ff0000;}   /* ສີສີແດງ */
#p2 {background-color: #00ff00;}   /* ສີສີຂຽວ */
#p3 {background-color: #0000ff;}   /* ສີຟ້າ */

ທຳການທົດລອງດ້ວຍຕົວເອງ

ສີ HEX ທີ່ມີຄວາມແປກກະພິບ

ກຳນົດສີແມ່ນ #RRGGBB. ສຳລັບການເພີ່ມຄວາມແປກກະພິບພົບພາຍໃນ #00 ແລະ #FF ແລະເພີ່ມສິບສອງຈຳນວນອີກ.

实例

ກຳນົດສີ HEX ທີ່ມີຄວາມແປກກະພິບ:

#p1a {background-color: #ff000080;}   /* ສີສີແດງບັນຈາກຄວາມແປກກະພິບ */
#p2a {background-color: #00ff0080;}   /* ສີສີຂຽວບັນຈາກຄວາມແປກກະພິບ */
#p3a {background-color: #0000ff80;}   /* ສີຟ້າບັນຈາກຄວາມແປກກະພິບ */

ທຳການທົດລອງດ້ວຍຕົວເອງ

ສີ RGB

ຈຳນວນສີ RGB ຈະຕາມດ້ວຍ ( ຫົວຂໍ້ rgb()ກຳນົດ, ອັດຕະນາການວ່າ:

rgb(red, green, blue)

ປະກອບກຳນົດທຸກບັນດາຄວາມສະແດງ (red, green, blueກຳນົດຄວາມຫຼາຍຂອງສີ ສາມາດເປັນຈຳນວນທີ່ສາມາດລະດັບຈາກ 0 ຫາ 255 ຫຼື ສາມາດເປັນຈຳນວນສາມາດເປັນສິບສອງເຖິງ 100% (ຈາກ 0% ຫາ 100%)。

ອີງຕາມນັ້ນວ່າລະຫັດ rgb(0,0,255) ສະແດງຈະເປັນສີຟ້າບັນຈາກຄຳປະກອບ blue ທີ່ກຳນົດໃຫ້ຫຼາຍທີ່ສຸດ (255) ຄວາມສະແດງອື່ນໆແມ່ນ 0。

ນອກຈາກນັ້ນ, ຄຳສັ່ງທີ່ຕາມກັນແມ່ນ: rgb(0,0,255) ແລະ rgb(0%,0%,100%)。

实例

ການອອກຄຳສັ່ງສະຫວ່າງ RGB ສີນີ້ວັດ:

#p1 {background-color: rgb(255, 0, 0);}   /* ສີວັດ */
#p2 {background-color: rgb(0, 255, 0);}   /* ສີສີຂີ້ */
#p3 {background-color: rgb(0, 0, 255);}   /* ສີຫຼາຍ */

ທຳການທົດລອງດ້ວຍຕົວເອງ

RGBA ສີ

RGBA ສີນີ້ວັດຈຳນວນຫຼາຍຫຼາຍ, ເປັນການຂະຫຍາຍຂອງ RGB ສີນີ້ວັດ, ທີ່ມີສະຫວັດ Alpha - ກຳນົດຄວາມບັງຄັບຂອງວັດຖຸ.

RGBA ສີການດ້ວຍ: ຫົວຫນັງ rgba()ກຳນົດ, ອັດຕະນາການວ່າ:

rgba(red, green, blue, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

实例

ການອອກຄຳສັ່ງສະຫວ່າງ RGB ສີດ້ວຍຄວາມບັງຄັບ:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* ສີວັດດ້ວຍຄວາມບັງຄັບ */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* ສີສີຂີ້ດ້ວຍຄວາມບັງຄັບ */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* ສີຫຼາຍດ້ວຍຄວາມບັງຄັບ */

ທຳການທົດລອງດ້ວຍຕົວເອງ

ສີ HSL

HSL ຄືກັບການອອກຄຳສັ່ງສະຫວ່າງສີ (hue), ຄວາມຊັບຊົນ (saturation) ແລະ ຄວາມເຂັ້ມແຂງ (lightness) - ສະແດງຄວາມສະແດງສີຢູ່ສະຫວ່າງວົງວຽນສີ.

ທີ່ນຳໃຊ້: ຫົວຫນັງ hsl()ກຳນົດຄວາມສີ HSL, ອັດຕະນາການຂອງພວກມັນວ່າ:

hsl(hue, saturation, lightness)

ຄວາມສະເຫຼີມຢູ່ສະໝອງສີວັດຈຳນວນ (0 ຫາ 360) - 0 (ຫຼື 360) ອາດເປັນສີວັດ, 120 ອາດເປັນສີສີຂີ້, 240 ອາດເປັນສີຫຼາຍ.

ຄວາມຊັບຊົນແມ່ນສິບຕາກຳສະເຫຼີມ; 0% ອາດເປັນສີຂີ້ສີຫຼາຍ, 100% ອາດເປັນສີທີ່ສົມບູນ.

ຄວາມເຂັ້ມແຂງຍັງເປັນສິບຕາກຳ; 0% ອາດເປັນສີດຳ, 100% ອາດເປັນສີຂີ້.

实例

ການອອກຄຳສັ່ງສະຫວ່າງ HSL ສີນີ້ວັດຈຳນວນຫຼາຍຫຼາຍ:

#p1 {background-color: hsl(120, 100%, 50%);}   /* 绿色 */
#p2 {background-color: hsl(120, 100%, 75%);}   /* 浅绿色 */
#p3 {background-color: hsl(120, 100%, 25%);}   /* 深绿色 */
#p4 {background-color: hsl(120, 60%, 70%);}    /* 柔和的绿色 */

ທຳການທົດລອງດ້ວຍຕົວເອງ

HSLA 颜色

HSLA 颜色值是 HSL 颜色值的扩展，它带有 Alpha 通道 - 指定对象的不透明度。

HSLA 颜色值由 hsla() 函数指定，该函数的语法如下：

hsla(hue, saturation, lightness, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

实例

定义带有不透明度的不同 HSL 颜色：

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* 带不透明度的绿色 */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* 带不透明度的浅绿色 */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* 带不透明度的深绿色 */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* 带不透明度的柔绿色 */

ທຳການທົດລອງດ້ວຍຕົວເອງ

预定义/跨浏览器的颜色名称

HTML 和 CSS 颜色规范中预定义了 140 个颜色名称。

例如：blue、red、coral、brown 等：

实例

定义不同的颜色名：

#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}

ທຳການທົດລອງດ້ວຍຕົວເອງ

所有预定义名称的列表都可以在我们的 颜色名称参考手册 中找到。

currentcolor 关键字

currentcolor 关键字引用元素的 color 属性值。

实例

以下 <div> 元素的边框颜色将为蓝色，因为 <div> 元素的文本颜色为蓝色：

#myDIV {
  color: blue; /* 蓝色文本色 */
  border: 10px solid currentcolor; /* 蓝色边框色 */
}

ທຳການທົດລອງດ້ວຍຕົວເອງ