สรุปเนื้อเรื่อง Tomb Raider : Underworld

02/05/2014

รางบัว102 – ขอบคุณที่รักกัน

03/05/2014

พื้นฐาน CSS เรื่อง Selectors

02/05/2014
empty image
empty image

สรุปเรื่อง Selectors พอสังเขป ประกอบด้วย

1. Type Selector

การเลือกแบบนี้ก็คือเลือก Element ซึ่งผมเข้าใจว่ามันเป็น Tag นั่นแหละ เช่น <body>, <h1>, <p>, <table>
ตัวอย่าง 1
รูปแบบ element

ผลลัพธ์ : ในส่วนของ <body> ซึ่งเป็นพื้นหลังของเอกสารจะมีสีเขียว และในส่วนของ div จะเป็นสีแดง แต่ถ้าไม่กำหนดรูปแบบ ใน div มันก็จะเป็นสีเขียว

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

Ref.
http://www.w3schools.com/cssref/css_selectors.asp