เมื่อมองแวบแรก จะใช้อะไรดี: id หรือ class ท้ายที่สุดได้รับมอบหมายเช่นเดียวกัน ตัวเลือกซีเอสเอสสไตล์สำหรับ id และคลาส - ผลลัพธ์จะเหมือนกัน ในความเป็นจริงไม่มีความแตกต่างระหว่าง id และคลาสใน CSS ยกเว้นลำดับความสำคัญของการประมวลผล แต่ในบางกรณีซึ่งมักใช้ในการพัฒนาเว็บจะมีความแตกต่างค่อนข้างชัดเจน บทความนี้เน้นความแตกต่างทั้งหมดระหว่างคลาสและรหัส

บัตรประจำตัวประชาชน

Id คือตัวระบุเฉพาะขององค์ประกอบ ในหนึ่งหน้า จะมีการใช้ตัวระบุตัวเดียวเพียงครั้งเดียว แม้ว่าจะเป็นไปได้ที่จะใช้ตัวระบุที่เหมือนกันหลายตัวในหน้าเดียวกัน แต่อาจทำให้เกิดปัญหาเมื่อใช้จุดยึด HTML และ JS หากคุณพยายามกำหนด ID ที่แตกต่างกันสองรายการให้กับองค์ประกอบเดียว (แท็ก HTML) เฉพาะกฎจากรหัสแรก (ซ้ายสุด) เท่านั้นที่จะใช้งานได้

ตัวอย่างที่ 1: ไม่แนะนำให้ใช้ตัวระบุ (ID) อย่างไร

บล็อกข้อความที่เลือก

บล็อกข้อความที่เลือก

ตัวอย่างที่ 2: วิธีไม่ใช้ตัวระบุ (ID)

ไม่อนุญาตให้กำหนดรหัสตั้งแต่สองรหัสขึ้นไปให้กับองค์ประกอบที่ 1

ในกรณีที่มีการใช้ id และคลาสกับองค์ประกอบเดียวพร้อมกัน ลำดับความสำคัญของ ID จะสูงกว่าคลาส:

คำนิยาม สไตล์ CSS

#my_id_r7t ( สี : เขียว ; น้ำหนักแบบอักษร : ตัวหนา ; )

ย่อหน้านี้ถูกกำหนดคลาส my_class และตัวระบุ my_id

อย่างที่คุณเห็นสีได้รับค่าที่บันทึกไว้ในตัวระบุ แต่ถ้าคุณพิจารณาให้ละเอียดยิ่งขึ้น id และคลาสสามารถส่งเสริมซึ่งกันและกันได้สำเร็จ: ประเภทตัวหนาที่ระบุในตัวระบุ จะรวมกับรูปแบบตัวเอียงที่เขียนในคลาส

หากคุณเพิ่ม style: ให้กับ descriptor ผลลัพธ์จะเป็นดังนี้:

มากที่สุด ลำดับความสำคัญสูงมีสไตล์ที่กำหนดให้กับคำอธิบายโดยใช้ style="..."

ตัวอย่างที่ดีของลำดับความสำคัญมีระบุไว้ในเอกสารประกอบ CSS อย่างเป็นทางการ (อังกฤษ) กล่าวโดยย่อ ลำดับความสำคัญตามลำดับจากมากไปน้อยคือ: สไตล์, id, คลาส, สไตล์แท็ก

องค์ประกอบ id สามารถใช้เป็นจุดยึด HTML แทนโครงสร้างแบบโบราณ เพื่อให้คุณสามารถเชื่อมโยงไปยังส่วนใดส่วนหนึ่งของหน้าโดยไม่ต้องโหลดซ้ำด้วยความช่วยเหลือของ Back to Top หากมีรหัสที่เหมือนกันหลายรายการบนหน้าเว็บ สถานการณ์ที่ไม่ชัดเจนจะเกิดขึ้น

เมื่อเขียนโปรแกรมเพจโดยใช้ JS มักจะใช้ฟังก์ชัน getElementById() ซึ่ง "คาดหวัง" ด้วยว่าตัวระบุจะต้องไม่ซ้ำกัน มิฉะนั้นอาจเกิดข้อผิดพลาดในโค้ด

ระดับ

เมื่อใช้ class คุณสามารถกำหนดสไตล์ให้กับคำอธิบาย HTML หนึ่งรายการจากหลายคลาสพร้อมกันได้:

My_class_r7t ( สี : น้ำเงิน ; รูปแบบตัวอักษร : ตัวเอียง ; )
.my_class_ffR5 ( color : black ; background-color : #fafafa ; padding : 3px ; border : 1px solid #757575 ; margin-left : 30px ; )

ชื่อของคลาสต่างๆ เขียนโดยคั่นด้วยช่องว่าง:

ตัวอย่างการใช้ 2 คลาสที่แตกต่างกันสำหรับ 1 แท็ก HTML

ผลลัพธ์ของการใช้สองคลาสที่แตกต่างกันกับตัวอธิบาย HTML ตัวแรก

คลาส my_class_r7t และ my_class_ffR5 ตั้งค่าสีที่แตกต่างกันให้กับเนื้อหาของแท็ก HTML สีที่กำหนดไว้ในภายหลังในไฟล์สไตล์จะถูกใช้ (ในรูปแบบ ในกรณีนี้ class my_class_ffR5 เขียนหลังจาก my_class_r7t) ลำดับการใช้คลาสในตัวอธิบาย HTML นั้นไม่สำคัญ

เพื่อกำหนดค่าเฉพาะให้กับคลาสคอมโพสิต จัดแต่งทรงผมเขียนไว้ด้วยกันโดยไม่มีปัญหา:

My_class_bbbb755 ( น้ำหนักแบบอักษร : ตัวหนา ; )
.my_class_ffR5 .my_class_bbbb755 ( การจัดแนวข้อความ : ขวา ; )

การจัดตำแหน่งที่ถูกต้องจะใช้ก็ต่อเมื่อมีการกำหนดคำอธิบาย HTML หนึ่งคลาส 2 คลาสในคราวเดียว:

ตัวอย่างการใช้สไตล์กับคลาสคอมโพสิต

ดูด้านล่างว่ามีลักษณะอย่างไร:

ตัวอย่างการใช้สไตล์กับคลาสคอมโพสิต

คลาสเดียวกันนั้นต่างจาก id ตรงที่สามารถกำหนดให้กับองค์ประกอบต่าง ๆ ได้ไม่จำกัดจำนวน:

...
...
...
...
...

คลาสหรือรหัส - จะใช้อะไร?

จริงๆ แล้วคุณไม่สามารถเลือกได้ว่าจะใช้คลาสหรือไอดี สิ่งนี้คล้ายกับการเลือกสิ่งที่ดีกว่า: กินหรือดื่ม? จำเป็นต้องใช้ทั้งคลาสและตัวระบุ ขึ้นอยู่กับเป้าหมาย ในกรณีส่วนใหญ่ ควรใช้คลาสเพื่อหลีกเลี่ยงการใช้ ID มากกว่าหนึ่งครั้งในหน้าเดียวกันโดยไม่ตั้งใจ แต่หากจำเป็น คุณต้องใช้ id: เน้นบล็อกเฉพาะของหน้า สำหรับแองเคอร์ สำหรับ JS ฯลฯ

ควบคุม รูปร่างองค์ประกอบ HTML บนเพจสามารถสร้างขึ้นได้โดยใช้ตัวเลือกหลายตัว คลาส ID และ CSS เป็นคลาสที่พบบ่อยที่สุด ซึ่งไม่เพียงช่วยในการสร้างมาร์กอัปเอกสาร HTML แต่ยังช่วยในการออกแบบ (สไตล์) ด้วย

วิธีใช้ตัวเลือก CSS ID

ตัวเลือก ID ใช้เพื่อกำหนดองค์ประกอบ HTML เดียวโดยใช้ค่าแอตทริบิวต์ ID ที่ไม่ซ้ำกัน ตัวอย่างต่อไปนี้แสดงถึงองค์ประกอบที่มีค่าแอตทริบิวต์ id เป็นส่วนหัว

ใน CSS คุณสามารถใช้สไตล์ที่แตกต่างกับองค์ประกอบ div นี้:

#header ( กว้าง: 100%; สูง: 80px; พื้นหลัง: สีน้ำเงิน )

อย่าลืมใช้เครื่องหมาย # (แฮชแท็ก) หน้าชื่อของคุณ คุณสามารถหาข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ ที่นี่ และ ที่นี่

วิธีใช้ตัวเลือกคลาส CSS

ตัวเลือกคลาส HTML CSS ใช้เพื่อเลือกบุคคลหรือกลุ่มขององค์ประกอบ HTML ที่มีค่าแอตทริบิวต์คลาสเดียวกัน

ใน CSS คุณสามารถใช้สไตล์ที่แตกต่างกันกับหลายย่อหน้าได้:

เนื้อหา ( ระยะขอบ: 20px 0; ความสูงบรรทัด: 24px; ขนาดตัวอักษร: 15px )

อย่าลืมใช้สัญลักษณ์

(จุด) หน้าชื่อคลาสเมื่อประกาศกฎ CSS คุณสามารถหาข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ ที่นี่ และ ที่นี่ พวกเขาแตกต่างกันอย่างไร?คลาสซีเอสเอส

และบัตรประจำตัว ตัวเลือกรหัสใช้สำหรับองค์ประกอบแต่ละหน้า (#header) ในขณะที่ตัวเลือกคลาส (.content) ใช้สำหรับหลายองค์ประกอบ เนื่องจากค่า id ถูกกำหนดให้กับองค์ประกอบ HTML เพียงองค์ประกอบเดียวเท่านั้น กล่าวอีกนัยหนึ่ง ไม่สามารถมีองค์ประกอบหลายรายการได้ค่าเดียวกัน รหัสภายในหนึ่งหน้าแยกกัน

- ตัวอย่างเช่น คุณสามารถมีได้เพียงองค์ประกอบเดียวที่มี id #header หรือเพียงองค์ประกอบเดียวที่มี id #footer

ค่าคลาสเดียวกันสามารถกำหนดให้กับองค์ประกอบ HTML ตั้งแต่หนึ่งรายการขึ้นไป ตัวอย่างเช่น คุณอาจมีหลายย่อหน้าที่มีคลาส .content หรือหลายลิงก์ที่มีคลาส .external

ตัวอย่างต่อไปนี้จะช่วยให้คุณเข้าใจความแตกต่างระหว่างคลาส CSS และ id ได้ดีขึ้น และวิธีใช้อย่างถูกต้อง: ลิงค์ 1 ลิงค์ 2 ลิงค์ 3

ลิงค์ 4

นี่คือย่อหน้าแรกของเรา

นี่คือย่อหน้าที่สองของเรา

นี่คือย่อหน้าที่สามของเรา เราเริ่มต้นมาร์กอัป HTML ด้านบนด้วยองค์ประกอบ div คอนเทนเนอร์ เราให้รหัส (#container) แก่มัน เนื่องจากเพจของเราจะมีคอนเทนเนอร์เพียงอันเดียว ข้างในเราวางส่วนเมนู (#menu) และเนื้อหา (#content) เช่นเดียวกับคอนเทนเนอร์ เราจะมีเพียงเมนูเดียวและส่วนเนื้อหาเดียวเท่านั้น มีสี่ลิงค์ภายในเมนู

แต่เราใช้คลาส CSS (.link) กับแต่ละรายการ ในทำนองเดียวกัน เราใช้คลาส (.text) กับแต่ละย่อหน้าในองค์ประกอบ div เนื้อหา

หากคุณต้องการจัดสไตล์องค์ประกอบเหล่านี้ คุณสามารถใช้ตัวอย่างต่อไปนี้:

คลาสจะใช้เมื่อใดและจะใช้ ID เมื่อใด

รหัสใช้สำหรับองค์ประกอบแต่ละรายการที่ปรากฏเพียงครั้งเดียวบนเพจ ตัวอย่างเช่น ส่วนหัว ส่วนท้าย เมนู ฯลฯ ตัวเลือกคลาสใช้สำหรับองค์ประกอบตั้งแต่หนึ่งรายการขึ้นไปที่ปรากฏหลายครั้งบนหน้าเว็บ ตัวอย่างเช่น ย่อหน้า ลิงก์ ปุ่ม องค์ประกอบอินพุต และถึงแม้ว่าคุณจะสามารถใช้คลาสได้ก็ตาม แต่ละองค์ประกอบแต่ควรใช้ตัวเลือกเหล่านี้ตามวัตถุประสงค์ที่ต้องการจะดีกว่า

คุณควรคำนึงด้วยว่าองค์ประกอบ HTML สามารถมีทั้งรหัสและคลาสได้ สมมติว่ามีสองบล็อกบนหน้าเว็บที่มีขนาดและสไตล์เท่ากัน แต่มีตำแหน่งต่างกัน ในกรณีนี้ คุณสามารถใช้คลาสเดียวกันกับบล็อกเหล่านี้เพื่อปรับขนาดและจัดรูปแบบ จากนั้นใช้ตัวเลือก ID แยกต่างหากในแต่ละบล็อกเพื่อกำหนดตำแหน่งที่แตกต่างกัน

องค์ประกอบสามารถเชื่อมโยงกับหลายคลาสได้ในเวลาเดียวกัน สิ่งนี้มีประโยชน์มากเมื่อคุณต้องการใช้สไตล์ แยกกลุ่มองค์ประกอบ บางประเภท- ตัวอย่างเช่น มีคลาส .content ที่ถูกนำไปใช้กับทุกย่อหน้า หากคุณต้องการเพิ่มเส้นขอบหรือการตกแต่งสไตล์อื่น ๆ ให้กับหลาย ๆ แยกย่อหน้าจากนั้นคุณสามารถทำได้โดยใช้ CSS p class .bordered เพิ่มเติม :

จุดนี้ไม่มีขอบเขต

จุดนี้มีข้อจำกัด

สังเกตช่องว่างสีขาวระหว่างชื่อคลาสทั้งสองใน คุณลักษณะของคลาสย่อหน้าที่สอง ด้านล่างนี้เป็นตัวอย่างของโค้ด CSS:

เนื้อหา (ระยะขอบ: 10px; ขนาดตัวอักษร: 15px; สี: สีน้ำเงิน). มีขอบ (เส้นขอบ: 2px solid #222)

สิ่งสำคัญคือต้องใช้คลาส id และ CSS อย่างถูกต้อง การใช้ในทางที่ผิดอาจทำให้เกิดข้อผิดพลาดในการแสดงโค้ด HTML

การแปลบทความ “คลาส CSS กับ ID: อันไหนที่จะใช้” จัดทำโดยทีมงานโครงการที่เป็นมิตร

ดีไม่ดี

วันนี้เป็นการยากที่จะหาไซต์ที่จำเป็นและ แท็กที่สำคัญ- ดูโค้ดของไซต์ใดๆ ที่คุณพบบนอินเทอร์เน็ต แล้วคุณจะเห็นว่าแท็กปรากฏบ่อยกว่าแท็กอื่นๆ ในเอกสาร HTML เหตุผลของความนิยมนี้คือรูปแบบบล็อก กล่าวอีกนัยหนึ่ง เว็บไซต์ได้รับการออกแบบโดยใช้แท็กบล็อก

ด้วยแท็กนี้ โค้ด HTML ทั้งหมดของเอกสารจึงมีโครงสร้างที่มองเห็นได้และเข้าใจได้เชิงตรรกะ เป็นเรื่องง่ายที่จะเข้าใจไม่เพียงแต่สำหรับนักออกแบบเลย์เอาต์เท่านั้น แต่ยังรวมถึงผู้เชี่ยวชาญคนอื่นๆ ที่ทำงานร่วมกันในโปรเจ็กต์เดียวด้วย อย่างไรก็ตาม แท็กที่ไม่มี "ดาวเทียม" - รหัสประจำตัวและตัวเลือกคลาส - นั้นไร้ค่า

ชั้นเรียนและรหัส

คลาส (คลาส) และตัวระบุ (id) ทำหน้าที่เดียวกัน พวกเขาถาม สไตล์ที่แตกต่างสำหรับแท็กเช่นเดียวกับใน ซีเอสเอสภายนอกและภายในเอกสารผ่านแท็กสไตล์ ในที่นี้จำเป็นต้องชี้แจงว่าแท็กเหล่านี้ทำงานร่วมกับแท็กอื่นๆ ได้ด้วย

พิจารณาโค้ดมาร์กอัป HTML ต่อไปนี้เป็นตัวอย่าง: