Cascading Order
Mar 23rd
Cascading Order คือ ลำดับความสำคัญของสไตล์ชีท
โดยธรรมชาติแล้ว ไฟล์.css จะถูกอ่านจากบนลงล่าง หากคุณเขียนซ้ำ class เดิม อันที่อยู่ด้านล่าง จะถูกทำเป็นลำดับสุดท้าย เช่น
.test{
color:red;
}
.test{
color:blue;
}
เมื่อคุณเรียกใช้คลาส ในhtml เช่น <div class=”test”> test test </div> จะได้ตัวหนังสือ test สีน้ำเงิน
ความสำคัญ ลำดับแรก !important
หากคุณกำหนด !important ไว้ใน value เช่น
p{
color:red!important;
}
p{
color:blue;
}
เมื่อเขียนแบบนี้ ในแท็ก <p> จะมีฟ้อนต์เป็น สีแดง
การคำนวณลำดับความสำคัญจาก การประกาศ class และ id
ให้ a เป็นจำนวนของ id b เป็นจำนวนของ class และ c เป็นจำนวนของ tag html
#id1 {xxx} /* a=1 b=0 c=0 –> เรียงตัวเลข abc = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 –> เรียงตัวเลข abc = 013 */
LI.red {xxx} /* a=0 b=1 c=1 –> เรียงตัวเลข abc = 011 */
LI {xxx} /* a=0 b=0 c=1 –> เรียงตัวเลข abc = 001 */
ตัวเลขมากกว่า จะมีลำดับความสำคัญที่สูงกว่า จะเห็นว่า id มีความสำคัญสูงกว่า class หากเรียก id และ class พร้อมๆกันลักษณะที่กำหนด จะเป็นไปตาม id
ตัวอย่าง
<style>
ul li.test{ color:blue; } /*012*/
li.test{color:red } /*011*/
</style>
<ul>
<li class=”test”>คุณว่าจะได้สีอะไร</li>
</ul>
ลองนำโค้ดนี้ไป paste ในส่วน body ดู นะครับ
หากตัวเลขมีค่าเท่ากัน สิ่งที่ประกาศไว้ลำดับสุดท้ายจะมีความสำคัญสูงกว่าครับ
งงอ่ะ……ตั้งแต่ตรงนี้
การคำนวณลำดับความสำคัญจาก การประกาศ class และ id
ให้ a เป็นจำนวนของ id b เป็นจำนวนของ class และ c เป็นจำนวนของ tag html
#id1 {xxx} /* a=1 b=0 c=0 –> เรียงตัวเลข abc = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 –> เรียงตัวเลข abc = 013 */
LI.red {xxx} /* a=0 b=1 c=1 –> เรียงตัวเลข abc = 011 */
LI {xxx} /* a=0 b=0 c=1 –> เรียงตัวเลข abc = 001 */
ตัวเลขมากกว่า จะมีลำดับความสำคัญที่สูงกว่า จะเห็นว่า id มีความสำคัญสูงกว่า class หากเรียก id และ class พร้อมๆกันลักษณะที่กำหนด จะเป็นไปตาม id
ตัวอย่าง
ul li.test{ color:blue; } /*012*/
li.test{color:red } /*011*/
คุณว่าจะได้สีอะไร
ลองนำโค้ดนี้ไป paste ในส่วน body ดู นะครับ
หากตัวเลขมีค่าเท่ากัน สิ่งที่ประกาศไว้ลำดับสุดท้ายจะมีความสำคัญสูงกว่าครับ
???????
จากที่กำหนดให้ ………..
a เป็นจำนวนของ id b เป็นจำนวนของ class และ c เป็นจำนวนของ tag html
อยากถามว่าดู ว่าตัวไหนเป้น class ตัวไหนเป็น tag html ????
#id1{xxx} —-> มีการกำหนด id อย่างเดียว 1 ตัว = 100
โดยสังเกตุจาก # และไม่มี Class ย่อยตาม
แล้ว….
UL UL LI.red {xxx} —-> a=0 b=1 c=3
LI.red {xxx} —-> a=0 b=1 c=1
LI {xxx} —-> a=0 b=0 c=1
นับ และ ดูอย่างไรว่าอันไหนเป็น class หรือ tag html ????????
“ตัวอย่างนี้ แสดงให้เห็นถึงความสำคัญครับ โดยปกติ css จะยึดถือบรรทัดล่างสุด ในกรณีที่เราเขียนซ้ำกัน”
div p.test{ color:blue; }
p.test{color:red }
“โดยปกติแล้ว ตัวหนังสือที่ได้ ควรจะเป็น สีแดง ซึ่งกำหนดไว้บรรทัดล่าง
แต่ในกรณีนี้ บรรทัดบน มีการกำหนดที่มากกว่า จึงมีความสำคัญกว่านั่นเองครับ”
…อธิบายใหม่แบบนี้เข้าใจเลยครับ…
ขอคุณครับ
PS. อยากให้ Webmaster เขียนติวเตอร์ การ Lay out
และ วาง Block ของภาพและข้อความ ต่างๆ บน Web แบบคร่าวๆ ด้วย CSS
ขอให้เป็นแหล่งความรู้ดีๆแบบนี้ต่อไปนะครับ……….