การกำหนดสีใน css
การกำหนดสีใน CSS คือ การกำหนดค่าสีให้กับแต่ละองค์ประกอบในเว็บไซต์ ซึ่งสามารถทำได้หลายวิธี เช่น ใช้ชื่อสี, รหัสสี HEX, รหัสสี RGB, รหัสสี RGBA, สี HSL, และสี HSLA เพื่อกำหนดสีของข้อความ พื้นหลัง ขอบเขต และองค์ประกอบอื่นๆ ในเว็บไซต์ เพื่อให้มีการแสดงผลตามที่ต้องการ โดยสามารถกำหนดความโปร่งใส ความเข้ม ความสว่าง และอื่นๆ ได้ตามที่ต้องการ การกำหนดสีใน CSS เป็นส่วนสำคัญที่ช่วยให้เว็บไซต์มีการแสดงผลที่สวยงามและเป็นระเบียบดีตามที่ผู้ใช้ต้องการ ด้วยเหตุนี้การเรียนรู้การกำหนดสีใน CSS เป็นสิ่งสำคัญสำหรับนักพัฒนาเว็บไซต์ทุกคน การกำหนดสีใน CSS มีหลายวิธี แต่สามารถสรุปได้ดังนี้
การกำหนด css ที่ใช้ชื่อสี
การกำหนด css โดยใช้ชื่อสี: เช่น red, green, blue, yellow เป็นต้น
ตัวอย่างการกำหนด CSS โดยใช้ชื่อสี
color: red; /* สีแดง */
background-color: yellow; /* สีเหลือง */
การกำหนดสีใน CSS โดยการใช้รหัสสี HEX
เป็นตัวเลข 6 หลักที่เขียนด้วยตัวอักษรและตัวเลข เช่น #FF0000 (แดง), #00FF00 (เขียว), #0000FF (น้ำเงิน)
ตัวอย่างการกำหนด CSS โดยใช้รหัสสี HEX
color: #FF0000; /* สีแดง */
background-color: #00FF00; /* สีเขียว */
การกำหนดสีใน CSS โดยการใช้รหัสสี RGB
สามารถกำหนดค่าสีแดง (R), เขียว (G), และน้ำเงิน (B) ด้วยค่าตัวเลข 0-255 เช่น rgb(255, 0, 0) จะเป็นสีแดง
ตัวอย่างการกำหนด CSS โดยการใช้รหัสสี RGB
color: rgb(255, 0, 0); /* สีแดง */
background-color: rgb(0, 255, 0); /* สีเขียว */
การกำหนดสีใน CSS โดยการใช้รหัสสี RGBA
เหมือนกับ RGB แต่เพิ่มค่าอัลฟา (Alpha) ซึ่งกำหนดความโปร่งใสได้ เช่น rgba(255, 0, 0, 0.5) จะเป็นสีแดงโปร่งใส
ตัวอย่างการกำหนด CSS โดยการใช้รหัสสี RGBA
color: rgba(255, 0, 0, 0.5); /* สีแดงโปร่งใส */
background-color: rgba(0, 255, 0, 0.5); /* สีเขียวโปร่งใส */
การกำหนดสีใน CSS โดยการใช้ HSL
สามารถกำหนดค่าสีโดยใช้ Hue (ค่าสีหมอก), Saturation (ความอิ่มตัวของสี), และ Lightness (ความสว่างของสี) เช่น hsl(0, 100%, 50%) จะเป็นสีแดง
ตัวอย่างการกำหนด CSS โดยการใช้ HSL
color: hsl(0, 100%, 50%); /* สีแดง */
background-color: hsl(120, 100%, 50%); /* สีเขียว */
การกำหนดสีใน CSS โดยการใช้ HSLA
เหมือนกับ HSL แต่เพิ่มค่าอัลฟา (Alpha) ซึ่งกำหนดความโปร่งใสได้ เช่น hsla(0, 100%, 50%, 0.5) จะเป็นสีแดงโปร่งใส
ตัวอย่างการกำหนด CSS โดยการใช้ HSLA
แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ
Follow Us / Thanat Sirikitphattana