Online Society Udonthani Thailand

Inheritance หากแปลตามตัวก็คือ การสืบทอด propertyบางตัว จะมีผลกับสิ่งที่อยู่ข้างในทั้งหมด เช่น
body{
color:green;
margin:5px;
}
สื่งที่อยู่ใน body จะมีฟ้อนต์เป็น สีเขียว ทั้งหมด แต่ margin จะทำเฉพาะ body เท่านั้น ไม่สืบทอดต่อไป

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 เจ้าขอรับ

สำหรับผู้ที่กำลังศึกษาอยู่นะครับ ก็ติดตามกันได้ครับ จะนำมาฝากกันเรื่อยๆ จนถึงกระบวนการการสร้างเว็บกันเลยทีเดียว ง่ายๆ ไม่ได้ยากเย็นนะครับ