บทช่วยสอน CSS ค่าสีตามกฎหมาย ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ สี CSS,สีเลขฐานสิบหก,ตัวอย่าง,สี RGB,ตัวอย่าง,สี RGBA,ตัวอย่าง,สี HSL,ตัวอย่าง,สี HSLA,ตัวอย่าง,ที่กำหนดไว้ล่วงหน้า / ชื่อสีเบราว์เซอร์,

CSS ค่าสีตามกฎหมาย

สี CSS

สี CSS สามารถระบุได้โดยวิธีการดังต่อไปนี้:

  • สีเลขฐานสิบหก
  • สี RGB
  • สี RGBA
  • สี HSL
  • สี HSLA
  • ที่กำหนดไว้ล่วงหน้า / ชื่อสีเบราว์เซอร์

สีเลขฐานสิบหก

เบราว์เซอร์ที่สำคัญทุกการสนับสนุนค่าสีฐานสิบหก

ระบุสีฐานสิบหกของส่วนประกอบที่: # RRGGBB ที่ RR (สีแดง), GG (สีเขียว) และบีบี (สีฟ้า) ค่าทั้งหมดจะต้องอยู่ระหว่าง 0 และ FF

<p ตัวอย่างเช่นค่า # 0000FF จะกลายเป็นสีฟ้า, สีฟ้าเป็นค่าสูงสุดขององค์ประกอบ (FF) และอื่น ๆ ตั้งค่าเป็นศูนย์

ตัวอย่าง

p
{
background-color:#ff0000;
}

ลอง»


สี RGB

ค่าสี RGB ได้รับการสนับสนุนในเบราว์เซอร์ที่สำคัญทั้งหมด

ค่าสี RGB ระบุ: RGB (สีแดง, สีเขียว, สีฟ้า) ความสว่างของแต่ละพารามิเตอร์ (สีแดง, สีเขียวและสีฟ้า) คำจำกัดความของสีที่สามารถเป็นจำนวนเต็มระหว่าง 0 และ 255 หรือค่าเปอร์เซ็นต์และระหว่าง (จาก 0% ถึง 100%)

เช่น RGB (0,0,255) ค่าการแสดงผลเป็นสีฟ้าเพราะสีฟ้าพารามิเตอร์ที่ถูกกำหนดเป็นค่าสูงสุด (255) ในขณะที่คนอื่น ๆ มีค่าเป็น 0

นอกจากนี้ค่าต่อไปนี้ที่มีสีเดียวกันจะมีการกำหนด: rgb (0,0,255) RGB (0%, 0%, 100%)

ตัวอย่าง

p
{
background-color:rgb(255,0,0);
}

ลอง»


สี RGBA

ค่าสี RGBA มี IE9, Firefox3 +, Chrome, Safari และการสนับสนุน Opera10 +

ค่าสี RGBA เป็นค่าสี RGB ขยายช่องอัลฟา - ความโปร่งใสวัตถุที่ระบุ

RGBA ค่าสีระบุ RGBA (สีแดง, สีเขียว, สีฟ้า, อัลฟา) พารามิเตอร์อัลฟาเป็นตัวเลขระหว่าง 0.0 (โปร่งใสเต็มที่) และ 1.0 (ทึบแสงเต็มที่) พารามิเตอร์

ตัวอย่าง

p
{
background-color:rgba(255,0,0,0.5);
}

ลอง»


สี HSL

IE9, Firefox, Chrome, Safari และ Opera 10+. สนับสนุนค่าสี HSL

ตัวแทน HSL ของสี, ความอิ่มตัวและความสว่าง - ใช้พิกัดทรงกระบอกสี

ค่าสี HSL ระบุ HSL (สี, ความเข้มความสว่าง)

เว้เป็นระดับบนวงล้อสี (0-360) -0 (หรือ 360) เป็นสีแดง, สีเขียว 120, 240 สีฟ้า อิ่มตัวเป็นร้อยละ; 0% และ 100% ของเงาสีเทาหมายถึงสีเต็มรูปแบบ ความสว่างยังเป็นเปอร์เซ็นต์; 0% เป็นสีดำ 100% เป็นสีขาว

ตัวอย่าง

p
{
background-color:hsl(120,65%,75%);
}

ลอง»


สี HSLA

ค่าสี HSLA มี IE9, Firefox3 +, Chrome, Safari และ Opera10 +. สนับสนุน

ค่าสี HSLA เป็นส่วนขยายของค่าสี HSL กับช่องอัลฟา - ความโปร่งใสของวัตถุที่ระบุ

ระบุค่าสี HSLA: HSLA (สี, ความเข้มความสว่างα) αคือนิยามความทึบพารามิเตอร์อัลฟา พารามิเตอร์อัลฟาเป็นตัวเลขระหว่าง 0.0 (โปร่งใสเต็มที่) และ 1.0 (ทึบแสงเต็มที่) พารามิเตอร์

ตัวอย่าง

p
{
background-color:hsla(120,65%,75%,0.3);
}

ลอง»


ที่กำหนดไว้ล่วงหน้า / ชื่อสีเบราว์เซอร์

147 อยู่ใน HTML และ CSS การกำหนดสีชื่อสีที่กำหนดไว้ล่วงหน้า คุณสามารถมองเห็นของเรา ชื่อตารางสีที่กำหนดไว้ล่วงหน้า

CSS ค่าสีตามกฎหมาย
10/30