StyleSheet » » Class & ID | Grouping | Refference Properties

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

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

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

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

Contextual Selection :

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

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

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

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

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