CSS คือภาษาโค้ดที่ใช้ในการตกแต่งหน้าเว็บโดยเฉพาะ

โครงสร้างและหลักการทำงานของ CSS

หลักการทำงานของ CSS ก็คือเราใช้ selector(ตัวเลือก) ในการเลือกว่าเราจะตกแต่ง HTML element ตัวไหน แล้วกำหนด properties(คุณสมบัติ) ที่เราต้องการจะเปลี่ยน เช่น กำหนดให้สีพื้นหลังของย่อหน้าเป็นสีแดง

p {
  background-color: red;
}

จากโค้ดข้างบน เราจะเห็นว่าตัวเลือกที่เราเลือกจะเปลี่ยนคุณสมบัติคือ element p (จากที่เราเรียนมาแล้วคือย่อหน้า) ตามด้วยปีกกาเปิดซึ่งเป็นตัวกำหนดขอบเขตว่า properties ที่อยู่หลังปีกกาเปิดนี้จะมีผลกับตัวเลือกตัวนี้ ซึ่งคุณสมบัติที่เราจะเปลี่ยนก็คือ background-color(สีของพื้นหลัง) ตามด้วยเครื่องหมายทวิภาค และก็ค่าที่เราอยากให้เป็น ในตัวอย่างนี้คือ red(แดง) และจบด้วยเครื่องหมายอัฒภาคเป็นตัวบ่งบอกว่าสิ้นสุดคำสั่งกำหนดคุณสมบัตินี้ ปิดท้ายด้วยเครื่องหมายปีกกาปิด ซึ่งก็คือสิ้นสุดขอบเขตของตัวเลือกนี้

แล้วถ้าเราต้องการเปลี่ยนหลายๆ คุณสมบัติล่ะ? หน้าตามันก็จะเป็นอย่างด้านล่างนี้เลยครัชชช

p {
  background-color: red;
  color: white;
}

ถ้าเข้าใจโครงสร้างของ CSS แล้ว หลายๆ คนคงจะเข้าใจว่าคุณสมบัติที่เราเปลี่ยนกับ element p คือสีของพื้นหลังกับสีของตัวอักษร(ในที่นี้พื้นหลังเป็นสีแดงและตัวอักษรเป็นสีขาว) ไม่ยากเลยใช่ไหมครับกับ CSS ถ้าเราเข้าใจ HTML มาก่อนแล้ว

ทำความเข้าใจ DOM(Document Object Model)

โค้ด HTML ที่เราเขียนเกือบทุกครั้งจะถูกบราวเซอร์ประมวลไปเป็น DOM node ซึ่งเป็นโครงสร้างแบบต้นไม้หรือจะเรียกว่าโครงสร้างพ่อแม่ลูกก็ได้

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

จากตัวอย่างโค้ด HTML ด้านบน เราจะเห็นได้ว่า element ol (ถ้ายังจำกันได้คือแท็กที่เป็นรายการแบบเรียงลำดับ) มีลูกๆ อยู่สาม nodes ด้วยกันซึ่งก็คือ li สามตัว และ li พวกนี้ยังเป็นพี่น้องกันอีกด้วย เพราะว่ามันอยู่ในระดับเดียวกันของโครงสร้าง

OL
|--LI
|  |--"HTML"
|--LI
|  |--"CSS"
|--LI
   |--"JavaScript"

จากภาพข้างบน น่าจะพอทำให้ผู้อ่านเข้าใจได้ว่าโครงสร้างต้นไม้หรือพ่อแม่ลูกเป็นยังไง และ li เป็นพี่น้องกันที่มีเนื้อหาเป็นลูกของ li อีกที ถ้ายังไม่เข้าใจก็ลองดูรูปข้างล่างเผื่อจะเข้าใจมากขึ้น 555+

ซึ่งมันก็คือโครงสร้างเดียวกับการที่โฟลเดอร์และไฟล์ที่เราใช้กันอยู่ทุกๆ วันนั้นเอง

แล้ว DOM มีความสำคัญยังไงกับ CSS

สมมุติเราอยากเปลี่ยนสีของตัวอักษรในรายการ แต่เราไม่อยากใช้สีเดียวกันทั้งหมด เราอยากให้ชิ้นแรกของรายการเป็นสีส้ม ชิ้นที่สองเป็นสีน้ำเงิน และชิ้นสุดท้ายเป็นสีเหลือง ถ้าเราไม่เข้าใจเรื่อง DOM และ โครงสร้างต้นไม้ เราก็คงจะนึกไม่ออกว่าจะเปลี่ยนสีตามข้อกำหนดนี้อย่างไร

li:first-child {
  color: orange;
}
li:nth-child(2) {
  color: blue;
}
li:last-child {
  color: yellow;
}

จากโค้ดข้างบนเราจะเห็นได้ว่ามันมีอะไรต่อท้ายตัว element li เช่นตัวแรกจะถูกต่อท้ายด้วย :first-child ซึ่งหมายความว่า li ลูกคนแรก จากความสัมพันธ์ของโครงสร้างต้นไม้ข้างบนบทความ เราจะเข้าใจได้ว่าเราเลือกแค่ตัว li ที่มี HTML เป็นเนื้อหา และเปลี่ยนสีตัวอักษรเป็นสีส้ม
ต่อไปคือ :nth-child(2) แปลว่าลูกคนที่ n ซึ่ง n จะถูกกำหนดโดยตัวเลขในวงเล็บ ในตัวอย่างนี้ก็คือ (2) ซึ่งก็คือ ลูกคนที่ 2 ซึ่งสีตัวอักษรจะเป็นสีน้ำเงิน และ li ตัวสุดท้ายถูกต่อท้ายด้วย :last-child ซึ่งแปลว่าลูกคนสุดท้าย ตัวอักษรจะเป็นสีเหลือง

ทีนี้เราคงจะพอเข้าใจได้แล้วว่าความสำคัญของ DOM ที่มีต่อ CSS มันมากแค่ไหน ถ้าเราไม่เข้าใจว่าพวก li เป็นลูกๆ ของ ol และเป็นพี่น้องกัน ก็จะไม่สามารถกำหนดการตกแต่งแบบตัวอย่างข้างบนได้ จริงๆ มันก็มีวิธีที่จะทำได้ แต่ตัวโค้ดเราจะเละมากกกกกกถึงมากกกที่สุด ไว้เดี๋ยวจะโชว์ให้ดูในวีดีโอเกี่ยวกับ CSS นะครับ

ทิ้งท้าย

หวังว่าผู้อ่านทุกคนจะเข้าใจวิธีใช้ CSS ไม่มากก็น้อยนะครับหลังจากอ่านบทความนี้ ถ้ายังไม่เข้าใจสามารถสอบถามมาได้ในเพจ หรือรอโค้ดพร้อมๆ กันในวีดีโอหน้านะครัชชช