CSS อาจดูน่ากลัวแม้สำหรับนักพัฒนาที่มีประสบการณ์ – มีตัวเลือกมากมาย! แต่บทความนี้อธิบายการเปลี่ยนสีพื้นหลังในเอกสาร HTML โดยไม่ต้องสร้าง cascading style sheet แยก
เมื่อใช้ HTML5 คุณสามารถเพิ่มสีพื้นหลังได้ด้วยแอตทริบิวต์ style และคุณสมบัติ `background-color` ใช้ได้กับ element ใดก็ได้ แต่เพื่อตั้งค่าสีพื้นหลังทั้งหน้า ควรวาง style attribute ในแท็ก body HTML อาจดูแบบนี้:
<!DOCTYPE html> <html> <head> </head> <body style="background-color:orange;"> <h1>This is our header.</h1> <p>This is our text.</p> </body> </html>
โค้ดนี้ให้หน้า HTML พื้นหลังสีส้ม
การใช้ระบบสีเว็บเพิ่มเติม
เมื่อเลือกสีใน HTML แอตทริบิวต์ style ยอมรับ hex codes, HTML color names, RGB(A) color values, และ HSL color values กรณี RGB และ HSL ต้องรวมระบบสีในการประกาศ background-color
ตัวอย่างรูปแบบแต่ละระบบสี:
Hex Code
<body style="background-color:#fbbd0e;"> </body>
HTML Color Name
<body style="background-color:orange;"> </body>
RGB Color Values
<body style="background-color:rgb(251,189,14);"> </body>
RGBA Color Values
<body style="background-color:rgba(251,189,14,0.5);"> </body>
HSL Color Values
<body style="background-color:hsl(44, 96%, 51%);"> </body>
HSLA Color Values
<body style="background-color:hsla(44, 96%, 51%, 0.5);"> </body>
ข้อสังเกต: หากใช้วิธีนี้ตั้งค่าสีพื้นหลัง แต่ภายหลังเขียน external CSS file ให้ลบ style attribute และ background-color property ออกจาก HTML เพื่อป้องกัน style ชนกัน
สรุป
บทความนี้อธิบายการเปลี่ยนสีพื้นหลังด้วย HTML หากคุณใหม่กับ HTML ดูคู่มือ: Learn HTML: A Guide to Learning Hypertext Markup Language หรืออ่าน How Long Does It Take to Learn HTML?
