Article Image

Thu Jul 5 23:59:16 2018 [3139 views]

By Pongpat Weesommai

ทำความรู้จักกับ CSS

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 ซึ่ง จะถูกกำหนดโดยตัวเลขในวงเล็บ ในตัวอย่างนี้ก็คือ (2) ซึ่งก็คือ ลูกคนที่ 2 ซึ่งสีตัวอักษรจะเป็นสีน้ำเงิน และ li ตัวสุดท้ายถูกต่อท้ายด้วย :last-child ซึ่งแปลว่าลูกคนสุดท้าย ตัวอักษรจะเป็นสีเหลือง

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

ทิ้งท้าย

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

เกี่ยวกับผู้เขียน

Author's Profile Picture
Pongpat Weesommai

เคยทำงานเป็นวิศวกรซอฟต์แวร์อยู่ที่ไต้หวัน และเคยทำงานfreelance ให้บริษัทต่างๆ เช่น aCommerce SoftbankTelecom

แสดงความคิดเห็น