เริ่มต้น CSS
CSS ใช้กฎการจับคู่รูปแบบเพื่อกำหนดลักษณะที่ใช้กับองค์ประกอบในเอกสาร รูปแบบเหล่านี้เรียกว่า selectors และมีตั้งแต่ชื่อแท็ก (เช่น p เพื่อให้ตรงกับแท็กย่อหน้า) กับรูปแบบที่ซับซ้อนมากที่ตรงกับส่วนที่เฉพาะเจาะจงของเอกสาร (ตัวอย่างเช่น p # myid> b.highlight จะจับคู่แท็ก b กับ ชั้นของไฮไลท์ที่เป็นเด็กของวรรคกับ id myid)
ตัวเลือก CSS เป็นส่วนหนึ่งของสไตล์ CSS ที่ระบุว่าส่วนใดของหน้าเว็บควรถูกจัดรูปแบบ ตัวเลือกประกอบด้วยคุณสมบัติอย่างน้อยหนึ่งรายการที่กำหนดวิธีการจัด รูปแบบ HTML ที่ เลือก
ตัวเลือก CSS
มีหลายประเภทของ selectors:
- type selectors- จับคู่องค์ประกอบเฉพาะ
- class selectors- จับคู่องค์ประกอบกับคลาสที่เฉพาะเจาะจง
- ตัวเลือกรหัส - จับคู่องค์ประกอบที่มี ID เฉพาะ
- ตัวเลือกลูกหลาน - องค์ประกอบที่มาพร้อมกับลูกหลานขององค์ประกอบเฉพาะ
- child-selectors- จับคู่องค์ประกอบที่เป็นลูกขององค์ประกอบเฉพาะ
- ตัวเลือกสากล - จับคู่องค์ประกอบใดก็ได้
- ลูกน้องใกล้เคียง selectors องค์ประกอบการจับคู่ทันทีที่นำหน้าโดยองค์ประกอบเฉพาะ
- attribute selectors-matching elements ที่มีแอตทริบิวต์หรือค่าแอตทริบิวต์ที่ระบุ
- pseudo-class selectors- จับคู่องค์ประกอบที่มีชั้น pseudo เฉพาะ
- องค์ประกอบ selectors pseudo - จับคู่องค์ประกอบที่มีคุณสมบัติองค์ประกอบ pseudo - เฉพาะ
ฟอร์แมต CSS Styles และ CSS Selectors
รูปแบบของสไตล์ CSS มีลักษณะดังนี้:
selector {property สไตล์: สไตล์; }
แยก selectors หลายตัวที่มีลักษณะเดียวกันกับเครื่องหมายจุลภาค นี้เรียกว่าการจัดกลุ่มตัวเลือก ตัวอย่างเช่น:
selector1 , selector2 {คุณสมบัติสไตล์: สไตล์; }
การจัดกลุ่ม selectors เป็นกลไกชวเลขเพื่อให้รูปแบบ CSS ของคุณกะทัดรัด
การจัดกลุ่มข้างต้นจะมีผลเช่นเดียวกับ:
selector1 {คุณสมบัติสไตล์: สไตล์; }
selector2 {คุณสมบัติสไตล์: สไตล์; }
เสมอทดสอบ Selectors CSS ของคุณ
เบราว์เซอร์บางตัวไม่สนับสนุนตัวเลือก CSS ทั้งหมด ดังนั้นอย่าลืมทดสอบตัวเลือกของคุณในเบราว์เซอร์เป็นจำนวนมากในระบบปฏิบัติการมากที่สุดเท่าที่จะทำได้ แต่ถ้าคุณใช้ตัวเลือก CSS 1 หรือ CSS2 คุณควรจะปรับ