กฎชั้นสูงของ CSS กฎชั้นสูงไม่ได้หมายความว่ามันจะใช้ยากหรือพิศดารอลังการแต่อย่างใด ตรงข้ามครับ มันกลับเป็นเทคนิคที่ช่วยให้การใช้ CSS สะดวกขึ้น สบายขึ้น ง่ายขึ้นต่างหาก

Grouping : รวมกันไว้ใช้สบาย

กฎ Grouping ช่วยให้เราสามารถกำหนด Style Sheet ของหลายๆ Class หลายๆ ID และหลายๆ Tag ที่มีส่วน เหมือนกันในครั้งเดียว โดยใช้เครื่องหมายคอมม่า (,) คั่นระหว่าง Class หรือ ID หรือ Tag แต่ละตัวเท่านั้นเอง นอกจากนี้ ถ้ามีบางส่วนที่ไม่เหมือนกัน ยังสามารถกำหนดเพิ่มลงไปด้วยวิธีปกติได้อีกด้วย

H1,H2,H3 { text-decoration: underline;               font-family:Comic Sans Ms,Cursive;               }     H1 {color:Blue}     H2 {color:Red}     H3 {color:Green}

ที่ระบายเป็นสีแดงไว้คือส่วนที่เหมือนกันของคำสั่ง H1, H2, H3 ส่วนด้านล่างเป็นส่วนแตกต่างของคำสั่งทั้งสาม มีสีต่างกัน ลองเอาไปใช้กันดู

Contextual Selection :

กฎ Contextual Selection ช่วยให้เราสามารถกำหนด Style ของ Tag ที่ซ้อนอยู่ใน Tag ได้ โดยในการเขียน Style S heet เราจะใช้ช่องว่าง " " คั่นระหว่าง Tag ทั้ง 2 เช่น ถ้าเราต้องการกำหนดให้ ... ที่อยู่ใน ... มีสีแดง ก็สามารถทำได้ดังตัวอย่าง

U B {color:red}

Inheritance : สืบทอดชั่วลูกชั่วหลาน

Inheritance หมายถึงการสืบทอดคุณสมบัติ นั่นก็คือ คุณสมบัติต่างๆ เช่น Font, สี, ขนาดของส่วนที่อยู่ใน Tag จะถูกสืบทอดมาจากส่วนที่ครอบมันอยู่ และคุณสมบัติเหล่านั้นจะถูกรวมเข้ากับคุณสมบัติของตัวเอง แล้วสืบทอดต่อไป ยังส่วนที่มันครอบอยู่ เป็นเช่นนี้ไปเรื่อยๆ สมมุติว่าผมมี Code ดังนี้

<P>Nicole     <U>Marsha<i>Beau</i>Tong<U>     Nadia</P>

Nicole และ Nadia จะมีเพียงคุณสมบัติของ <P> แต่ Marsha และ Tong จะได้รับคุณสมบัติที่สืบทอดมาจาก <P> รวมกับคุณสมบัติของ <U> และคุณสมบัติทั้งหมดจะถูกถ่ายทอดไปยัง Beau ทำให้ Beau มีทั้งคุณสมบัติของ <P>, <U>, <i>

กฎข้อนี้ถูกใช้เป็นปกติอยู่แล้วครับ แม้ในการเขียน HTML ธรรมดาก็เป็นเช่นนี้ แบบนี้เข้าทำนองรู้ไว้ใช่ว่าครับ

More Technics of StyleSheet » » Class & ID | Grouping | Refference Properties