
Commentการคอมเม้นในไฟล์ .css จะใช้ /* เป็นการเปิด และ */ เป็นการปิด
เช่น
/* COMMENTS CANNOT BE NESTED */
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 ดู นะครับ
หากตัวเลขมีค่าเท่ากัน สิ่งที่ประกาศไว้ลำดับสุดท้ายจะมีความสำคัญสูงกว่าครับ
ขอบคุณบทความดีๆจาก Divland.com เจ้าขอรับ
สมัครสมาชิกคลับ เพื่อตอบกระทู้









