ในส่วนก่อนหน้าของซีรีส์ Cascading Style Sheets (CSS) 101 เราได้พูดคุยถึงวิธีจัดการกับกฎหลายข้อสำหรับองค์ประกอบหนึ่งๆ บทความนี้จะกล่าวถึงคุณสมบัติ CSS ที่สำคัญอีกประการหนึ่ง: ตัวเลือก ซึ่งสามารถใช้เพื่อเลือกองค์ประกอบภายในเพจเพื่อกำหนดสไตล์ของเว็บเพจ
ประเภทตัวเลือก
สไตล์ CSS มีหลายวิธีในการเลือกองค์ประกอบ วิธีการเลือกต่างๆ รวมถึงการเลือกผ่านตัวเลือกสากล ตัวเลือกประเภท ตัวเลือกคลาส ตัวเลือก ID ตัวเลือกบรรพบุรุษ ตัวเลือกสืบทอด ตัวเลือกพี่น้องที่อยู่ติดกัน และตัวเลือกแอตทริบิวต์
ที่นี่เราจะดูแต่ละวิธีแยกกัน (ยกเว้นพี่น้องและคุณลักษณะที่อยู่ติดกัน ซึ่งเราจะหารือในสัปดาห์หน้า) หมายเหตุ: การรองรับเบราว์เซอร์สำหรับตัวเลือก CSS นั้นไม่สอดคล้องกัน แต่คุณสามารถใช้คำแนะนำออนไลน์เพื่อตรวจสอบว่าตัวเลือกบางตัวทำงานในเบราว์เซอร์เป้าหมายของคุณหรือไม่
สากล
ตัวเลือกสากลช่วยให้คุณใช้สไตล์ได้ทั่วทั้งหน้า โดยพื้นฐานแล้ว สไตล์ไม่ได้ระบุองค์ประกอบ คลาส ฯลฯ ที่เฉพาะเจาะจง ดังนั้นจึงใช้กับองค์ประกอบทั้งหมดบนเพจ สิ่งนี้มีประโยชน์สำหรับการตั้งค่าสี แบบอักษร ฯลฯ
ตัวเลือกสากลสามารถใช้กับองค์ประกอบทั้งหมดบนเพจได้ แต่สามารถแทนที่ได้โดยตัวเลือกเฉพาะ ข้อกำหนด CSS ระบุว่าเครื่องหมายดอกจัน (*) สามารถใช้แทนตัวเลือกสากลได้ รายการ A สาธิตวิธีใช้ตัวเลือกสากลเพื่อตั้งค่าพื้นหลังและแบบอักษรเริ่มต้นสำหรับเพจ
พิมพ์
วิธีหนึ่งที่พบบ่อยที่สุดในการจัดสไตล์องค์ประกอบคือการใช้ประเภทขององค์ประกอบ ซึ่งหมายความว่าองค์ประกอบเฉพาะมีสไตล์ที่กำหนดไว้ และสไตล์นี้สามารถใช้ได้กับองค์ประกอบทั้งหมดของประเภทนั้น โดยไม่คำนึงถึงตำแหน่งขององค์ประกอบบนหน้าเว็บ ตัวอย่างในรายการ B สาธิตการใช้ตัวเลือกประเภทเพื่อจัดรูปแบบองค์ประกอบส่วนทั้งหมดบนเพจ
ด้วยตัวเลือกประเภทนี้ องค์ประกอบย่อหน้าทั้งหมดภายในใบไม้ (เว้นแต่จะถูกแทนที่โดยตัวเลือกที่เฉพาะเจาะจงมากกว่า) จะมีระยะขอบและข้อความสีแดงเฉพาะ ตอนนี้คุณสามารถสร้างคลาส CSS ของคุณเองเพื่อจัดการสไตล์องค์ประกอบเฉพาะบนเพจได้
ใจดี
ตัวเลือกคลาสช่วยให้คุณควบคุมได้มากกว่าตัวเลือกประเภทเมื่อต้องตัดสินใจว่าสไตล์ครอบคลุมอะไรบ้าง สไตล์ที่กำหนดโดยตัวเลือกคลาสสามารถนำไปใช้กับองค์ประกอบทั้งหมดที่มีแอตทริบิวต์คลาส โดยไม่คำนึงถึงตำแหน่งขององค์ประกอบบนเพจ ให้การควบคุมที่ดีเยี่ยมว่าองค์ประกอบใดจะได้รับสไตล์ ตัวอย่างในรายการ C สาธิตการใช้คลาสเพื่อจัดรูปแบบเฉพาะย่อหน้าแรกในเพจ ดังนั้นย่อหน้าแรกจึงมีแบบอักษรหยัก และย่อหน้าต่อไปนี้จะแตกต่างออกไป
ตัวเลือกคลาสไม่สามารถใช้องค์ประกอบที่สงวนไว้ HTML เช่นส่วนหัว, p, h1 ฯลฯ คุณยังสามารถใช้หลายคลาสสำหรับองค์ประกอบเดียวกันได้โดยคั่นด้วยช่องว่าง รายการ D แสดงให้เห็นถึงการใช้หลายคลาสเพื่อจัดรูปแบบย่อหน้าเฉพาะ
คุณสามารถรวมตัวเลือกคลาสเข้ากับตัวเลือกประเภทเพื่อจัดรูปแบบองค์ประกอบบางอย่างที่ได้รับการกำหนดคลาสได้ ในสถานการณ์สมมตินี้ เมื่อกำหนดสไตล์ ชื่อองค์ประกอบจะมีชื่อคลาสคั่นด้วยช่องว่าง ตัวอย่างในรายการ E สาธิตเทคนิคโดยที่องค์ประกอบเซกเมนต์ที่กำหนดชื่อคลาสเฉพาะเท่านั้นที่จะถูกจัดสไตล์ด้วยวิธีเดียว ในขณะที่ส่วนหัวที่มีชื่อคลาสเดียวกันจะถูกจัดสไตล์ด้วยวิธีอื่น ฉันจะลงรายละเอียดเพิ่มเติมเมื่อใช้แอตทริบิวต์ ID ขององค์ประกอบ