Categories
CSS HTML

CSS : ลำดับความสำคัญของ style ใน CSS

ในการเขียน CSS เราคงสงสัยว่าทำไมถึงมีการเขียนแยกเป็น ID เป็น class จะใช้ ID อย่างเดียวเลยได้มั้ย หรือจะใช้ class อย่างเดียวเลยได้มั้ย มาไขข้อข้องใจกันดีกว่า

ในการเขียน CSS เราคงสงสัยว่าทำไมถึงมีการเขียนแยกเป็น ID เป็น class จะใช้ ID อย่างเดียวเลยได้มั้ย หรือจะใช้ class อย่างเดียวเลยได้มั้ย มาไขข้อข้องใจกันดีกว่า

HTML : ID กับ Class ต่างกันยังไง

ถ้าตามที่ผมจำมาตลอดนะครับ ID จะใช้ครั้งเดียวใน 1 หน้าเว็บ ส่วน class จะใช้กี่ครั้งก็ได้ การที่ ID ใช้ครั้งเดียวใน 1 หน้าเว็บนั้นจะมีผลตอนที่เราเขียน script ต่าง ๆ (นี่คือที่ผมเข้าใจมาตลอดนะครับ ถูกผิดยังไง comment ด้านล่างบอกผมด้วยนะครับ >_<) ดังนั้นเวลาผมเขียน Code จะวางแผนว่าอะไรที่จะตั้งอะไรเป็น ID และอะไรเป็น class อย่างเช่นตัวอย่างแบบนี้ [html] <div id="header"> <h2 class="title-text">Header</h2> <p>Hello World in Header</p> </div> <div id="main"> <h3 class="title-text">Main</h3> <p>Hello World in Main</p> </div> <div id="footer"> <h4 class="title-text">Footer</h4> <p>Hello World in Footer</p> </div> [/html] ผมเห็นว่าใน 1 หน้าเว็บของเรานั้น จะมี Header, Main และ Footer ที่เดียวแน่ ๆ เลยตั้งให้เป็น ID และข้อความที่เป็นหัวข้อมีหลายที่เลยตั้งให้เป็น class ชื่อ title-text

CSS : ID กับ Class ต่างกันยังไง

คราวนี้มาดูในกรณีที่เราจะเขียน CSS นะครับ สมมติผมจะเขียน CSS ให้กับ HTML ด้านบนนะครับ

[css]

#header {background:#60A2AA;color:#FFFFFF;padding:10px;}
#main {background:#CCE2B5;color:#7CAB6A;padding:20px;}
#footer {background:#FAF2E5;color:#EC9974;padding:10px;}

.title-text {font-size:18px;}

[/css]

จะเห็นข้อแตกต่างว่า ถ้าเป็น ID แล้วเวลาใช้งาน CSS เราจะเขียนนำด้วยเครื่องหมาย # และถ้าเป็น class เราจะเขียนนำด้วย . ในการใช้งาน ผลลัพธ์ที่ได้จะออกมาเป็นแบบนี้นะครับ

CSS : ลำดับความสำคัญของ style ใน CSS [1]
ผลลัพธ์จาก HTML CSS ที่เราเขียนขึ้นมา

CSS : บนล่างก็มีผลนะ

CSS นั้นจะมองความสำคัญของตัวที่เขียนด้านล่าง มากกว่าด้านบน อย่างเช่น

[css]
.title-text {font-size:18px;}

.title-text {font-size:24px;}
[/css]

แบบนี้ผลลัพธ์ที่เราได้คือ class=”title-text” จะมีขนาดตัวอักษร 24px ตามลำดับที่อยู่ด้านล่่าง

CSS : ID class ใช้คิดค่าความสำคัญ

ผมถือดีตั้งชื่อมันเองว่า ค่าความสำคัญ แต่จริง ๆ แล้วมันเรียกว่า Specificity Value โดยมันแบ่งคะแนนเป็นดังนี้

  • inline-style มีค่าความสำคัญ 1,0,0,0 ซึ่งมีค่าความสำคัญสูงสุด โดย inline-style ก็คือการใส่ style เข้าไปใน HTML อย่างเช่น

    [html]
    <div id="header" style="background:#000000;">
    [/html]

  • ID ค่าความสำคัญนั้นคือ 0,1,0,0
  • class ค่าความสำคัญนั้นคือ 0,0,1,0
  • element ต่าง ๆ อย่างเช่น h1,h2,div หรือ p ค่าความสำคัญนั้นคือ 0,0,0,1

การรวมค่านั้น ก็จะดูจากจำนวนแต่ละแบบมารวมกัน ซึ่ง 0,1,0,0 นั้นก็มีค่ามากกว่า 0,1,12,0 นะครับ เหมือนต่อให้มีกี่ class ก็แล้วแต่ แต่ถ้ากำหนด ID มาให้ตัวนึง ก็จะยึด style จาก ID ในทันที ลองมาดูการรวมค่านะครับ

[css]
ul#nav li.active a
[/css]

จะมีค่าเท่ากับ 0,1,1,3 โดย 0,1,0,0 มาจาก ID 0,0,1,0 มาจาก class และ 0,0,0,3 มาจาก ul,li และ a ดังนั้นจึงรวมกันมีค่าเท่ากับ 0,1,1,3

[css]
#header #nav .smalltext
[/css]

จะมีค่าเท่ากับ 0,2,1,0 โดย 0,2,0,0 มาจาก ID header และ nav ส่วน 0,0,1,0 นั้นมาจาก class

[html]
<li style="color:#B23D61">
[/html]

จะมีค่าเท่ากับ 1,0,0,0 โดยมาจาก inline-style

CSS : !important

แต่ก็เหมือนการ์ตูนบางเรื่องที่ตอนแรกก็มีบอส แต่ตอนหลังก็มีบอสที่ใหญ่กว่า เหมือนกันที่ inline-style อาจจะสำคัญที่สุด แต่ถ้าเราใส่ !important ลงไป ก็จะปรากฎว่า style ตัวนั้นจะมีความสำคัญที่สุดแทน โดยให้คิดว่ามันมีค่าเป็น 1,0,0,0,0 อย่างเช่น

[html]
<div id="header" style="background:#000;">
<h2 class="title-text">Header</h2>
<p>Hello World in Header</p>
</div>
<div id="main">
<h3 class="title-text">Main</h3>
<p>Hello World in Main</p>
</div>
<div id="footer">
<h4 class="title-text">Footer</h4>
<p>Hello World in Footer</p>
</div>
[/html]

[css]
#header {background:#60A2AA;color:#FFFFFF;padding:10px;}
#main {background:#CCE2B5;color:#7CAB6A;padding:20px;}
#footer {background:#FAF2E5;color:#EC9974;padding:10px;}

.title-text {font-size:18px;}
[/css]

จาก Code เราจะรู้ทันทีว่าพื้นหลังต้องเป็นสีดำแน่ ๆ เพราะมี inline-style อยู่ที่ ID header

CSS : ลำดับความสำคัญของ style ใน CSS [2]
เป็นพื้นหลังสีดำตามค่าความสำคัญ

แต่ถ้าเราใส่ !important ลงไป

[css]
#header {background:#60A2AA !important;color:#FFFFFF;padding:10px;}
#main {background:#CCE2B5;color:#7CAB6A;padding:20px;}
#footer {background:#FAF2E5;color:#EC9974;padding:10px;}

.title-text {font-size:18px;}
[/css]

CSS : ลำดับความสำคัญของ style ใน CSS [3]
!important ไม่สนใจใครสำคัญ ชั้นสำคัญสุด

14 replies on “CSS : ลำดับความสำคัญของ style ใน CSS”

สุดยอดมากๆ เลย อาจารย์ต่ายดำ

ผมลืมหมดแล้ว
จะกลับมาทำ เอาอีกเยอะๆ นะพี่
เป็นกำลังใจให้ 555

กรั้ก เอะอะเค้าก็ใส่ !important ไว้ก่อนเหมือนกัน -.-

งง ตรง “CSS : ID class ใช้คิดค่าความสำคัญ” มันดูยังไงหรอครับ มึน! ><

งงยังไงเหรอครับ ก็นับตามค่าความสำคัญตาม step แบบที่เขียนไว้อะครับ

ตอนนี้ยังไม่รู้ว่างงอะไร เลยอธิบายให้ไม่ถูกอะครับ

อ๋อๆ ดูเข้าใจแล้วครับ ^^

ผมหมายถึงค่าของ  1,0,0,0 ตอนแรกงงว่าแต่ละหลักมันนับยังไง ^__^

แต่ว่า เรานับค่าความสำคัญแล้วเอาไปใช้ประโยชน์ยังไงอะครับ ><

เข้าใจแล้วก็ดีละครับ ขอบคุณที่มาคอมเม้นต์นะครับ

คือยากถามว่า ผมมี banner ใน div id=”head” ผมกำหนด padding-left:11em; ทีนี้มันจะล้น banner อะครับ ผมเองฝึกหัดอยู่ เลยอยากขอปรึกษาหน่อยครับ

Leave a Reply

Your email address will not be published. Required fields are marked *