เทมเพลต CSS เริ่มต้น: ตั้งค่าแบบพื้นฐานสำหรับฟอนต์และพื้นหลังของเว็บไซต์
📝 การใช้งาน
เทมเพลตนี้แสดงรหัส CSS สำหรับตั้งฟอนต์และพื้นหลังทั่วทั้งเว็บไซต์ พื้นหลังสีฟ้าอ่อน (#e0f7fa) และฟอนต์เป็น Arial ขนาดฟอนต์ 18px
📘 คำอธิบาย
รหัสข้างล่างนี้จะตั้งค่าฟอนต์ทั่วทั้งเว็บไซต์ สีพื้นหลัง และขนาดฟอนต์ในแท็ก `body` ซึ่งจะทำให้การออกแบบมีความสอดคล้องกันในทุกหน้าเว็บไซต์
🔹 รหัสบางส่วน (การตั้งฟอนต์และพื้นหลัง)
/* การตั้งฟอนต์และพื้นหลังทั่วทั้งเว็บไซต์ */
body {
font-family: 'Arial', sans-serif; /* ฟอนต์ */
background-color: #e0f7fa; /* สีพื้นหลัง */
color: #333; /* สีข้อความ */
font-size: 18px; /* ขนาดฟอนต์ */
line-height: 1.6; /* ความสูงระหว่างบรรทัด */
margin: 0;
padding: 0;
}
💻 รหัสทำงานสมบูรณ์ (การตั้งฟอนต์และพื้นหลัง)
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>การตั้งฟอนต์และพื้นหลัง CSS</title>
<style>
/* การตั้งฟอนต์และพื้นหลังทั่วทั้งเว็บไซต์ */
body {
font-family: 'Arial', sans-serif; /* ฟอนต์ */
background-color: #e0f7fa; /* สีพื้นหลัง */
color: #333; /* สีข้อความ */
font-size: 18px; /* ขนาดฟอนต์ */
line-height: 1.6; /* ความสูงระหว่างบรรทัด */
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h2>การตั้งฟอนต์และพื้นหลังทั่วทั้งเว็บไซต์</h2>
<p>หน้านี้ตั้งค่าฟอนต์และพื้นหลังทั่วทั้งเว็บไซต์ ฟอนต์คือ Arial และสีพื้นหลังคือ #e0f7fa (ฟ้าอ่อน)</p>
</body>
</html>
🔲 ตัวอย่างฟอนต์และพื้นหลัง
คลิกปุ่มด้านล่างเพื่อสลับระหว่างพื้นหลังและฟอนต์ที่แตกต่างกัน
🧩 การประยุกต์และการใช้งาน
การตั้งฟอนต์และพื้นหลังทั่วทั้งเว็บไซต์จะช่วยให้ประสบการณ์ของผู้ใช้ดีขึ้นและรักษาภาพลักษณ์ของแบรนด์ให้สอดคล้องกัน โดยเฉพาะอย่างยิ่งกับคุณสมบัติ font-family ที่ช่วยให้สามารถระบุฟอนต์หลายๆ แบบ เช่น 'Arial', sans-serif เพื่อให้สามารถใช้ฟอนต์สำรองหากฟอนต์หลักไม่สามารถใช้งานได้
📌 เคล็ดลับในการเลือกสีพื้นหลัง
การเลือกสีพื้นหลังที่อ่อน เช่น #e0f7fa จะช่วยลดความเมื่อยล้าของตาในระหว่างการอ่านในระยะเวลานาน นอกจากนี้ให้ตรวจสอบให้แน่ใจว่าอัตราส่วนความแตกต่างระหว่างพื้นหลังและข้อความอยู่ที่อย่างน้อย 4.5:1 (มาตรฐาน WCAG AA)
⚙️ เคล็ดลับในการออกแบบที่รองรับหลายอุปกรณ์
เพื่อให้มั่นใจว่าเนื้อหายังคงอ่านได้บนอุปกรณ์พกพา ให้ปรับขนาดฟอนต์โดยใช้คำสั่ง @media เช่น @media (max-width: 768px) { body { font-size: 16px; } } ทำให้ตัวอักษรอ่านง่ายขึ้นบนหน้าจอขนาดเล็ก
สำหรับการรองรับโหมดมืด ใช้ @media (prefers-color-scheme: dark) เพื่อสลับพื้นหลังและข้อความให้เหมาะสมกับโหมดมืด เช่น background-color: #1a1a1a; color: #f0f0f0;
เพื่อการจัดการที่ดีกว่า โดยเฉพาะในเว็บไซต์ที่มีขนาดใหญ่ ควรใช้ตัวแปร CSS (เช่น --main-bg-color) เพื่อควบคุมสีพื้นหลังและสีข้อความจากที่เดียว