คลาส vs ID
Cascading Style Sheets (CSS) เป็นภาษาที่อธิบายลักษณะและการจัดรูปแบบของเอกสารที่เขียนโดยใช้ภาษามาร์กอัป CSS ใช้กันอย่างแพร่หลายในการจัดรูปแบบหน้าเว็บที่เขียนด้วย HTML CSS อนุญาตให้ระบุตัวเลือกสไตล์ของคุณเอง นอกเหนือจากการใช้สไตล์สำหรับองค์ประกอบ HTML ทำได้โดยใช้ ID และตัวเลือกคลาส เมื่อระบุสไตล์สำหรับองค์ประกอบที่ไม่ซ้ำกันเพียงรายการเดียว ระบบจะใช้ตัวเลือก ID เมื่อระบุสไตล์สำหรับกลุ่มขององค์ประกอบ ระบบจะใช้ตัวเลือกคลาส
คลาสคืออะไร
ใน CSS ตัวเลือกคลาสสามารถใช้เพื่อใช้สไตล์ของคุณเองกับกลุ่มขององค์ประกอบตัวเลือกคลาสใช้เพื่อนำสไตล์เฉพาะไปใช้กับชุดขององค์ประกอบที่มีคลาสเดียวกัน ใน CSS ตัวเลือกคลาสจะถูกระบุโดยจุดเต็ม (.) ต่อไปนี้เป็นตัวอย่างของตัวเลือกคลาสที่กำหนดไว้ใน CSS
.my_class {
สี: ฟ้า;
ขนาดตัวอักษร: ตัวหนา;
}
HTML สามารถอ้างถึงคลาสที่กำหนดใน CSS โดยใช้คลาสแอตทริบิวต์ดังที่แสดงด้านล่าง
นี่คือการจัดรูปแบบของฉัน
นี่คือการจัดรูปแบบของฉันอีกครั้ง
ดังที่แสดงด้านบน คลาสเดียวกันสามารถใช้ได้กับองค์ประกอบหลายรายการ และองค์ประกอบเดียวสามารถใช้หลายคลาสได้ เมื่อใช้หลายคลาสในองค์ประกอบเดียวกัน คลาสจะถูกแทรกลงในแอตทริบิวต์คลาสที่คั่นด้วยช่องว่างดังที่แสดงด้านล่าง
นี่คือการจัดรูปแบบของฉันโดยใช้สองคลาส
ID คืออะไร
ใน CSS ตัวเลือก ID สามารถใช้เพื่อนำสไตล์ของคุณเองไปใช้กับองค์ประกอบที่ไม่ซ้ำกันเพียงรายการเดียว ใน CSS ตัวเลือก ID จะถูกระบุโดยแฮช () ต่อไปนี้เป็นตัวอย่างของตัวเลือก ID ที่กำหนดใน CSS
my_ID {
สี: แดง;
จัดแนวข้อความ:ขวา;
}
HTML สามารถอ้างถึงตัวเลือก ID ที่กำหนดใน CSS โดยใช้รหัสแอตทริบิวต์ดังที่แสดงด้านล่าง
นี่คือการจัดรูปแบบของฉันจากตัวเลือก ID
ID นั้นไม่ซ้ำกัน ดังนั้นแต่ละองค์ประกอบสามารถมี ID เดียวและแต่ละหน้าสามารถมีองค์ประกอบเดียวที่มี ID เฉพาะนั้น รหัสมีลักษณะสำคัญที่สามารถใช้กับเบราว์เซอร์ได้ หาก URL ของหน้ามีค่าแฮช (เช่น https://myweb.commy_id) เบราว์เซอร์จะพยายามค้นหาองค์ประกอบด้วย ID “my_id” โดยอัตโนมัติ และเลื่อนหน้าเว็บเพื่อแสดงองค์ประกอบนั้น นี่คือเหตุผลหนึ่งที่หน้าควรมีองค์ประกอบเดียวที่มีรหัสเฉพาะนั้น เพื่อให้เบราว์เซอร์สามารถค้นหาองค์ประกอบนั้นได้
Class กับ ID ต่างกันอย่างไร
แม้ว่าทั้งตัวเลือกคลาสและตัวเลือก ID สามารถใช้เพื่อปรับใช้สไตล์ของคุณเองกับองค์ประกอบในหน้าเว็บ แต่ก็มีความแตกต่างที่สำคัญบางประการคุณสามารถใช้ตัวเลือกคลาสเพื่อใช้สไตล์ของคุณเองกับกลุ่มขององค์ประกอบ ในขณะที่ตัวเลือก ID จะใช้เพื่อใช้สไตล์กับองค์ประกอบเดียวที่ไม่ซ้ำ เมื่อใช้ ID แต่ละองค์ประกอบสามารถมีได้เพียง ID เดียว และแต่ละหน้าสามารถมีองค์ประกอบเดียวที่มี ID เฉพาะนั้น แต่ Class สามารถใช้สำหรับองค์ประกอบหลายรายการ และองค์ประกอบเดียวสามารถใช้หลาย Class ได้ นอกจากนี้ ID สามารถใช้เพื่อเลื่อนหน้าโดยอัตโนมัติเพื่อแสดงองค์ประกอบด้วย ID นั้น แต่ไม่สามารถทำได้ด้วยตัวเลือกคลาส