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

Website AB191 update story CSS Of CSS CSS : ลำดับความสำคัญของ style ใน CSS Saturday, November 23, 2013 Story at now !!!

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

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

ถ้าตามที่ผมจำมาตลอดนะครับ ID จะใช้ครั้งเดียวใน 1 หน้าเว็บ ส่วน class จะใช้กี่ครั้งก็ได้ การที่ ID ใช้ครั้งเดียวใน 1 หน้าเว็บนั้นจะมีผลตอนที่เราเขียน script ต่าง ๆ (นี่คือที่ผมเข้าใจมาตลอดนะครับ ถูกผิดยังไง comment ด้านล่างบอกผมด้วยนะครับ >_<) ดังนั้นเวลาผมเขียน Code จะวางแผนว่าอะไรที่จะตั้งอะไรเป็น ID และอะไรเป็น class อย่างเช่นตัวอย่างแบบนี้

01	<div id="header">

02	<h2 class="title-text">Header</h2>

03	<p>Hello World in Header</p>

04

</div>

05	<div id="main">

06	<h3 class="title-text">Main</h3>

07	<p>Hello World in Main</p>

08

</div>

09	<div id="footer">

10	<h4 class="title-text">Footer</h4>

11	<p>Hello World in Footer</p>

12

</div>

ผมเห็นว่าใน 1 หน้าเว็บของเรานั้น จะมี Header, Main และ Footer ที่เดียวแน่ ๆ เลยตั้งให้เป็น ID และข้อความที่เป็นหัวข้อมีหลายที่เลยตั้งให้เป็น class ชื่อ title-text

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

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

1	#header {background:#60A2AA;color:#FFFFFF;padding:10px;}

2	#main {background:#CCE2B5;color:#7CAB6A;padding:20px;}

3	#footer {background:#FAF2E5;color:#EC9974;padding:10px;}

4

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

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

ผลลัพธ์จาก HTML CSS ที่เราเขียนขึ้นมา

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

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

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

2

3	.title-text {font-size:24px;}

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

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

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

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

  1	<div id="header" style="background:#000000;">

• 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 ในทันที ลองมาดูการรวมค่านะครับ

1	ul#nav li.active a

จะมีค่าเท่ากับ 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

1	#header #nav .smalltext

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

1	<li style="color:#B23D61">

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

CSS : !important

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

01	<div id="header" style="background:#000;">

02	<h2 class="title-text">Header</h2>

03	<p>Hello World in Header</p>

04

</div>

05	<div id="main">

06	<h3 class="title-text">Main</h3>

07	<p>Hello World in Main</p>

08

</div>

09	<div id="footer">

10	<h4 class="title-text">Footer</h4>

11	<p>Hello World in Footer</p>

12

</div>

1	#header {background:#60A2AA;color:#FFFFFF;padding:10px;}

2	#main {background:#CCE2B5;color:#7CAB6A;padding:20px;}

3	#footer {background:#FAF2E5;color:#EC9974;padding:10px;}

4

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

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

เป็นพื้นหลังสีดำตามค่าความสำคัญ

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

1	#header {background:#60A2AA !important;color:#FFFFFF;padding:10px;}

2	#main {background:#CCE2B5;color:#7CAB6A;padding:20px;}

3	#footer {background:#FAF2E5;color:#EC9974;padding:10px;}

4

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

!important ไม่สนใจใครสำคัญ ชั้นสำคัญสุด

Update Story at Saturday, November 23, 2013 In Category CSS Story CSS CSS : ลำดับความสำคัญของ style ใน CSS