สรุปเนื้อเรื่อง Tomb Raider : Underworld
02/05/2014รางบัว102 – ขอบคุณที่รักกัน
03/05/2014สรุปเรื่อง Selectors พอสังเขป ประกอบด้วย
1. Type Selector
การเลือกแบบนี้ก็คือเลือก Element ซึ่งผมเข้าใจว่ามันเป็น Tag นั่นแหละ เช่น <body>, <h1>, <p>, <table>
ตัวอย่าง 1
รูปแบบ element
2. Class Selector
ใช้คลาส หน้า Selector จะตามด้วย . เช่น .myclass โดยสามารถเรียกใช้ได้ตลอด
ตัวอย่าง1
รูปแบบ .class
ผลลัพธ์ : ใน div ที่เรียกใช้คลาส myclass พื้นหลังจะเป็นสีเขียว
นอกจากนี้ยังมีลักษณะการใช้แบบอื่น
ตัวอย่าง 2 ใช้ร่วมกับ Type Selector
รูปแบบ element.class
ผลลัพธ์ : คลาสชื่อ myclass จะแสดงผลเฉพาะ <div> เท่านั้น แม้ว่า <p> จะเรียกใช้คลาส myclass ก็ตาม แต่ก็ไม่มีผลอะไร
3. ID Selector
การใช้ ID จะใช้เฉพาะเจาจง อะไรที่อยากใช้เพียงครั้งเดียว เช่นส่วนขอเมนู ส่วนของเนื้อหา อยากจะให้เป็นสีนี้เท่านั้นอะไรแบบนี้ โดย ID จะมีลำดับความสำคัญสูงกว่า Class
ตัวอย่าง
รูปแบบ #id
ผลลัพธ์ : ตามรูป
4. Universal Selector
เป็นการเลือกทั้งเอกสารให้มีรูปแบบตามที่กำหนด
ตัวอย่าง
รูปแบบ *
ใช้โค้ดจากข้อ 3 แล้วเพิ่มตัวเอง
* {
font-style:italic;
}
ผลลัพธ์ : จะเห็นว่าตัวอักษรทั้งหมดนั้นเอียง ทั้ง h1, h2, h3
5. Descendant Selector
จะเกี่ยวกับการสืบทอดรูปแบบไปยังลูก หลานต่อๆ ไป
รูปแบบ element1 element2 element…
ผลลัพธ์ : จะเห็นว่า h1 ที่อยู่ใน div เท่านั้นที่เปลี่ยนสี h1 อยู่นอก div ไม่เปลี่ยนแปลง
6. Pseudo Classes
เป็น Selectors ที่มีหลายตัวมาก ที่เคยเห็นก็จะเกี่ยวกับการคลิกลิ้งนี่แหละ โดยมี
:link กำหนดรูปแบบของลิ้งที่ยังไม่มีการคลิก
:visited เมื่อลิ้งถูกคลิกไปแล้ว
:hover เมื่อเลื่อนเมาส์มาอยู่เหนือลิ้ง
:active ขณะคลิกลิ้ง หรือเมาสืถูกกดลง
Selector ยังมีอีกมากมาย ทำไมมันเยอะอย่างนี้ … หาดูได้จากด้านล่าง
แค่ 2 วันกะ CSS เริ่มมึนแล้วหง่ะ -__- … Zzz
