Get Adobe Flash player

ใส่สีให้เว็บด้วย CSS Color

การใช้สีเป็นองค์ประกอบพื้นฐานหนึ่งในการออกแบบหน้าเว็บไซต์ให้มีความน่าสนใจ ไม่ว่าจะเป็นสีพื้นหลัง สีตัวอักษรหรือองค์ประกอบอื่นๆบนเว็บไซต์

 

ในการเขียนโค้ด CSS ที่ใช้ในการปรับแต่งสี จะใช้คำสั่งดังนี้

color : ค่าสี ;

 

คำสั่ง color นี้จะใช้เป็นตัวกำหนดค่าสีของตัวอักษร แต่ถ้าหากว่าต้องการกำหนดค่าสีขององค์ประกอบส่วนอื่นบนเว็บไซต์ จะต้องกำหนดเพิ่มว่าต้องการตั้งค่าสีให้องค์ประกอบใด เช่น

  • ถ้าเป็นสีพื้นหลัง จะใช้คำสั่งเป็น background-color
  • ถ้าเป็นสีตัวอักษร จะใช้คำสั่งเป็น border-color

 

ส่วนค่าสีที่อยู่ในคำสั่งนั้น สามารถเขียนได้ในรูปแบบต่างๆ ดังนี้

  • กำหนดโดยใช้ชื่อสี ซึ่งเป็น keyword ที่จะให้ค่าสี เช่น black ,skyblue ,green หรืออื่นๆ
  • กำหนดโดยใช้ค่าสี RGB ในรูปแบบคำสั่ง rgb(R,G,B) โดยที่ค่า R แทนค่าสีแดง G แทนค่าสีเขียว B แทนค่าสีน้ำเงิน ค่าตัวแปรทั้งสามสามารถมีค่าได้ตั้งแต่ 0-255 เช่น สีแดง จะเซตเป็น rgb(255,0,0)
  • กำหนดโดยใช้ค่าสี RGB ในรูปแบบคำสั่ง rgb(R%,G%,B%) โดยที่ค่า R แทนค่าสีแดง G แทนค่าสีเขียว B แทนค่าสีน้ำเงิน ค่าตัวแปรทั้งสามสามารถมีค่าเปอร์เซ็นต์ตั้งแต่ 0%-100%
  • กำหนดโดยใช้ค่า Hex code (เลขฐานสิบหก) ในรูปแบบคำสั่ง #RRGGBB โดยค่าตัวแปรที่เรียงกัน เป็นการบอกค่าสีแบบ rgb แบบหนึ่งเช่นกัน โดยค่า RR จะหมายถึงค่าสีแดง GG จะหมายถึงค่าสีเขียว และ BB จะหมายถึงค่าสีน้ำเงิน แต่ละสีจะมีตัวแปรได้ 2 ตัว และตัวแปรแต่ละตัวจะมีค่าได้ตั้งแต่ 0-F เช่น สีแดง จะเซตเป็น #FF0000
  • กำหนดโดยใช้ค่า Hex code (เลขฐานสิบหก) แบบย่อ ในรูปแบบคำสั่ง #RGB ซึ่งมีหลักการเขียนแบบเดียวกับ Hex code ที่เขียนเรียงกัน 6 ตัว แต่แบบย่อจะลดเหลือ 3 ตัวแทน เช่น สีแดง จะเซตเป็น #F00

Leave a Reply

Your email address will not be published. Required fields are marked *