สี CSS

กำหนดสีด้วยการใช้ชื่อสีที่กำหนดมาก่อนหน้า หรือค่า RGB、HEX、HSL、RGBA、HSLA

ชื่อสี CSS

ใน CSS สามารถใช้ชื่อสีเพื่อกำหนดสีได้:

โทมาโท
สีน้ำตาล
ดอเจอร์บลู
เขียวน้ำทะเลปานกลาง
กระจาย
สลาทบลู
วิโอเลต
LightGray

ทดลองด้วยตัวเอง

CSS/HTML สนับสนุน 140 ชื่อสีมาตรฐาน。

สีพื้นหลัง CSS

คุณสามารถตั้งสีพื้นหลังของ HTML อิเล็กทรอนิกส์ได้:

Welcome to China
China is a great country!

ตัวอย่าง

<h1 style="background-color:DodgerBlue;">China</h1>
<p style="background-color:Tomato;">China is a great country!</p>

ทดลองด้วยตัวเอง

สีข้อความ CSS

คุณสามารถตั้งสีของข้อความได้:

China

China is a great country!

China, officially the People's Republic of China, is a country in East Asia.

ตัวอย่าง

<h1 style="color:Tomato;">China</h1>
<p style="color:DodgerBlue;">China is a great country!</p>
<p style="color:MediumSeaGreen;">China, officially the People's Republic of China...</p>

ทดลองด้วยตัวเอง

สีขอบ CSS

คุณสามารถตั้งสีของเขตเส้นที่รอบนอกได้:

Hello World
Hello World
Hello World

ตัวอย่าง

<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 ค่าสี

ใน CSS ยังสามารถใช้ค่า RGB หรือ HEX หรือ HSL หรือ RGBA หรือ HSLA ในการกำหนดสี:

เท่ากับสีชื่อ "Tomato":

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

เท่ากับสีชื่อ "Tomato" แต่ความโปร่งใส 50%:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
<h3>ตัวอย่าง</h3> 
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

ทดลองด้วยตัวเอง

เรียนรู้เพิ่มเติมเกี่ยวกับค่าสี

ในบทที่ต่อไป คุณจะเรียนรู้เกี่ยวกับ RGB、HEX และ HSL ความรู้เพิ่มเติม