การจัดสไตล์ส่วนหัว (Header) ของเว็บไซต์ด้วย CSS เป็นสิ่งสำคัญในการสร้างความตื่นตัวและจับตามือผู้เข้าชมได้ทันที ตัวอย่างโค้ดด้านล่างแสดงวิธีสร้าง Header ที่มีพื้นหลังสีชมพูเข้ม ตัวอักษรสีขาว จัดกึ่งกลาง และมีขนาดฟอนต์ที่เหมาะสม
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
}
.header {
padding: 30px;
text-align: center;
background: #bc1a6b;
color: white;
font-size: 30px;
}
main {
padding: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="header">
<h1>My website ⇅</h1>
</div>
<main>
<h1>Some heading</h1>
<p>Some sample content.Some sample content.</p>
<p>Some sample content.Some sample content.</p>
<p>Some sample content.Some sample content.</p>
</main>
</body>
</html>
คำอธิบายโค้ดสำคัญ
- .header - คลาสหลักสำหรับจัดสไตล์ส่วนหัว ใช้
padding: 30pxเพื่อสร้างพื้นที่รอบข้าง - background: #bc1a6b - กำหนดสีพื้นหลังเป็นสีชมพูเข้ม (Magenta)
- color: white - ตัวอักษรสีขาว เพื่อคอนทราสต์กับพื้นหลัง
- text-align: center - จัดเนื้อหาให้อยู่กึ่งกลางแนวนอน
- font-size: 30px - ขนาดตัวอักษรใหญ่พอที่จะอ่านง่ายและเด่นชัด
ผลลัพธ์ที่ได้
โค้ดข้างต้นจะแสดง Header ที่มีพื้นหลังสีชมพูเข้ม ขยายเต็มความกว้างของหน้าจอ มีข้อความ "My website ⇅" อยู่กึ่งกลาง ตามด้วยส่วนเนื้อหาหลัก (main) ที่มีพื้นหลังสีขาวและข้อความตัวอย่าง
เคล็ดลับเพิ่มเติม
- สามารถเพิ่ม
box-shadowให้ Header เพื่อสร้างเงาและความลึก - ใช้
position: sticky; top: 0;หากต้องการให้ Header ติดอยู่บนสุดเมื่อเลื่อนหน้าจอ - เพิ่ม
z-indexเพื่อให้ Header อยู่เหนือเนื้อหาอื่นๆ
