เกี่ยวกับสี และเกี่ยวข้องกับการเพิ่ม Style แบบไหน จากเรื่องนี้ How To Add CSS มาดูกัน
CSS Color Names ชื่อของสี
CSS Background Color สีพื้นหลัง
มักจะเพิ่ม Style แบบ Inline CSS คือเพิ่มเข้าไปใน element เลย
<body style="background-color: rgb(235, 187, 207)"><h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Hello World</p></body>
CSS Text Color สีข้อความ
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Hello World</p>
<p style="color:MediumSeaGreen;">Hello World</p>
CSS Border Color สีของเส้นขอบ
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
CSS Color Values สีตามค่าสี
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
CSS RGB Value สีที่ระบุตามค่า RGB
rgb(red, green, blue)
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
RGBA Value สีที่เพิ่มค่าจากสี RGB
rgba(red, green, blue, alpha)
<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
CSS HEX Value สีที่ระบุตามค่าเลขฐานสิบหก hexadecimal
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
HSL Value สีที่ระบุตามค่า saturation เข้ม และ lightness สว่าง
hsl(hue, saturation, lightness)
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
HSLA Value สีที่เพิ่มค่าจากสี HSLA
hsla(hue, saturation, lightness, alpha)
<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
