Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer]

ลำดับตอนที่ #90 : [lesson] CSS > Id & Class ... ว่าด้วย Selector

หลังยังไม่ได้ก่อนตอนแรก แวะไปอ่านก่อนนะคะ...


อ้างอิง
http://www.w3schools.com/css/css_id_class.asp


รู้จักกับ selector, property, และ value กันไปแล้ว เราก็จะมาดูต่อกันว่าจะเรียกใช้ selector ได้อย่างไร

เราสามารถกำหนด selector ของเราได้สองวิธี เรียกว่า id กับ class
(ไอดีไม่ได้หมายถึง My.iD นะ)


The id Selector
ไอดีซีเลกเตอร์จะมีเพียงหนึ่งเดียวเท่านั้น เป็นเหมือนชื่อที่ในหน้านั้นจะมีไม่ซ้ำกัน
ไอดีซีเลกเตอร์จะขึ้นต้นด้วยเครื่องหมาย #

มาดูตัวอย่างกัน...

<style type="text/css">
#head_module_name {display: none;}
 </style>

จากโค้ดตัวอย่าง #head_module_name ก็คือ selector ประเภท id



The class Selector
คลาส... ให้คิดถึงห้องเรียน ก็เหมือนเป็นกลุ่มของคนที่มารวมๆ กัน
คลาสซีเลกเตอร์สามารถกำหนดสไตล์ของ html elements หลายๆ อันให้แสดงผลออกมาเหมือนกันได้
คลาสซีเลกเตอร์จะมี . (จุด) นำหน้า

ตัวอย่าง...

<style type="text/css">
.font2 {
    color:#000000;
    font-size: 14px;
    font-family: "MS Sans Serif";
}
</style>

.font2 เป็น class selector ค่ะ


สำหรับ selector ที่ไม่มีทั้ง # หรือ . นำเลย อย่างเช่น
body {background: url(...);}

จะทำหน้าที่ครอบคลุม html element ชนิดนั้นทั้งหมดค่ะ



ปิดท้ายด้วยภาพ selector โดยรวมที่สำคัญทั้งหมดจากน้องต้นกล้า Fantasier นะคะ
http://writer.dek-d.com/Fantasier/story/viewlongc.php?id=519203&chapter=36

คลิกที่รูปเพื่อดูภาพใหญ่ได้เลยค่ะ