สวัสดีครับ กลับมากันที่ พื้นฐาน CSS กันอีกแล้วนะครับ ซึ่งตอนนี้เรายังอยู่กันที่ การประกาศ Selector กันอยู่นะครับ ว่าแล้วไปต่อกันเลยดีกว่า
จากคราวที่แล้วเราได้รู้จักการประกาศ Selector 2 แบบ ด้วยกันแล้วนะครับ นั่นก็คือ
1.) Element
2.) Class
ในบทความนี้จะพามารู้จักกับตัวที่ 3 ครับนั่นก็คือ ID นั่นเอง อิอิ
การประกาศโดยอิงจาก ID นั้นหลักการจะเหมือนกับการประกาศโดยอิงจาก Class name เลยครับ โดยบทความนี้ผมขอยกตัวอย่างไฟล์จากบทความที่แล้วมาด้วยเลยนนะครับ นั่นก็คือ ไฟล์ exp.html และ style.css
และก่อนอื่นเลย ผมขอทำตัวอย่างให้ดูก่อนเลยนะครับ เริ่มจากไปที่ไฟล์ style.css แล้วประกาศ CSS ต่อไปนี้ครับ
#id-a {
font-weight : bold ;
}
จากตัวอย่างนี้ผมประกาศ ID ไว้ว่า id-a ซึ่งการประกาศนี้จะใช้หลักการเดียวกับ Class name เกือบทุกประการเลยครับ ยกเว้นตัวนำหน้าครับ ซึ่งใน Class name นั้นเราจะใช้ . หรือ สัญญาลักษณ์จุด ในการเป็นตัวบ่งบอกว่านี่คือ Class name นะครับ แต่ใน ID เราจะใช้ # หรือ ชาร์ป แทนครับ
และในส่วนของการเรียกใช้ก็ตามนี้เลยครับ
<div class= “cls-a” title= “I am element eiei”> Hello </div>
<div id= “id-a” title= “not me”> Bye </div>
โดยผมจะแก้โค๊ดในไฟล์ exp.html เล็กน้อยนะครับ โดยการเพิ่ม Attribute id เข้าไปใน Element div ตัวที่สองครับ แล้วก็นำชื่อ id ที่เราประกาศไว้มาใส่ใน “” เครื่องหมายอัญประกาศ ของ id ครับ ถ้าเราต้องการให้ Element ตัวไหนเรียกใช้ ID เพียงแค่ทำตามนี้แหละครับ
มาถึงตรงนี้ผมเชื่อว่าผู้อ่านต้องสงสัยว่าเอ๊ะ แล้ว ID กับ Class มันต่างกันอย่างไร ต่างแค่วิธีประกาศหรอ ซึ่งถ้าว่ากันตามตรงแล้วมันไม่ต่างกันหรอกครับ
โดยส่วนตัวแล้ว ผมเชื่อว่ามันเป็นเพียงลำดับขั้นในการเรียกใช้เท่านั้นแหละครับ ยกตัวอย่างเช่นผมมี div 5 ตัว
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
และถ้าผมต้องการให้ div ทุกตัวสูง 100 px ผมก็แค่ประกาศผ่านการอิง Element
div {
height : 100px ;
}
และถ้าผมต้องการให้ตัวแรกและตัวสุดท้ายเป็นสีดำ
div {
height : 100px ;
}.cls-black {
background-color : black ;
}
ผมก็แค่ใส่ Class ที่เป็นสีดำให้กับ สองตัว ที่ต้องการครับ
<div class= “cls-black”></div>
<div></div>
<div></div>
<div></div>
<div class= “cls-black”></div>
แล้วถ้าผมต้องการให้ div ตัวแรก มีขนาด ตัวหนังสือใหญ่ กว่าปกติ
div {
height : 100px ;
}.cls-black {
background-color : black ;
}#id-bigger {
font-size : 45 px;
}
ผมก็ใส่ ID ในกับตัวแรก โดยใน ID ก็ระบุขนาดตัวหนังสือลงไปให้ใหญ่กว่าปกติหน่อย
<div class= “cls-black” id= “id-bigger” ></div>
<div></div>
<div></div>
<div></div>
<div class= “cls-black”></div>
ตามนี้เลยครับ จะเห็นว่าการเรียกใช้แต่ละแบบจะมีลำดับที่ต่างกัน โดยผ่าน Element จะมีความกว้างกว่า ลงมาก็ Class name ส่วน ID จะเป็นการเจาะจงตัวมากที่สุด เพราะโดยปกติแล้วส่วนใหญ่จะไม่นิยมเขียน ID ซ้ำครับ อย่างตัวแรกใช้ id-bigger ไปแล้ว ตัวอื่นก็ควรตั้ง ID อื่นไปเลย ซึ่งถามว่าใช้ซ้ำแล้วจะมีผลผิดพลาดอะไรไหม ก็ต้องตอบตรง ๆ เลยว่า ไม่มีผลอะไรครับ แต่ถ้าต้องเขียนร่วมกับ ภาษาอื่นหลาย ๆ ภาษา ก็ไม่ควรที่จะใช้ซ้ำครับ ซึ่งตรงนี้ผมจะค่อย ๆ อธิบายในบทความต่อ ๆ ไปนะครับ และในอีกทางหนึ่งเราก็สามารถเขียนเป็น Class แทน ID ก็ได้ด้วยเช่นกันครับ
.cls-bigger {
font-size : 45 px;
}
<div class= “cls-black cls-bigger”></div>
<div></div>
<div></div>
<div></div>
<div class= “cls-black”></div>
ซึ่งเราสามารถเขียนแบบนี้ก็ได้ผลลัพธ์ออกมาเหมือนกันครับ
แต่เมื่อไหร่ที่เริ่มเขียนมากกว่าแค่ HTML+CSS แล้วละก็ เราก็จะเริ่มเห็นข้อแตกต่างของ ID กับ Class มากยิ่งขึ้นครับ
สำหรับบทนี้ขอพักไว้เท่านี้ก่อนนะครับ สำหรับบทความหน้าเราจะเป็นบทความสุดท้ายสำหรับการประกาศ Selector แล้วครับ
