คุณสมบัติสีพื้นหลัง CSS ใช้สีกับองค์ประกอบข้อความ คุณสามารถระบุคีย์เวิร์ดสี CSS ในตัว ค่าฐานสิบหก หรือค่าสีอื่นด้วยคุณสมบัติสีพื้นหลัง ไวยากรณ์สำหรับคุณสมบัตินี้คือ:color:yourcolor;.
วิธีการใช้สีแบบอักษร CSS
การตั้งค่าสีและสีพื้นหลังของข้อความบนเว็บไซต์เป็นส่วนสำคัญของการออกแบบเว็บ
นั่นคือที่มาของคุณสมบัติสี CSS และสีพื้นหลัง คุณสมบัติสีช่วยให้คุณกำหนดสีของข้อความ HTML คุณสมบัติสีพื้นหลังช่วยให้คุณกำหนดสีพื้นหลังข้อความได้
บทช่วยสอนนี้จะกล่าวถึงตัวอย่าง วิธีตั้งค่าสีของข้อความใน CSS จากนั้นเราจะพูดถึงวิธีตั้งค่าสีพื้นหลังขององค์ประกอบข้อความ
สีแบบอักษร CSS
สีแบบอักษร CSS ถูกตั้งค่าโดยใช้คุณสมบัติสี คุณสมบัติสีกำหนดสีของข้อความ ไม่ใช่พื้นหลังขององค์ประกอบ คุณสามารถใช้คีย์เวิร์ดสี CSS หรือค่าสี เช่น สตริงฐานสิบหกเพื่อกำหนดสีได้
ไวยากรณ์สำหรับคุณสมบัติสีคือ:
p {
color: red;
} กฎนี้กำหนดสีของแท็ก
ทั้งหมดในเอกสาร HTML เป็นสีแดง
เราใช้คีย์เวิร์ดสี CSS คำหลักเหล่านี้สะดวกหากคุณต้องการอ้างถึงสีมาตรฐาน เช่น "สีแดง" หรือ "สีน้ำเงินซีด" แต่คำหลักเหล่านี้ไม่ได้อธิบายทุกสีในสเปกตรัม หากคุณต้องการใช้สีใดสีหนึ่ง คุณอาจต้องการใช้ฉลากสีประเภทอื่น
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
คุณสมบัติสียอมรับค่าใดค่าหนึ่งต่อไปนี้:
| ค่า | คำอธิบาย | ตัวอย่าง |
| ชื่อสี | ชื่อสี | ฟ้า ชมพูสุดฮอต |
| สี HEX | สีเลขฐานสิบหก ตัวระบุมีความยาวหกอักขระ | #f7f7f7, #0000ff |
| สี RGB | RGB ย่อมาจากสีแดง สีเขียว และสีน้ำเงิน | rgb(0, 50, 28), rgb(0, 0, 255) |
| สี HSL | HSL ย่อมาจาก hue, saturation และ lightness | hsl(0, 50%, 50%), hsl(180, 50%, 25%) |
โดยค่าเริ่มต้น สีข้อความที่ใช้โดยหน้าเว็บจะเป็นสีข้อความที่ใช้กับ แท็กบนหน้าเว็บ เว้นแต่จะระบุไว้เป็นอย่างอื่น สิ่งนี้จะเป็นสีดำ
คุณสามารถใช้คุณสมบัติสีเพื่อกำหนดสีลิงก์ในสไตล์ชีตของคุณได้
มาดูตัวอย่างกันเพื่อแสดงให้เห็นว่าคุณสมบัติสีทำงานอย่างไร
เปลี่ยนสีแบบอักษร CSS:ตัวอย่าง
สมมติว่าเรากำลังออกแบบเว็บไซต์สำหรับร้านขายของชำในท้องถิ่น Peterson and Sons เจ้าของต้องการให้เว็บไซต์แสดงกลุ่มข้อความที่เป็นแบบอักษรสีเทา เราสามารถตั้งค่านี้โดยใช้รหัสต่อไปนี้:
<html>
<p>Peterson and Sons was founded by Louis Peterson in 1927. Louis was a Seattle resident with a dream of bringing fresh groceries to his local neighborhood. Peterson and Sons primarily sells fresh food and groceries, including delicious deli meat and artisan cheese.
Today, Peterson and Sons operates five stores across the Seattle area.</p>
<style>
p {
color: gray;
}
รหัสของเราส่งคืน:
ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS
เราใช้
เราสามารถระบุ "rgb (128, 128, 128)" แทน "สีเทา" หากเราต้องการอ้างถึงค่าสี RGB หรือเราอาจตั้งค่าสีข้อความให้เป็นสีเทาโดยใช้ค่าฐานสิบหกหรือค่า HSL
เราไม่ได้ใช้ไฟล์ CSS สำหรับสไตล์ของเรา สไตล์ CSS ของเราอยู่ในแท็ก