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 ดู นะครับ

หากตัวเลขมีค่าเท่ากัน สิ่งที่ประกาศไว้ลำดับสุดท้ายจะมีความสำคัญสูงกว่าครับ

Pseudo-classes and Pseudo-elements คือ class และ element พิเศษ มีวิธีเขียนได้ 2 รูปแบบ ดังนี้

selector: Pseudo-class { property: value }

or

selector: Pseudo-element { property: value }

selector.class: Pseudo-class { property: value }

or

selector.class: Pseudo-element { property: value }

Anchor Pseudo-classes เช่น

a:link { color: red }
a:hover {color:black; text-decoration:underline;}
a:active { color: blue; font-size: 125% }
a:visited { color: green; font-size: 85% }

a:link คือสถานะของลิ้งค์ a:hover คือ สถานะลิ้งค์เมื่อเอาเมาส์ไปแตะ a:active คือ สถานะเมื่อลิ้งค์หน้านั้นถูกเปิดอยู่ a:visited คือ สถานะลิ้งค์ที่ถูกเปิดและปิดไปแล้ว คุณสามารถกำหนด ให้มีรูปแบบต่างกันได้ ในกรณีนี้ เมื่อคุณ เขียน
<a href=”http://www.divland.com”> ลิ้งค์จะเป็นสีแดง เมื่อเอาเมาส์แตะ จะเป็นสีดำ มีเส้นใต้ หากเป็นการเปิดหน้าใหม่ คุณจะเห็นลิ้งค์ เป็นสีน้ำเงิน และเมื่อคุณปิดหน้านั้น ลิ้งค์ที่คุณได้กดไปแล้ว จะเป็นสีเขียว

First Line Pseudo-element
ในหน้าหนังสือพิมพ์ จะมีพาดหัวข่าวบรรทัดแรกตัวหนา ใหญ่ รูปแบบนั้น จะใช้ firstline

P:first-line {
font-variant: small-caps;
font-weight: bold }

First Letter Pseudo-element
ตามชื่อเลยครับ firstletter ก็คือการควบคุมตัวหนังสือตัวแรกนั่นเอง

P:first-letter { font-size: 300%; float: left }

ที่ใช้บ่อยๆ ก็คือการควบคุมลิ้งค์ ส่วน first line and first letter ก็ลองนำไปใช้กันดูครับ

Grouping คือ การรวมกลุ่มนั่นเอง เช่น

H1, H2, H3, H4, H5, H6 {
color: red;
font-family: sans-serif }

ลักษณะนี้หมายถึง  H1, H2, H3, H4, H5, H6จะมี สีแดง และฟ้อนต์แบบ sans-serif เอาไว้แยกส่วนที่ซ้ำๆกัน ออกมา เพื่อลดปริมาณโค้ด จากนั้น คุณค่อยกำหนดขนาดของ H1, H2, H3, H4, H5, H6 แต่ละอันไว้ด้านล่าง

คุณไม่จำเป็นต้องเขียน ซ้ำกันบ่อยๆ หากอันไหน มีลักษณะเหมือนกัน ก็แทรกเข้าไปแล้ว คั่นด้วย , ได้เลย

#leftnav, .rightnav a{
color:red;
}

แปลว่า ภายในขอบเขต id=”leftnav” และ ลิ้งค์ที่อยู่ใน ขอบเขต class=”rightnav” จะมีสีแดง

Contextual selectors การประกาศ class หรือ id ซ้อนกัน โดยเคาะ spacebar ดังตัวอย่าง

p ul{
background:#000000;
}

แปลว่า ul ที่อยู่ใน p จะมีแบ็คกราวด์ เป็นสีดำ
ส่วน
ul อื่นๆ ถ้าไม่อยู่ใน
p ก็จะเป็นปกติ

ใช้ในกรณีไหนล่ะ? ก็เช่นว่า เมื่อคุณสร้างขอบเขต div มา 1 อัน ต้องการทำเป็น กล่องสำหรับ content ประกอบด้วย thumbnail และเนื้อหานิดหน่อย สมมติว่า คุณต้องการให้รูป ในกล่องนี่มี border 2 px สีเทา โดยไม่ไปกระทบรูปอื่นๆทั้งหมดใน page ทำไงล่ะ คุณอาจจะเขียน class ขึ้นมาว่า

.borderimage{
border-width:2px;
border-color:grey;
}

แล้วใส่ คลาส นี้ ไปในทุกรูป ที่คุณต้องการให้มี border แต่จะดีกว่านั้น หากเราเขียนแบบนี้

#contentbox img{
border-width:2px;
border-color:grey;
}

เท่านี้ รูป ทุกรุป ที่อยู่ในขอบเขต

<div id=”contentbox”>
<img>
<img>
</div>

ก็จะมี border 2px สีเทา แบบนี้ทำให้คุณลดการโค้ดลงกว่าเดิม คุณสามารถเขียน ซ้อนกัน 3 หรือ 4 ชั้น ได้ ไม่มีปัญหา ถ้าคุณจะไม่งงซะเอง

คราวที่แล้วเราพูดถึง simple selectors ไปแล้ว มาเพิ่มเติมกันต่อ simple selectors สามารถที่จะมี class และ id ที่ต่างกันได้ ตัวอย่าง

p.calss1{ color:#ffffff } หรือ p.calss2{ color:#000000 }

ตัวอย่าง มี 2 คลาส ชื่อว่า class1 และ class2เมื่อนำไปใช้ในไฟล์ html จะเป็นดังนี้

<p class=”class1″>จะได้ตัวหนังสือสีขาว </p>

หรือ

<p class=”class2″>จะได้ตัวหนังสือสีดำ </p>

อีกรูปแบบหนึ่งคือกำหนดแต่คลาสอย่างเดียว ไม่ต้องมี selectors เช่น

.small { font-size:10px }

รูปแบบนี้สามารถ นำคลาสไปใส่ที่ใดก็ได้ ภายในขอบเขตนั้น ก็จะมี ฟ้อนต์เท่ากับ 10 เช่น

<div class=”small”> ตัวหนังสือ </div>

จะสังเกตุเห้นว่า class จะมี . นำหน้า แต่ ID นั้น จะใช้ # นำหน้า ตัวอย่างการกำหนด ID เช่น

#bgw { backgroung-colour:#ffffff }

เมื่อนำไปใช้

<p id=”bgw”> ภายในนี้จะมี bg สีขาว </p>

แล้ว ID กับ Class ใช้ในกรณีไหนล่ะ? ID จะใช้กับ สิ่งที่มีเพียงอันเดียว มักใช้กับส่วนที่เป็น layout เช่น #header #content #footer ส่วน class ใช้เมื่อ จะมีการทำซ้ำหลายๆครั้ง เช่น .boxcontent

การตั้งชื่อ class และ id ก็ควรให้มีความสัมพันธ์กับส่วนที่นำไปใช้ และควรเป็นตัวพิมพ์เล็กทั้งหมด ไม่ควรใช้ _ และ ตัวเลข นำหน้าชื่อ class และ id เพราะอาจมีปัญหากับเบราเซอร์รุ่นเก่าบางชนิดครับ