หัวข้อแรกที่คุณต้องเรียนรู้ก่อนเขียนโค้ด CSS คือ Syntax (ไวยากรณ์) คำว่า syntax อาจดูน่ากลัว แต่จริงๆ แค่หมายถึงกฎเกณฑ์ที่เราใช้เขียนโค้ด CSS กฎเหล่านี้เป็นมาตรฐาน ทำให้อ่านโค้ดของคนอื่นได้ง่าย
ส่วนสำคัญที่สุดของ CSS syntax คือ 2 ส่วน: Selectors (ตัวเลือก) และ Declaration Blocks (บล็อกการประกาศ) Selectors ใช้ชี้ไปยังองค์ประกอบที่ต้องการจัดสไตล์ ในขณะที่ declaration blocks ระบุสไตล์ที่ต้องการนำไปใช้กับองค์ประกอบที่เลือก
บทเรียนนี้จะอธิบายพื้นฐาน CSS syntax โครงสร้างของ CSS styles และวิธีเขียน comments ใน CSS จนจบบทเรียนคุณจะเขียน CSS styles ได้ด้วยตัวเอง
CSS Style Rules (กฎสไตล์ CSS)
Stylesheet ใน CSS เก็บชุดกฎที่กำหนดเว็บไซต์จะแสดงอย่างไรบนหน้าจอผู้ใช้ เช่น สีข้อความ ขนาดฟอนต์ของหัวข้อ เป็นต้น
กฎเหล่านี้มีโครงสร้างมาตรฐาน ประกอบด้วย 2 ส่วน: Selectors และ Declarations โครงสร้างโดยรวม:
h1 { color: blue; }กฎนี้ตั้งค่าสีของทุกองค์ประกอบ <h1> ให้เป็นสีน้ำเงิน มาแยกวิเคราะห์ 2 ส่วนประกอบ:
CSS Declarations (การประกาศ)
ส่วนแรกของ CSS style คือ declarations Declaration คือสไตล์เฉพาะที่ต้องการนำไปใช้กับองค์ประกอบ
CSS style rule ต้องมี declaration อย่างน้อย 1 ตัว และสามารถมีได้หลายตัว หากต้องการตั้งค่าความกว้าง ความสูง 100px และสีพื้นหลังสีน้ำเงิน สามารถทำใน declaration เดียวได้
Declarations ประกอบด้วย 2 ส่วน:
- Properties (คุณสมบัติ) — คุณสมบัติสไตล์ที่ต้องการนำไปใช้ (เช่น color, background-color, width, height)
- Value (ค่า) — บอกเบราว์เซอร์ว่าคุณสมบัติควรแสดงอย่างไร (เช่น สีของกล่องตั้งค่าเป็น "green" หรือ "red")
Syntax ของ CSS declaration:
property: value;สังเกตว่า property อยู่ก่อน แล้วคั่นด้วย colon (:) หลัง colon คือ value ที่ต้องการกำหนด แต่ละ declaration ต้องจบด้วย semicolon (;)
ตัวอย่าง 2 declarations:
color: blue; font-size: 16px;declaration แรกตั้งค่าสีฟอนต์เป็น "blue" declaration ที่สองตั้งค่าขนาดฟอนต์เป็น "16px" ทั้งคู่เริ่มด้วยชื่อ property ตามด้วย colon และ value
Declarations จะถูกเก็บไว้ใน curly brackets { }
CSS Selectors (ตัวเลือก)
Declarations เป็นเพียงส่วนหนึ่ง อีกส่วนคือ selectors ที่บอกเบราว์เซอร์ว่าชุด declarations ไหนควรนำไปใช้กับองค์ประกอบไหน
Syntax ของ CSS selector:
selector { /* รายการ declarations */ }Selector สั่งเบราว์เซอร์ว่า styles ควรนำไปใช้กับองค์ประกอบไหน เช่น ต้องการตั้งค่าความกว้างของทุก <div> เป็น "500px":
div { width: 500px; }div คือ selector อยู่ต้นทาง แล้ว declarations อยู่ใน curly brackets กฎนี้ตั้งค่าความกว้างของทุก <div> เป็น "500px"
CSS Comments (ความคิดเห็นใน CSS)
ไม่ใช่ทุกข้อความใน stylesheet เป็น style rules CSS ยังเก็บ comments ได้ Comments เป็นข้อความที่นักพัฒนาเขียนเพื่อให้เข้าใจโค้ดง่ายขึ้น เบราว์เซอร์จะละเว้น comments
ประโยชน์ของการเขียน comments:
- ติดตามโค้ดขณะเขียน และมีบันทึกความคิดสำหรับอ้างอิงภายหลัง
- ช่วยให้นักพัฒนาคนอื่น (ที่ไม่ได้เขียนโค้ด) เข้าใจวัตถุประสงค์และเจตนา
CSS comments เริ่มด้วย /* และจบด้วย */
Single-Line และ Multi-Line Comments
มี 2 ประเภท: single-line (อยู่บรรทัดเดียว) และ multi-line (หลายบรรทัด)
Single-line comment ตัวอย่าง comment อยู่เหนือ style rule:
/* This style sets the font size of all <p> tags to 16px */
p { font-size: 16px; }Multi-line comment ครอบคลุมหลายบรรทัด:
/* This style sets the font size of all <p> tags to 16px
and also sets the color of the text to gray */
p { font-size: 16px; color: gray; }สรุป
เช่นเดียวกับภาษาโปรแกรมอื่นๆ CSS มี syntax พื้นฐานกำหนดวิธีเขียนโค้ด
ใน CSS มี 2 องค์ประกอบสร้าง style rule: declarations (สไตล์ที่ต้องการนำไปใช้) และ selectors (เลือกองค์ประกอบที่ declarations จะนำไปใช้) นอกจากนี้ CSS มี commenting feature สำหรับเขียนบันทึก บนโค้ด เบราว์เซอร์จะละเว้น comments
บทเรียนนี้อธิบายพื้นฐาน CSS syntax และวิธี comment ตอนนี้คุณพร้อมเขียน CSS style rules และ comments อย่างมืออาชีพแล้ว!
