
CSS Colors ระบบสีใน CSS
เราสามารถใช้งานระบบสีใน CSS ได้ด้วยการระบุชื่อสีหรือระบุเป็นค่าสีในระบบสีต่าง ๆ เช่น RGB, HEX, HSL, RGBA, HSLA
Color Name ชื่อสี
ใน CSS เราสามารถใช้งานระบบสีได้โดยการระบุชื่อสี เช่น Red, Green, Blue เป็นต้น ก็จะได้สีตามชื่อสีที่ระบุ ซึ่งชื่อสีที่ใช้ก็เป็นชื่อสีในระบบสีของ HTML นั่นเอง เช่น
AliceBlue
AntiqueWhite
Aqua
Aquamarine
Azure
Beige
ดูรายการชื่อสีและตัวอย่างสีได้ที่นี่
CSS Background Color การกำหนดสีพื้นหลังด้วย CSS
เราสามารถใช้ CSS กำหนดสีพื้นหลังให้กับเอลิเมนต์ต่าง ๆ ได้ โดยการกำหนดค่าให้พร็อพเพอร์ตี้ background-color
<h1 style="background-color:DodgerBlue;">สวัสดีชาวโลก</h1> <p style="background-color:Tomato;">สวัสดีชาวโลกผู้น่ารัก</p>
สวัสดีชาวโลก
สวัสดีชาวโลกผู้น่ารัก
CSS Text Color การกำหนดสีตัวอักษรด้วย CSS
ถ้าต้องการใช้ CSS กำหนดสีตัวอักษร ให้กำหนดที่พร็อพเพอร์ตี้ color
ดังตัวอย่าง
<h1 style="color:Tomato;">สวัสดีชาวโลก</h1> <p style="color:DodgerBlue;">สวัสดีชาวโลกผู้น่ารัก</p> <p style="color:MediumSeaGreen;">สวัสดีชาวโลกผู้ชื่นชอบ CSS</p>
สวัสดีชาวโลก
สวัสดีชาวโลกผู้น่ารัก
สวัสดีชาวโลกผู้ชื่นชอบ CSS
CSS Border Color กำหนดสีขอบเอลิเมนต์ด้วย CSS
ถ้าต้องการกำหนดสีขอบให้เอลิเมนต์ สามารถกำหนดได้ที่พร็อพเพอร์ตี้ border
ดังนี้
<h1 style="border:2px solid Tomato;">สวัสดีชาวโลก</h1> <h1 style="border:2px solid DodgerBlue;">สวัสดีชาวโลก</h1> <h1 style="border:2px solid Violet;">สวัสดีชาวโลก</h1>
สวัสดีชาวโลก
สวัสดีชาวโลก
สวัสดีชาวโลก
CSS Color Values ค่าสีใน CSS
ใน CSS เราสามารถกำหนดค่าสีในระบบสีต่าง ๆ เช่น RGB, HEX, XSL, RGBA, XSLA ดังตัวอย่าง
<h1 style="background-color:rgb(156, 150, 200);">rgb(156, 150, 200)</h1> <h1 style="background-color:#ff4065;">#ff4065</h1> <h1 style="background-color:hsl(20, 80%, 84%);">hsl(20, 80%, 84%)</h1> <h1 style="background-color:rgba(200, 125, 71, 0.5);">rgba(200, 125, 71, 0.5)</h1> <h1 style="background-color:hsla(20, 90%, 64%, 0.5);">hsla(20, 90%, 64%, 0.5)</h1>
rgb(156, 150, 200)
#ff4065
hsl(20, 80%, 84%)
rgba(200, 125, 71, 0.5)
hsla(20, 90%, 64%, 0.5)
ดูตัวอย่างสีและค่าสีในระบบ RGB ที่นี่
ดูตัวอย่างสีและค่าสีในระบบ HEX ที่นี่