ถ้า HTML คือโครงสร้างบ้าน CSS ก็คือการตกแต่งให้บ้านสวยงาม CSS ทำให้เว็บมีสีสัน จัดวางองค์ประกอบ และแสดงผลได้สวยงามทุกหน้าจอ บทความนี้จะสอน CSS ตั้งแต่พื้นฐานจนถึงเทคนิคจัดเลย์เอาต์ระดับมืออาชีพ ═══════════════════════════════════════ 📌 1. CSS คืออะไร ═══════════════════════════════════════ CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาที่ใช้ "ตกแต่ง" หน้าเว็บ HTML — กำหนดสี ขนาด ตัวอักษร ระยะห่าง การจัดวาง และการแสดงผลบนอุปกรณ์ต่าง ๆ • HTML = โครงสร้าง/เนื้อหา • CSS = หน้าตา/การตกแต่ง คำว่า "Cascading" หมายถึงกฎจะไหลลงและซ้อนทับกันได้ (ตัวที่เจาะจงกว่าชนะ) ═══════════════════════════════════════ 🔧 2. วิธีใส่ CSS 3 แบบ ═══════════════════════════════════════ 1) Inline — ใส่ในแท็กโดยตรง (ใช้เท่าที่จำเป็น) ```css <p style="color: red; font-size: 20px;">ข้อความสีแดง</p> ``` 2) Internal — ใส่ใน <style> ภายใน <head> ```css <head> <style> p { color: blue; } </style> </head> ``` 3) External — แยกไฟล์ .css (แนะนำที่สุด!) ```css <head> <link rel="stylesheet" href="style.css"> </head> ``` แล้วในไฟล์ style.css เขียน: ```css p { color: green; } ``` *** แบบ External ดีที่สุด: แยกโค้ดเป็นระเบียบ ใช้ซ้ำได้หลายหน้า *** ═══════════════════════════════════════ ✏️ 3. โครงสร้าง Syntax ของ CSS ═══════════════════════════════════════ ```css selector { property: value; property: value; } ``` ตัวอย่าง: ```css h1 { color: navy; font-size: 32px; text-align: center; } ``` • selector (h1) → เลือกว่าจะจัดสไตล์อิลิเมนต์ไหน • property (color) → คุณสมบัติที่จะเปลี่ยน • value (navy) → ค่าที่กำหนด • ปิดท้ายแต่ละบรรทัดด้วย ; (semicolon) เสมอ ═══════════════════════════════════════ 🎯 4. Selector — การเลือกอิลิเมนต์ ═══════════════════════════════════════ ```css * { } → เลือกทุกอิลิเมนต์ p { } → เลือกตามชื่อแท็ก .card { } → เลือกตาม class (ใช้จุด .) #header { } → เลือกตาม id (ใช้ #) div p { } → p ที่อยู่ภายใน div (ลูกหลาน) div > p { } → p ที่เป็นลูกโดยตรงของ div a:hover { } → ตอนเอาเมาส์ชี้ (pseudo-class) input:focus { } → ตอนคลิกเข้าไปในช่อง li:first-child { } → ลูกตัวแรก ``` ตัวอย่างการใช้ class (ที่ใช้บ่อยที่สุด): ```css HTML: <div class="card">กล่อง</div> CSS: .card { background: #fff; padding: 20px; } ``` ลำดับความสำคัญ (Specificity): inline style > id (#) > class (.) > แท็ก ═══════════════════════════════════════ 🎨 5. สี หน่วย และค่าที่ใช้บ่อย ═══════════════════════════════════════ การกำหนดสี: ```css color: red; → ชื่อสี color: #ff5733; → รหัส HEX color: rgb(255, 87, 51); → RGB color: rgba(255, 87, 51, 0.5); → RGB + ความโปร่งใส ``` หน่วยขนาด: ```css px → พิกเซล (ค่าคงที่) % → เปอร์เซ็นต์เทียบพ่อแม่ em → เทียบขนาดตัวอักษรพ่อแม่ rem → เทียบขนาดตัวอักษรราก (html) — นิยมใช้ vw/vh → เทียบความกว้าง/สูงของหน้าจอ (100vw = เต็มจอ) ``` ═══════════════════════════════════════ 🔤 6. ตัวอักษรและข้อความ (Text & Font) ═══════════════════════════════════════ ```css p { font-family: 'Kanit', sans-serif; /* แบบอักษร */ font-size: 16px; /* ขนาด */ font-weight: bold; /* ความหนา (normal/bold/100-900) */ color: #333; /* สี */ text-align: center; /* จัดกึ่งกลาง (left/right/justify) */ line-height: 1.6; /* ระยะห่างบรรทัด */ text-decoration: underline; /* ขีดเส้นใต้ */ letter-spacing: 1px; /* ระยะห่างตัวอักษร */ } ``` ═══════════════════════════════════════ 📦 7. Box Model — หัวใจของ CSS ═══════════════════════════════════════ ทุกอิลิเมนต์คือ "กล่อง" ที่ประกอบด้วย 4 ชั้น (จากในออกนอก): ```css ┌─────────────────────────────┐ │ margin │ ← ระยะห่างนอกกล่อง │ ┌─────────────────────┐ │ │ │ border │ │ ← เส้นขอบ │ │ ┌─────────────┐ │ │ │ │ │ padding │ │ │ ← ระยะห่างในกล่อง │ │ │ ┌───────┐ │ │ │ │ │ │ │content│ │ │ │ ← เนื้อหา │ │ │ └───────┘ │ │ │ │ │ └─────────────┘ │ │ │ └─────────────────────┘ │ └─────────────────────────────┘ .box { width: 300px; padding: 20px; /* ระยะในทั้ง 4 ด้าน */ border: 2px solid #333; /* ขอบ */ margin: 10px; /* ระยะนอกทั้ง 4 ด้าน */ box-sizing: border-box; /* ให้ width รวม padding+border */ } ``` *** เคล็ดลับ: ใส่ box-sizing: border-box; จะคำนวณขนาดง่ายขึ้นมาก *** กำหนดทีละด้านได้: margin-top, padding-left, border-bottom ฯลฯ ═══════════════════════════════════════ 🧩 8. Display และการจัดวาง ═══════════════════════════════════════ ```css display: block; → กินเต็มแถว ขึ้นบรรทัดใหม่ (div, p) display: inline; → อยู่ในบรรทัด กินเท่าเนื้อหา (span, a) display: inline-block; → อยู่ในบรรทัดแต่กำหนด width/height ได้ display: none; → ซ่อน (ไม่กินพื้นที่) display: flex; → เลย์เอาต์แบบยืดหยุ่น (นิยมมาก) display: grid; → เลย์เอาต์แบบตาราง ``` ═══════════════════════════════════════ 💪 9. Flexbox — จัดเลย์เอาต์แบบมือโปร ═══════════════════════════════════════ Flexbox ทำให้จัดของในแนวแถว/คอลัมน์ได้ง่ายมาก ```css .container { display: flex; justify-content: center; /* จัดแนวนอน: center/space-between/space-around */ align-items: center; /* จัดแนวตั้ง: center/flex-start/flex-end */ gap: 16px; /* ระยะห่างระหว่างชิ้น */ flex-wrap: wrap; /* ให้ตกบรรทัดได้เมื่อพื้นที่ไม่พอ */ } .item { flex: 1; /* ให้แต่ละชิ้นขยายเท่ากัน */ } ``` ตัวอย่างจัดของ 3 ชิ้นให้กระจายเท่ากัน: ```css HTML: <div class="container"><div class="item">1</div>...</div> → ได้ 3 กล่องเรียงกันสวยงาม กึ่งกลางจอ ``` ═══════════════════════════════════════ 🗂️ 10. Grid — จัดตารางหลายคอลัมน์ ═══════════════════════════════════════ ```css .grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 คอลัมน์เท่ากัน */ gap: 20px; } ``` • 1fr = 1 ส่วนของพื้นที่ที่เหลือ • repeat(3, 1fr) = สร้าง 3 คอลัมน์ กว้างเท่ากัน เหมาะกับการวางการ์ด แกลเลอรี หรือเลย์เอาต์ทั้งหน้า ═══════════════════════════════════════ 📍 11. Position — การกำหนดตำแหน่ง ═══════════════════════════════════════ ```css position: static; → ค่าปกติ (ไหลตามลำดับ) position: relative; → เลื่อนจากตำแหน่งเดิม (ใช้ top/left) position: absolute; → วางอิสระเทียบพ่อแม่ที่ relative position: fixed; → ตรึงกับหน้าจอ (เมนูลอย) position: sticky; → เลื่อนตามจนถึงจุดแล้วหนึบไว้ .navbar { position: fixed; top: 0; width: 100%; } ``` ═══════════════════════════════════════ 📱 12. Responsive & Media Queries ═══════════════════════════════════════ ทำให้เว็บแสดงผลดีทุกขนาดจอ ด้วย @media ```css /* จอปกติ 3 คอลัมน์ */ .grid { grid-template-columns: repeat(3, 1fr); } /* จอมือถือ (กว้างไม่เกิน 768px) เหลือ 1 คอลัมน์ */ @media (max-width: 768px) { .grid { grid-template-columns: 1fr; } .navbar { font-size: 14px; } } ``` *** อย่าลืมใส่ใน HTML: <meta name="viewport" content="width=device-width, initial-scale=1.0"> *** ═══════════════════════════════════════ ✨ 13. Transition & Animation ═══════════════════════════════════════ Transition — เปลี่ยนค่าอย่างนุ่มนวล ```css .btn { background: #3498db; transition: all 0.3s ease; } .btn:hover { background: #2980b9; transform: scale(1.05); /* ขยาย 5% ตอนชี้ */ } ``` Animation — เคลื่อนไหวต่อเนื่อง ```css @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .box { animation: fadeIn 1s ease; } ``` ═══════════════════════════════════════ 🎯 14. ตัวอย่างการ์ดสวย ๆ (ใช้ได้จริง) ═══════════════════════════════════════ ```css .card { width: 300px; background: #ffffff; border-radius: 16px; padding: 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); transition: transform 0.3s ease; } .card:hover { transform: translateY(-6px); } .card h3 { color: #1e293b; margin-bottom: 8px; } .card p { color: #64748b; line-height: 1.6; } ``` ═══════════════════════════════════════ ✅ 15. สรุปและเคล็ดลับมือโปร ═══════════════════════════════════════ • ใช้ External CSS แยกไฟล์ และตั้งชื่อ class ให้สื่อความหมาย • ใส่ box-sizing: border-box; ให้ทุกอิลิเมนต์ (ผ่าน * selector) • เรียนรู้ Flexbox และ Grid ให้ชำนาญ = จัดเลย์เอาต์อะไรก็ได้ • ออกแบบแบบ Mobile-First แล้วใช้ Media Query ขยายสู่จอใหญ่ • ใช้ rem สำหรับขนาดตัวอักษร และ CSS Variables เพื่อจัดการสีทั้งเว็บ ```css :root { --primary: #3498db; --text: #333; } .btn { background: var(--primary); color: var(--text); } ``` จำไว้: CSS ต้องฝึกลงมือทำ ลองปรับค่าดูผลจริงในเบราว์เซอร์ เปิด DevTools (กด F12) เพื่อทดลองแก้ CSS สด ๆ ได้เลย 🎨