ตรวจสอบตัวเลือก
ตัวเลือก CSS ถูกใช้เพื่อเลือกองค์ประกอบที่จะใช้สไตล์ ตัวเลือกนําเสนอความยืดหยุ่นและพลังอันยอดเยี่ยม ตัวเลือกช่วยให้คุณสามารถนําสไตล์ไปใช้กับองค์ประกอบทั้งหมดหรือองค์ประกอบเฉพาะหนึ่งรายการและแม้แต่ตัวอักษรที่ระบุตัวเดียว
มีตัวเลือกชนิดหลักสามชนิด:
- องค์ ประกอบ
- เรียน
- รหัส
เมื่อใช้ตัวเลือกเหล่านี้ คุณจะสามารถนําสไตล์ไปใช้กับองค์ประกอบจํานวนมากหรือไม่กี่รายการได้
ตัวเลือกองค์ประกอบ
ตัวเลือกองค์ประกอบนําไปใช้กับองค์ประกอบทั้งหมดที่มีแท็กนั้น องค์ประกอบ HTML ใด ๆ สามารถใช้เป็นตัวเลือกองค์ประกอบได้ การใช้ h1 ช่วยให้คุณสามารถปรับเปลี่ยนองค์ประกอบ h1 ทั้งหมดบนหน้าได้
h1 {
/* style */
}
ตัวเลือกคลาส
องค์ประกอบ HTML ทั้งหมดช่วยให้คุณสามารถเพิ่มแอตทริบิวต์ class ได้
class ถูกใช้เพื่อจัดกลุ่มองค์ประกอบเข้าด้วยกัน และช่วยให้คุณสามารถทําเครื่องหมายสําหรับการใช้การตั้งค่า CSS
เมื่อสร้างเรซูเม่ คุณมีส่วนสําหรับการศึกษาและประวัติการจ้างงานของคุณ การใช้คลาสจะช่วยให้คุณสามารถจัดรูปแบบองค์ประกอบเหล่านั้นด้วยสไตล์เดียวกันได้
<div class="history">
<h2>Employer name</h2>
<h3>Job title</h3>
<h3>3 Jun 19 - 8 Jun 21</h3>
</div>
<div class="history">
<h2>School name</h2>
<h3>Major</h3>
<h3>Sep 2014 - May 2018</h3>
</div>
ในตัวอย่างก่อนหน้านี้ คุณอาจต้องการให้การจัดรูปแบบสําหรับแต่ละ div เหมือนกับที่แสดงข้อมูลประเภทเดียวกัน โดยการทําเครื่องหมายสององค์ประกอบ div ด้วยคลาสเดียวกันคุณสามารถใช้สไตล์ CSS เดียวกันในแต่ละองค์ประกอบได้
หากต้องการระบุคลาสใน CSS คุณต้องนําหน้า . ไว้ด้านหน้าชื่อ ในตัวอย่างของเรา คุณจะใช้ .history
.history {
/* your styles */
}
หากใช้ไฟล์ CSS คุณจะเขียนคํานิยามลักษณะคลาสในไฟล์ CSS แอตทริบิวต์คลาสใน HTML อ้างอิงข้อกําหนดจากไฟล์ CSS
คลาส Pseudo
คลาส Pseudo ช่วยให้คุณสามารถระบุองค์ประกอบตามตําแหน่งที่ตั้งของพวกเขาบนหน้าหรือวิธีการที่ผู้ใช้โต้ตอบกับองค์ประกอบเหล่านั้น
เมื่อผู้ใช้โต้ตอบกับหน้าเว็บสถานะขององค์ประกอบต่างๆจะเปลี่ยนไป ผู้ใช้สามารถวางเมาส์เหนือรายการได้ และคุณต้องการให้สีเปลี่ยนแปลงเมื่อเลื่อนเมาส์ หรือหากผู้ใช้เลือกลิงก์ หลังจากที่พวกเขาเยี่ยมชมลิงก์นั้น คุณอาจต้องการแจ้งให้พวกเขาทราบโดยเปลี่ยนสไตล์ CSS สนับสนุนคลาส เทียมจํานวนมาก ซึ่งถูกนําไปใช้แบบไดนามิกโดยขึ้นอยู่กับสิ่งที่ผู้ใช้ทําหรือทํา คลาส Pseudo จะถูกนําหน้าโดย :และจะถูกวางไว้หลังจากตัวเลือกอื่น
ตัวอย่างเช่น ในการตั้งค่าสีพื้นหลังของลิงก์เป็นสีเหลืองเมื่อผู้ใช้วางเคอร์เซอร์เหนือลิงก์ คุณสามารถใช้ CSS ต่อไปนี้:
a:hover {
background-color: yellow;
}
คลาสเทียมที่พบบ่อยที่สุดบางส่วนจะแสดงอยู่ในตารางต่อไปนี้:
| คลาสหลอก | คำอธิบาย |
|---|---|
hover |
ผู้ใช้กําลังวางเคอร์เซอร์ไว้เหนือรายการ |
visited |
ลิงก์ที่คลิกก่อนหน้านี้ |
link |
ลิงก์ที่ไม่ได้เยี่ยมชม |
first-child |
รองคนแรกที่จับคู่ตัวเลือกในลําดับชั้น |
last-child |
รองคนสุดท้ายที่จับคู่ตัวเลือกในลําดับชั้น |
สําคัญ
ด้วยการใช้องค์ประกอบหลอกและ CSS คุณสามารถลบขีดเส้นใต้ออกจากไฮเปอร์ลิงก์ได้ ตามกฎทั่วไป การขีดเส้นใต้เพื่อวัตถุประสงค์ในการช่วยสําหรับการเข้าถึงจะดีที่สุด ข้อความที่ขีดเส้นใต้อนุญาตให้ผู้ใช้สามารถระบุลิงก์บนหน้าได้อย่างรวดเร็ว
ตัวเลือก ID
คล้ายกับคลาส ID ช่วยให้คุณสามารถนําลักษณะไปใช้กับองค์ประกอบได้ แต่ในขณะที่คลาสสามารถนําไปใช้กับหลายองค์ประกอบได้ ID ต้องไม่ซ้ํากันและอ้างอิงถึงองค์ประกอบเดียวเท่านั้น
ในประวัติย่อ คุณอาจมีส่วนสําหรับโซเชียลมีเดีย เช่น X, GitHub หรือบล็อกของคุณ ถ้าคุณต้องการสไตล์ที่กําหนดเองสําหรับส่วนนั้น คุณสามารถตั้งค่า ID:
<div id="social-media">
<!-- list of links -->
</div>
ID จะถูกขึ้นต้นด้วย # ใน CSS:
#social-media {
/* style */
}
โน้ต
มาตรฐานการตั้งชื่อสําหรับคลาสและรหัสคือการใช้ "ปลอกท่อระบายน้ํา" แต่ละคําเป็นตัวพิมพ์เล็ก และคั่นด้วย - กรณีการเบ้ชื่อมาจากวิธีการที่คําปรากฏราวกับว่าพวกเขาสามารถอยู่ในท่อระบายน้ํา