เมื่อใช้ CSS สำหรับการจัดรูปแบบหน้าเว็บ คุณมักจะต้องการกำหนดเป้าหมายบางส่วนของหน้าเว็บ วิธีหนึ่งที่คุณสามารถเลือกองค์ประกอบอย่างน้อยหนึ่งรายการได้โดยใช้ ID และ/หรือแอตทริบิวต์ของ Class
ในขณะที่คุณอ่านบทช่วยสอนนี้ ให้ชำระเงิน Codepen แบบโต้ตอบและเล่นไปพร้อมกับฉัน!
แอตทริบิวต์ ID และตัวเลือก CSS
มาสร้างย่อหน้าง่ายๆ โดยใช้แท็ก
:
<p> Color this paragraph! </p>
ID เป็นตัวระบุเฉพาะที่คุณเพิ่มองค์ประกอบเดียวเพื่อระบุได้โดยไม่ซ้ำกัน มันเป็นไปตามข้อตกลง id="#NAME"
โดยที่ในใจ และเนื่องจากเราต้องการระบายสีย่อหน้าของเรา เรามาตั้งชื่อด้วยชื่อเฉพาะ
<p id="paragraph-colored"> Color this paragraph! </p>
ตอนนี้เรามีตัวระบุ ID เฉพาะแล้ว เราต้องแน่ใจว่าเราไม่ได้เพิ่ม ID เดียวกันไปยังองค์ประกอบอื่น แม้ว่าเบราว์เซอร์จะไม่บ่น แต่จะทำให้วัตถุประสงค์เสียไปและ CSS จะไม่ทำงานตามที่ตั้งใจไว้
ด้วย ID ของเรา เราสามารถเลือกได้โดยใช้สัญลักษณ์แฮชแท็ก # พร้อม CSS มาทำให้ p tag ของเราเป็นสีม่วงกันเถอะ:
#paragraph-colored {
color: purple;
} สบายๆ ใช่ไหม? 😄
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
คุณสมบัติของคลาสและตัวเลือก CSS
เจ๋งมาก เรามีย่อหน้าด้วยข้อความสีม่วง ให้เราสมมติว่าเรามีรูปภาพอะโวคาโดจำนวนมากอยู่ใต้แท็ก p เดียวของเรา:
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado"> <img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado"> <img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado">
เราจะระบุและเลือกผู้พัฒนาอะโวคาโดเหล่านี้ได้อย่างไร (ไม่ว่าจะหมายความว่าอย่างไร) เราทราบดีว่าเราไม่สามารถใช้แท็ก ID ได้ เนื่องจากใช้เพื่อระบุรายการเดียวโดยไม่ซ้ำกัน นี่คือที่ที่แอตทริบิวต์คลาสมาเล่น
แอตทริบิวต์ของคลาสเป็นไปตามคลาสการประชุม =”#CLASS_NAME” เนื่องจากสมาชิกจำนวนมากสามารถอยู่ในชั้นเรียนได้ นักพัฒนาอะโวคาโดทั้งหมดของเราจึงสามารถกำหนดชั้นเรียนได้ เช่น:
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado" class="avocado-devs">
ยอดเยี่ยม! รูปภาพอะโวคาโดของเราได้รับมอบหมายให้เป็นคลาส “avocado-devs” ตอนนี้เราสามารถใช้ตัวเลือกคลาส CSS ที่แสดงด้วยจุดธรรมดา (.) ได้แล้ว ไปข้างหน้าและเพิ่มคุณสมบัติตัวกรอง CSS ให้กับผู้พัฒนาอะโวคาโดของเรา เราคิดว่าพวกเขากำลังทำงานตอนดึก ดังนั้นเรามาสลับสีกัน 100 เปอร์เซ็นต์กัน
.avocado-devs {
filter: invert(100)
} โดยพื้นฐานแล้ว เราสร้างกลุ่มด้วยคลาส จากนั้นด้วยตัวเลือกคลาส CSS เราสามารถใช้สไตล์ตามที่เราต้องการกับกลุ่มขององค์ประกอบ
การใช้ตัวเลือกแท็กทั่วไปกับตัวเลือกคลาส
เรามักจะเห็นว่าเมื่อเลือกคลาสด้วย CSS ควรใช้ตัวเลือกแท็กทั่วไปร่วมกับตัวเลือกจุด ทำไม? เพราะยิ่ง เฉพาะ เราอยู่กับตัวเลือกของเรา CSS ของเราจะนำไปใช้ได้ดีขึ้นมาก
ด้วย CSS เราใช้ตัวเลือกแท็กทั่วไปโดยอ้างอิงจากชื่อแท็กค่อนข้างมาก ตัวอย่างเช่น สิ่งเหล่านี้คือตัวเลือกแท็กที่ถูกต้องทั้งหมด:
/* H1 */
h1{}
/* Paragraphs */
p{ }
ดังนั้นเราจึงสามารถปรับโครงสร้างตัวเลือกรูปภาพของเราใหม่โดยใส่ img แท็กทั่วไป:
img.avocado-devs {
filter: invert(100)
} ฟังก์ชันการทำงานไม่เปลี่ยนแปลง แต่เมื่อโค้ดของคุณเติบโตขึ้น ความเฉพาะเจาะจงนี้ก็มีความสำคัญ มันจะทำให้โค้ดของคุณอ่านง่ายขึ้นด้วย นักพัฒนาคนอื่นๆ จะเห็นว่าคลาส avocado-devs หมายถึงรูปภาพ
นี่เป็นสิ่งสำคัญเพราะที่นี่เราใช้ตัวกรองกับรูปภาพที่มีชื่อคลาสเฉพาะเท่านั้น หากเราต้องเพิ่มรูปภาพ avocado-dev อื่นโดยไม่มีคลาสที่เหมาะสม สไตล์จะไม่มีผล ในฐานะนักพัฒนาเว็บ พฤติกรรมตามเงื่อนไขมักเป็นสิ่งที่เราต้องการ
