สวัสดีครับ สำหรับบทความแรกของ พื้นฐาน CSS นั้น เราจะมาเริ่มกันที่ พื้นฐานลำดับความสำคัญของ CSS กันก่อนเลยนะครับ
ปกติคนที่เคยเขียน CSS มาทุกคนช่วงแรก ๆ ต้องมีปัญหาแน่นอน แบบว่าเขียนใส่ Style แล้วทำไมมันไม่ติดบ้างล่ะ ทำไมมันถึงเป็นอีกสีทั้งที่เรากำหนดไว้อีกสี นั่นอาจเกิดจากการกำหนด Selector ที่ยังไม่เข้าใจลำดับความสัมพันธ์ที่แท้จริง
แรกเลยเชื่อว่าหลายคนต้องเคยตั้ง Selector ซ้ำใน CSS อย่างแน่นอน หรือ บางคนอาจจะยังเป็นอยู่ อิอิ
ถ้าเกิดเราประกาศ Selector ซ้ำกัน CSS จะทำการจับมันทั้งหมดมัดรวมกันเป็นก้อนอันเดียว และถ้าภายใน Selector เหล่านั้นมี Property ซ้ำกันอีก มันจะให้ Property ที่อยู่ใน Selector ตัวที่อยู่ล่างสุดทำงานเท่านั้น อ่า ๆ เดี๋ยว งง เรามีตัวอย่างครับ
div {
background-color : black ;
border : 10px solid yellow ;
width : 100px ;
margin : auto ;
}
div {
background-color : red ;
height : 50px ;
width : 50px ;
}
div {
background-color : blue ;
padding : 40px ;
}
จากตัวอย่างจะเห็นว่าประกาศ Selector เป็น div ซ้ำถึงสามครั้งด้วย แล้วผลที่ได้ก็จะเป็นแบบนี้ครับ
div {
background-color : blue ;
// ซ้ำกันถึงสามครั้ง แต่ผลที่ได้คือมาจากตัวล่างสุดborder : 10px solid yellow ;
// ไม่ซ้ำกับใครได้มาจากตัวแรกเลยจร้าheight : 50px ;
// ไม่ซ้ำเหมือนกันได้มาจากตัวที่สองจร้าmargin : auto ;
// ไม่ซ้ำกับใครได้มาจากตัวแรกเหมือนกันจร้าpadding : 40px ;
// น้องใหม่ไม่ซ้ำใคร มาจากตัวที่สามwidth : 50px;
// ซ้ำกันสองครั้ง ได้มาจากตัวที่สองเลยจร้า}
เพราะถ้างั้นคราวหน้าเขียนแล้ว ไม่ได้ดั่งใจลองเช็คแถวล่าง ๆ ดูนะครับ เผื่อซนเขียนซ้ำไว้แล้วลืมดู อิอิ
ต่อครับ ต่อ!!
ปกติลำดับความสำคัญของ CSS มีอยู่ 5 ลำดับด้วยกันครับ ไม่นับเขียนซ้ำแบบเมื่อกี้นะครับ
เริ่มกันที่ ลำดับแรกเลยนะครับ ลำดับที่อยู่ล่างสุด นั้นก็คือ
“Element” นั่นเอง!!! การประกาศ Selector ด้วย Element ตรง ๆ จัดอยู่อันดับแรกสุดเลยครับ และเชื่อว่าสำหรับมือใหม่หลายคนหน้าจะงงว่า แล้วมันคืออะไรอ่ะ ไอ้ Element เนี้ย ไม่ต้องห่วงครับผมมีตัวอย่างให้ได้ชมกัน และตัวอย่างนี้จะใช้ร่วมกันทุกลำดับเลยนะครับ
โค๊ด HTML ตัวอย่างครับ
<div>
<span></span>
</div>
โค๊ด CSS ตัวอย่างของการประกาศด้วย Element ครับ
div{
width : 100px ;
height : 100px ;
background-color : blue ;
}
ลองพิมพ์ตามเพื่อดูผลด้วยตาตัวเองก็ได้นะครับ
มาต่อกันที่ลำดับที่สองกันเลยครับ ลำดับที่สูงขึ้นมานิดนึงจากเมื่อกี้ครับ และนั่นก็คือ
“Class” ครับผม หรือที่เรียกกันว่า Class name นั่นล่ะครับ
โค๊ด HTML ตัวเดิมนะครับขอเพิ่มนิดนึงครับ
<div class=“cls-a”>
<span></span>
</div>
จะเห็นว่ามีการเพิ่ม class เข้ามานะครับ
โค๊ด CSS ตัวอย่างของการประกาศด้วย Class ครับ ถ้าพิมพ์ตามอยู่ ของเก่าไม่ต้องลบนะครับ
.cls-a{
background-color : red ;
}
จากโค๊ดนี้จะเห็นว่าผลที่แสดงออกมา พื้นหลังพี่ div ของเราได้เปลี่ยนไปตาม Class ที่เราเพิ่งสร้างครับ จะเห็นว่าอารมณ์คร้ายกับการเขียนซ้ำเลย เพราะค่าความสูงและความกว้างที่เรากำหนดไว้ ที่ Element ก็ยังอยู่ครับ นั่นล่ะครับก็อย่างที่เห็น อิอิ
ต่อกันที่ลำดับต่อไปกันเลยดีกว่าครับ และเค้าก็คือ
“ID” หรือที่รู้จักกันว่า “ไอดี” เอิ่ม…
โค๊ด HTML ขอเติมอีกนิดนะครับ อิอิ
<div id=“id-a” class=“cls-a”>
<span></span>
</div>
จากโค๊ดจะมี id เพิ่มเข้ามานะครับ
โค๊ด CSS ตัวอย่างของการประกาศด้วย ID ครับ เช่นเคยนะครับไม่ต้องลบของเก่าครับ เขียนต่อไปโล๊ด
#id-a{
background-color : green ;
}
เปลี่ยนสีอีกแล้ว อิอิ จะเห็นว่า ทันทีที่เราประกาศ ID ใน CSS ผลที่ออกมาจะทำตาม ID ทันทีเลย ไม่สนไม่แยแส background-color จาก Element และ class เลย ใจร้ายเนอะ แต่ก็นั่นล่ะครับ ก็ ID เค้าสำคัญกว่าจะไปว่าอะไรเค้าได้
สำหรับบทความนี้ จะขอพูดถึงแค่สามอันดับแรกก่อนนะครับ ส่วนอันนี้เหลือขอยกไปบทความถัดไปไม่งั้นมันจะยาวไมนิ
