การใช้ HTML ร่วมกับ CSS: Selectors พื้นฐาน

หลังจากที่เราได้เรียนรู้การสร้างโครงสร้างเว็บไซต์ด้วย HTML และการสร้าง Navigation Bar ในบทที่แล้ว ในบทนี้เราจะมาเรียนรู้การใช้ CSS เพื่อตกแต่งและจัดรูปแบบเว็บไซต์ของเราให้สวยงามและน่าใช้งานยิ่งขึ้น หัวใจสำคัญของการใช้ CSS คือการเลือก (Select) Element ที่เราต้องการจะปรับแต่ง ซึ่งเราจะใช้สิ่งที่เรียกว่า "Selectors" ในการทำเช่นนั้น

Selectors คืออะไร?

Selectors คือรูปแบบ (pattern) ที่ใช้ในการเลือก HTML elements ที่คุณต้องการจัดรูปแบบด้วย CSS CSS selectors ช่วยให้คุณสามารถกำหนดสไตล์ให้กับ element ที่ต้องการได้อย่างแม่นยำ ไม่ว่าจะเป็น paragraph, heading, link, หรือ element อื่นๆ ที่อยู่ในหน้าเว็บของคุณ

ในบทนี้ เราจะมาทำความรู้จักกับ Selectors พื้นฐาน 4 ประเภท ได้แก่:

• Element selector
• ID selector
• Class selector
• Universal selector

1. Element Selector

Element selector เป็น Selector ที่ง่ายที่สุดและใช้บ่อยที่สุด มันจะเลือก HTML element ทั้งหมดที่มีชื่อเดียวกัน ตัวอย่างเช่น ถ้าคุณต้องการเปลี่ยนสีตัวอักษรของทุก paragraph ในหน้าเว็บของคุณ คุณสามารถใช้ Element selector ได้

ตัวอย่าง:

<p>นี่คือ paragraph แรก</p>
<p>นี่คือ paragraph ที่สอง</p>

p {
    color: blue;
}

โค้ด CSS ด้านบนจะทำให้ตัวอักษรของทุก paragraph ในหน้าเว็บกลายเป็นสีน้ำเงิน

คำอธิบาย:

• p คือ Element selector ที่เลือกทุก element ที่เป็น <p>
• color: blue; คือ CSS property ที่กำหนดสีตัวอักษรเป็นสีน้ำเงิน

กรณีใช้งานจริง:

คุณสามารถใช้ Element selector เพื่อกำหนด font, margin, padding, หรือ properties อื่นๆ ให้กับ HTML elements ทั่วไป เช่น h1, h2, p, a, ul, li เป็นต้น

ข้อผิดพลาดที่พบบ่อย:

การใช้ Element selector อาจทำให้เกิดผลกระทบที่ไม่ต้องการได้ หากคุณไม่ได้ตั้งใจที่จะเปลี่ยนสไตล์ของทุก element ที่มีชื่อเดียวกัน ตัวอย่างเช่น หากคุณต้องการเปลี่ยนสีตัวอักษรของ paragraph เพียงบางส่วนเท่านั้น การใช้ Element selector จะทำให้ paragraph ทั้งหมดในหน้าเว็บเปลี่ยนสี

2. ID Selector

ID selector ใช้เพื่อเลือก element ที่มี attribute id ที่ระบุ ID selector จะเริ่มต้นด้วยเครื่องหมาย # ตามด้วยค่าของ attribute id ID selector จะเลือก element เพียง element เดียวเท่านั้น เนื่องจาก attribute id ต้องมีค่าที่ไม่ซ้ำกันในหน้าเว็บ

ตัวอย่าง:

<p id="intro">นี่คือ paragraph แนะนำ</p>
<p>นี่คือ paragraph ทั่วไป</p>

#intro {
    font-weight: bold;
}

โค้ด CSS ด้านบนจะทำให้ตัวอักษรของ paragraph ที่มี id="intro" เป็นตัวหนา

คำอธิบาย:

• #intro คือ ID selector ที่เลือก element ที่มี id="intro"
• font-weight: bold; คือ CSS property ที่กำหนดให้ตัวอักษรเป็นตัวหนา

กรณีใช้งานจริง:

คุณสามารถใช้ ID selector เพื่อกำหนดสไตล์ให้กับ element ที่มีความสำคัญหรือมีลักษณะเฉพาะ เช่น header, footer, navigation bar, หรือ element ที่คุณต้องการให้โดดเด่นจาก element อื่นๆ

ข้อผิดพลาดที่พบบ่อย:

• การใช้ ID selector ซ้ำในหน้าเว็บเดียวกันถือเป็นข้อผิดพลาดร้ายแรง เนื่องจาก attribute id ต้องมีค่าที่ไม่ซ้ำกัน
• การใช้ ID selector มากเกินไปอาจทำให้โค้ด CSS ของคุณซับซ้อนและยากต่อการจัดการ

3. Class Selector

Class selector ใช้เพื่อเลือก element ที่มี attribute class ที่ระบุ Class selector จะเริ่มต้นด้วยเครื่องหมาย . (จุด) ตามด้วยค่าของ attribute class Class selector สามารถเลือก element ได้หลาย element เนื่องจาก attribute class สามารถใช้ซ้ำกันได้ในหน้าเว็บ

ตัวอย่าง:

<p class="highlight">นี่คือ paragraph ที่ต้องการเน้น</p>
<p>นี่คือ paragraph ทั่วไป</p>
<p class="highlight">นี่คือ paragraph ที่ต้องการเน้นอีกอัน</p>

.highlight {
    background-color: yellow;
}

โค้ด CSS ด้านบนจะทำให้พื้นหลังของ paragraph ที่มี class="highlight" เป็นสีเหลือง

คำอธิบาย:

• .highlight คือ Class selector ที่เลือก element ที่มี class="highlight"
• background-color: yellow; คือ CSS property ที่กำหนดสีพื้นหลังเป็นสีเหลือง

กรณีใช้งานจริง:

คุณสามารถใช้ Class selector เพื่อกำหนดสไตล์ให้กับกลุ่มของ element ที่มีลักษณะคล้ายกัน เช่น ปุ่ม, ข้อความแจ้งเตือน, หรือ element ที่คุณต้องการให้มีสไตล์เดียวกัน

ข้อผิดพลาดที่พบบ่อย:

• การลืมใส่เครื่องหมาย . (จุด) หน้าชื่อ class ใน CSS
• การใช้ชื่อ class ที่ไม่สื่อความหมายหรือไม่ชัดเจน

4. Universal Selector

Universal selector เลือกทุก element ในหน้าเว็บ Universal selector เขียนแทนด้วยเครื่องหมาย * (ดอกจัน) การใช้ Universal selector อาจทำให้เกิดผลกระทบที่ไม่ต้องการได้ ดังนั้นควรใช้อย่างระมัดระวัง

ตัวอย่าง:

* {
    margin: 0;
    padding: 0;
}

โค้ด CSS ด้านบนจะกำหนด margin และ padding ของทุก element ในหน้าเว็บเป็น 0

คำอธิบาย:

• * คือ Universal selector ที่เลือกทุก element
• margin: 0; และ padding: 0; คือ CSS properties ที่กำหนด margin และ padding เป็น 0

กรณีใช้งานจริง:

Universal selector มักถูกใช้เพื่อรีเซ็ตสไตล์เริ่มต้นของ browser ซึ่งจะช่วยให้คุณสามารถควบคุมสไตล์ของเว็บไซต์ของคุณได้อย่างแม่นยำยิ่งขึ้น

ข้อผิดพลาดที่พบบ่อย:

การใช้ Universal selector เพื่อกำหนดสไตล์ที่ซับซ้อนอาจทำให้ประสิทธิภาพของเว็บไซต์ลดลง เนื่องจาก browser ต้องคำนวณสไตล์สำหรับทุก element ในหน้าเว็บ

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับ CSS selectors พื้นฐาน 4 ประเภท ได้แก่ Element selector, ID selector, Class selector และ Universal selector Selectors เป็นเครื่องมือที่สำคัญในการกำหนดสไตล์ให้กับ HTML elements ในหน้าเว็บของคุณ การเลือก selector ที่เหมาะสมจะช่วยให้คุณสามารถควบคุมสไตล์ของเว็บไซต์ของคุณได้อย่างแม่นยำและมีประสิทธิภาพ

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับการสร้าง Layout ด้วย HTML5 Semantic Elements ซึ่งจะช่วยให้คุณสามารถสร้างโครงสร้างเว็บไซต์ที่ชัดเจนและมีความหมายมากยิ่งขึ้น