Fundamentals
What is CSS
อธิบายว่า CSS คืออะไร ทำงานร่วมกับ HTML และ JavaScript อย่างไร และเบราว์เซอร์นำ rule ไปแสดงผลบนหน้าจอได้อย่างไร (DOM → CSSOM → Render Tree)
1) ปัญหา: HTML บอกโครงสร้างได้ แต่บอกหน้าตาไม่ได้
หน้าเว็บยุคแรกเขียนด้วย HTML อย่างเดียว: มีหัวข้อ มีย่อหน้า มีปุ่ม แต่หน้าตาทุกอย่างเป็นค่าเริ่มต้นของเบราว์เซอร์ — ตัวหนังสือดำบนพื้นขาว ปุ่มสี่เหลี่ยมเทา ๆ ไม่มีช่องไฟ จะเปลี่ยนสีหัวข้อหรือย่อหน้า ก็ต้องใช้ attribute พิเศษของ HTML อย่าง <font color="red"> ซึ่งทำให้โค้ดรก แก้ทีละจุด และนำกลับมาใช้ซ้ำไม่ได้ — ยิ่งเว็บมีหลายหน้า ยิ่งควบคุมไม่ได้ CSS เกิดขึ้นเพื่อแก้ปัญหานี้: เป็นภาษาที่ "ประกาศหน้าตา" ของ element แยกออกจากตัวเนื้อหาโดยสิ้นเชิง
หน้าตาปนอยู่กับเนื้อหา และสีเดียวกันถูกเขียนซ้ำทุกจุดที่ต้องการ — ไม่มีที่ให้แก้ครั้งเดียว
- แก้สไตล์ทั้งเว็บไม่ได้ — สีเดียวกันถูกเขียนซ้ำทุกหน้า ไม่มีจุดแก้ครั้งเดียว
- HTML รก — หน้าตาปนอยู่กับเนื้อหา อ่านโครงสร้างยาก
- เลือกไม่ได้ — <font> เปลี่ยนได้แค่ตัวหนังสือ ไม่แตะการจัดวางหรือช่องไฟ
2) แนวคิดหลัก: rule หนึ่งข้อบอกว่า "เลือกใคร" แล้ว "เปลี่ยนอะไร"
CSS (Cascading Style Sheets) คือภาษาที่บอกเบราว์เซอร์ว่า element แต่ละตัวควรมีหน้าตาอย่างไร — ต่างจาก HTML ที่บอกว่าหน้าเว็บมีอะไรบ้าง หน่วยพื้นฐานของ CSS คือ rule หนึ่งข้อ ซึ่งมี 2 ส่วน: selector บอกว่า rule นี้จะไปกับ element ตัวไหน และ declaration block ใน { } บอกว่าจะเปลี่ยนอะไร
h1 คือ selector — ส่วนใน { } คือ declaration block ที่มี 2 declaration: color: blue; กับ font-size: 32px;
| ส่วนของ rule | หน้าที่ | ตัวอย่าง |
|---|---|---|
| selector | บอกเบราว์เซอร์ว่าจะตกแต่ง element ใด — ตรงกับชื่อ element ใน HTML | h1 |
| declaration block | กลุ่ม declaration ใน { } ที่ใช้กับ selector เดียวกัน | { color: blue; font-size: 32px; } |
| declaration | หนึ่งคำสั่งย่อย = หนึ่งคู่ property: value; | color: blue; |
| property | คุณสมบัติที่อยากเปลี่ยน | color |
| value | ค่าที่กำหนดให้ property นั้น | blue |
เมื่อเบราว์เซอร์อ่าน rule นี้ มันจะหา <h1> ทุกตัวในหน้า แล้วนำ declaration ทั้งหมดใน { } ไปใช้กับทุกตัวที่เจอ selector, declaration block และ declaration เป็นคำศัพท์ที่ใช้ต่อในทุกบทของ CSS — จำบทบาทของทั้งสามให้แม่นก่อนเดินหน้าต่อ
3) บทบาทของ CSS ใน Web: HTML vs CSS vs JavaScript
หน้าเว็บหนึ่งหน้าประกอบด้วยภาษา 3 ตัวที่แบ่งหน้าที่กันชัดเจน: - **HTML กำหนดโครงสร้างและเนื้อหา:** หัวข้อ ย่อหน้า รูปภาพ และปุ่ม - **CSS กำหนดรูปลักษณ์และการจัดวาง:** สี ขนาด ช่องไฟ และตำแหน่ง - **JavaScript กำหนดพฤติกรรม:** สิ่งที่เกิดขึ้นเมื่อผู้ใช้คลิก เลื่อน หรือกรอกข้อมูล (เปรียบเทียบได้แค่ระดับ "แต่ละภาษาทำหน้าที่คนละอย่าง" — ไม่ครอบคลุมถึงกรณีที่เส้นแบ่งเลือน เช่น CSS กำหนดการแสดงผลด้วย display: none หรือ JavaScript เปลี่ยนโครงสร้างของหน้าได้ จึงไม่ควรขยายอุปมาต่อไปอีก)
| ภาษา | หน้าที่ | ตัวอย่าง |
|---|---|---|
| HTML | กำหนดโครงสร้างและเนื้อหา | <h1>, <p>, <button> |
| CSS | กำหนดรูปลักษณ์และการจัดวาง | color, font-size, การจัดวาง |
| JavaScript | กำหนดพฤติกรรมและการโต้ตอบ | การคลิก การส่งข้อมูล การอัปเดตเนื้อหา |
4) กลไกเบื้องหลัง: เบราว์เซอร์เปลี่ยน HTML + CSS เป็นหน้าจอได้อย่างไร
เมื่อเปิดหน้าเว็บ เบราว์เซอร์ไม่ได้วาด HTML กับ CSS "แยกกัน" แล้วค่อยประกอบ — มันแปลงทั้งคู่ให้เป็นโครงสร้างข้อมูลก่อน แล้วจึงวาดลงจอ 5 ขั้นตอน: 1. **Parse HTML → DOM:** อ่าน HTML แล้วสร้าง DOM (Document Object Model) — โครงสร้างต้นไม้ของ element ทุกตัวในหน้า 2. **Parse CSS → CSSOM:** อ่าน CSS แล้วสร้าง CSSOM (CSS Object Model) — โครงสร้างต้นไม้ของ rule ทุกข้อที่รวบรวมได้ 3. **DOM + CSSOM → Render Tree:** ผสานสองโครงสร้างเข้าด้วยกัน ได้รายการว่า element ไหนจะแสดงผลด้วย style อะไร 4. **Layout:** คำนวณขนาดและตำแหน่งของ element แต่ละตัวบนหน้า 5. **Paint:** วาดพิกเซลลงบนหน้าจอตามข้อมูลที่คำนวณไว้
- DOM กับ CSSOM เป็นโครงสร้างคนละต้น — CSS rule จะมีผลก็ต่อเมื่อถูกผสานเข้ากับ element ใน Render Tree
- Render Tree มีเฉพาะ element ที่แสดงผลจริง — element ที่ถูกซ่อน (เช่น display: none) จะไม่อยู่ในนั้น
- การเปลี่ยน style ทีหลังมีค่าใช้จ่าย — การแตะขนาดหรือตำแหน่ง (Layout) แพงกว่าการเปลี่ยนแค่สี (Paint)
5) เปรียบเทียบ: หน้าเดียวกัน — ไม่มี CSS vs มี CSS
**ทายก่อนดูเฉลย:** โค้ดฝั่งซ้ายและฝั่งขวาเป็นหน้า HTML ที่มีเนื้อหาเดียวกันทุกตัวอักษร — ต่างกันที่ฝั่งขวาเพิ่ม CSS ไม่กี่บรรทัดไว้ใน <style> ก่อนดูเฉลย ลองทายว่าอะไรจะเปลี่ยนไปบ้างนอกจาก "ตัวหนังสือมีสี"
HTML เปล่า ๆ vs HTML + CSS
เนื้อหาเดียวกัน ต่างกันที่การประกาศหน้าตา — CSS เปลี่ยนประสบการณ์การอ่านทั้งหน้าโดยไม่แตะเนื้อหา
เบราว์เซอร์ใช้ค่าเริ่มต้น: ตัวหนังสือดำบนพื้นขาว ไม่มีช่องไฟ ไม่มีสีของปุ่ม — ดูแบนและอ่านยาก
rule ไม่กี่ข้อเปลี่ยนทั้งโทนของหน้า — หัวข้อมีสี ปุ่มมีสไตล์ และเนื้อหาไม่ถูกแตะแม้แต่ตัวอักษรเดียว (property แต่ละตัวในตัวอย่างนี้ เช่น line-height, background-color, border-radius และ padding จะได้เรียนอย่างละเอียดในแต่ละบทถัดไป)
- การเปลี่ยนแปลงอยู่ที่ "หน้าตา" ล้วน ๆ — เนื้อหา HTML เหมือนเดิมทุกประการ
- rule เขียนครั้งเดียวแล้วมีผลกับ element ทุกตัวที่ selector จับได้ — ไม่ต้องประกาศซ้ำทีละจุด
- การแยกหน้าที่แบบนี้ทำให้แก้ดีไซน์ทั้งเว็บได้จากที่เดียว — บทถัด ๆ ไปจะฝึกเขียน rule ให้แม่นขึ้น
ตรวจความเข้าใจและก้าวต่อไป
ตอบคำถามสั้น ๆ เพื่อเช็กว่าคุณแยกแยะบทบาทของ CSS ออกจาก HTML และ JavaScript และเข้าใจโครงสร้างของ rule กับเส้นทาง DOM → CSSOM → Render Tree แล้วหรือยัง
ตรวจความเข้าใจ: CSS คืออะไร
หน้า HTML มี <h1> หนึ่งตัวกับ <p> สองตัว — ถ้าเขียน CSS: h1 { color: blue; } ข้อความใดจะกลายเป็นสีน้ำเงิน?
CSS แก้ปัญหาหลักอะไรของเว็บยุคแรกที่ต้องเขียน <font color="red"> ซ้ำทุกจุด?
ข้อใดเป็นขั้นตอนที่เบราว์เซอร์ทำก่อนแสดงหน้าเว็บ (เลือกทุกข้อที่ถูก)
ใน rule p { color: red; } ส่วนที่บอกว่า "จะตกแต่ง element ไหน" เรียกว่า ______
- CSS คือภาษาที่ประกาศหน้าตาของ element — แยกออกจากเนื้อหา HTML
- rule = selector + declaration block · declaration = หนึ่งคู่ property: value;
- HTML กำหนดโครงสร้าง · CSS กำหนดรูปลักษณ์ · JavaScript กำหนดพฤติกรรม
- เบราว์เซอร์แปลง HTML → DOM และ CSS → CSSOM แล้วผสานเป็น Render Tree ก่อน Layout และ Paint
- ก้าวต่อไป: ในบทถัดไป 'How to Write CSS (inline / internal / external)' เราจะเรียนวิธีเขียน CSS ทั้ง 3 แบบ และเลือกที่วางให้เหมาะกับงาน (สมมติฐานความรู้ก่อนหน้า: เข้าใจโครงสร้างของ rule — selector, declaration block, declaration — จากบทนี้ เพราะทั้ง 3 วิธีเขียนด้วย rule รูปแบบเดียวกัน)