<:: Closed { CSS ROOM }

ลำดับตอนที่ #52 : CSS Lesson >> #6 Selector ที่ไม่มี # และ . นำหน้า และ Selector ที่มี :

ตอนนี้ัถือว่าเป็นตอนที่สำคัญของ CSS Lesson ตอนหนึ่งก็ได้
ทีแรกผมบอกว่า จะมี # และ . นำหน้าเท่านั้น
แต่นั่นหมายถึงแท็กจะต้องมีการกำหนด id หรือ class

id เมื่อนำมาทำเป็น Selector จะต้องมี # นำหน้า
ส่วน class เมื่อนำมาทำเป็น Selector จะต้องมี . นำหน้า
ทีนี้ บางคนอาจจะเคยเห็น

body {background: url(...);}

body ไม่เห็นจะมี # หรือ . เลย!?!!
แต่มันยังคงเป็น Selector เพราะอะไร ?
นั่นเป็นเพราะว่า body เป็นแท็ก แต่ไม่ได้กำหนดชื่อ id หรือ class
ในกรณีนี้ มันจะครอบคลุมแท็กทั้งหมด ที่เรานำมาเป็น selector เลย
เช่น ถ้ามีแท็ก <a> อยู่ 10 อัน แล้วแล้วเอามาเป็น

a {display: none;}

อันที่มี <a> ทั้งหมด ก็จะถูกลบทิ้งไปจากหน้า ครับ ^^
ทีนี้การใช้แบบนี้ ผมจะไม่เน้นเท่าไหร่นะครับ
เพราะต้องเข้าใจภาษา HTML ก่อน ซึ่งเป็นเรื่องยุ่งยากพอควร

ต่อไปเป็น Selector ที่มี : อยู่
เห็นบ่อยๆ คือ a:link a:hover a:visited a:active
พวกนี้คือการกำหนด เมื่อแท็กนั้นๆ อยู่ในสถานะต่างๆ
ขอพูดถึง hover อย่างเดียวนะครับ

เมื่อใส่ :hover ไปข้างหลัง Selector ที่มีอยู่เดิม
จะเป็นการกำหนดว่า เมื่อนำเมาส์ไปชี้ แล้วจะเกิดอะไรขึ้น
เช่น สมมุติเรามีแท็ก div ที่มี id ว่า crazytongla
แล้วก็มีพื้นหลังที่เว็บ http://www.ctongla.co.cc/crazytongla.jpg
(ไม่ต้องเข้าครับ ไม่มีจริง)

เราก็เขียน css กำหนดให้่มันมีพื้นหลังก่อน

<style type="text/css">
#crazytongla {background: url(http://www.ctongla.co.cc/crazytongla.jpg);}
</style>

ทีีนี้ถ้าจะให้ชี้แล้วเป็นรูปควาย เราก็เตรียมรูปความไว้ แล้วเอา url มา แล้วจัดการ...

<style type="text/css">
#crazytongla:hover {background:url(http://www.ctongla.co.cc/buffalotongla.png);}
</style>

แบบนี้ก็ได้แล้วครับ

มีอะไร ถามได้ครับ เม้นด้วยจะดีมากๆๆๆๆๆๆๆ