Sunday, 10 November 2024

การกำหนดสีใน CSS

21 Apr 2018
157
luminox watches

การกำหนดสีใน css

การกำหนดสีใน CSS คือ การกำหนดค่าสีให้กับแต่ละองค์ประกอบในเว็บไซต์ ซึ่งสามารถทำได้หลายวิธี เช่น ใช้ชื่อสี, รหัสสี HEX, รหัสสี RGB, รหัสสี RGBA, สี HSL, และสี HSLA เพื่อกำหนดสีของข้อความ พื้นหลัง ขอบเขต และองค์ประกอบอื่นๆ ในเว็บไซต์ เพื่อให้มีการแสดงผลตามที่ต้องการ โดยสามารถกำหนดความโปร่งใส ความเข้ม ความสว่าง และอื่นๆ ได้ตามที่ต้องการ การกำหนดสีใน CSS เป็นส่วนสำคัญที่ช่วยให้เว็บไซต์มีการแสดงผลที่สวยงามและเป็นระเบียบดีตามที่ผู้ใช้ต้องการ ด้วยเหตุนี้การเรียนรู้การกำหนดสีใน CSS เป็นสิ่งสำคัญสำหรับนักพัฒนาเว็บไซต์ทุกคน  การกำหนดสีใน CSS มีหลายวิธี แต่สามารถสรุปได้ดังนี้

การกำหนด css ที่ใช้ชื่อสี

การกำหนด css โดยใช้ชื่อสี: เช่น red, green, blue, yellow เป็นต้น

ตัวอย่างการกำหนด CSS โดยใช้ชื่อสี

color: red; /* สีแดง */
background-color: yellow; /* สีเหลือง */

การกำหนด css โดยใช้ชื่อสี

การกำหนด css โดยใช้ชื่อสี


การกำหนดสีใน CSS โดยการใช้รหัสสี HEX

เป็นตัวเลข 6 หลักที่เขียนด้วยตัวอักษรและตัวเลข เช่น #FF0000 (แดง), #00FF00 (เขียว), #0000FF (น้ำเงิน)

ตัวอย่างการกำหนด CSS โดยใช้รหัสสี HEX

color: #FF0000; /* สีแดง */
background-color: #00FF00; /* สีเขียว */

 

การกำหนดสีใน CSS โดยการใช้รหัสสี HEX

การกำหนดสีใน CSS โดยการใช้รหัสสี HEX


การกำหนดสีใน 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 โดยการใช้รหัสสี RGB

การกำหนดสีใน CSS โดยการใช้รหัสสี RGB


การกำหนดสีใน 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 โดยการใช้รหัสสี RGBA

การกำหนดสีใน CSS โดยการใช้รหัสสี RGBA


การกำหนดสีใน CSS โดยการใช้ HSL

สามารถกำหนดค่าสีโดยใช้ Hue (ค่าสีหมอก), Saturation (ความอิ่มตัวของสี), และ Lightness (ความสว่างของสี) เช่น hsl(0, 100%, 50%) จะเป็นสีแดง

ตัวอย่างการกำหนด CSS โดยการใช้ HSL

color: hsl(0, 100%, 50%); /* สีแดง */
background-color: hsl(120, 100%, 50%); /* สีเขียว */

การกำหนดสีใน CSS โดยการใช้ HSL

การกำหนดสีใน CSS โดยการใช้ HSL


การกำหนดสีใน CSS โดยการใช้ HSLA

เหมือนกับ HSL แต่เพิ่มค่าอัลฟา (Alpha) ซึ่งกำหนดความโปร่งใสได้ เช่น hsla(0, 100%, 50%, 0.5) จะเป็นสีแดงโปร่งใส

ตัวอย่างการกำหนด CSS โดยการใช้ HSLA

การกำหนดสีใน CSS โดยการใช้ HSLA

การกำหนดสีใน CSS โดยการใช้ HSLA


Thanat Sirikitphattana

แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ

Follow Us / Thanat Sirikitphattana