แอตทริบิวต์ class

แอตทริบิวต์ class กำหนดหนึ่งหรือหลาย คลาสสำหรับองค์ประกอบ (องค์ประกอบในที่นี้ หมายถึงแท็ก)

ทำเช่นนี้เพื่อที่จะอ้างอิง ผ่าน CSS ไปยังกลุ่มขององค์ประกอบที่มีการกำหนด คลาสเดียวกัน และนำคุณสมบัติที่กำหนด ไปใช้กับมัน (ตัวอย่างเช่น เปลี่ยน สี ข้อความ, ขนาด ฟอนต์ และอื่น ๆ)

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

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

จะเข้าใจได้อย่างไรว่าควรกำหนดให้องค์ประกอบ - คลาส หรือ id? คลาสจะถูกกำหนดให้กับองค์ประกอบที่ปรากฏซ้ำ บนหน้าต่างๆ ของเว็บไซต์ (เพื่อที่จะไม่ต้องเขียนโค้ด CSS เดียวกันหลายครั้ง) แม้ว่า ตอนนี้องค์ประกอบนี้จะมีเพียงองค์ประกอบเดียว แต่คุณรู้สึกว่า องค์ประกอบที่คล้ายกันอาจปรากฏในภายหลัง - ให้กำหนดคลาสให้กับองค์ประกอบนี้ หากคุณ แน่ใจว่าองค์ประกอบดังกล่าวเป็นองค์ประกอบเฉพาะ - ก็ให้กำหนด id ให้มัน ถึงแม้ว่าในปัจจุบัน จะมีแนวโน้มที่จะกำหนดคลาสให้กับองค์ประกอบทั้งหมด และปล่อย id ไว้สำหรับ JavaScript, แต่มันก็ไม่ได้เป็นที่ยอมรับโดยทั่วไป

สามารถกำหนดหลายคลาสให้กับองค์ประกอบได้ ในกรณีนี้ควรแยกชื่อคลาสด้วยช่องว่าง

ชื่อคลาสควรพิมพ์ด้วยตัวอักษรภาษาอังกฤษ ตัวเลข โดยไม่มีช่องว่าง (ช่องว่างแยก คลาสออกจากกัน แทนที่จะใช้ช่องว่างสามารถใช้ ขีดล่างหรือยัติภังค์ได้) คลาสไม่ควร ขึ้นต้นด้วยตัวเลข (ใน HTML5 สามารถทำได้แล้ว แต่ จะไม่ทำงานในเบราว์เซอร์รุ่นเก่า)

ควรตั้งชื่อคลาสเป็นภาษาอังกฤษ (ไม่ใช่ภาษารัสเซีย ที่แค่พิมพ์ด้วยตัวอักษรอังกฤษ!) ชื่อควรมีความหมาย สะท้อนถึงสาระสำคัญของคลาส

ตัวอย่าง

มากำหนดสีข้อความเป็นสีแดงให้กับย่อหน้าทั้งหมดที่มีคลาส test

<p class="test">ย่อหน้าที่มีคลาส test</p>
<p>ย่อหน้าอ้างอิงที่ไม่มีคลาส</p>

.test {
	color: red;
}

ตัวอย่าง . หลายคลาสสำหรับองค์ประกอบ

และที่นี่มากำหนดหลาย คลาสให้กับย่อหน้าแรก - test1 และ test2 (เขียน แยกด้วยช่องว่าง) คลาส test1 กำหนด สีแดงให้กับสี ข้อความ และคลาส test2 กำหนดขนาด ฟอนต์ เป็น 20px ให้กับย่อหน้าที่สอง กำหนดแค่คลาส test1 (ย่อหน้านี้ จะกลายเป็นสีแดง) และให้กับย่อหน้าที่สาม - คลาส test2 (ย่อหน้านี้จะมีขนาด ฟอนต์ 20px) ย่อหน้าแรก ซึ่งมี สองคลัส จะมีทั้งสีแดง และขนาดฟอนต์ 20px พร้อมกัน:

<p class="test1 test2">ย่อหน้าที่มีสองคลาส test1 และ test2</p>
<p class="test1">ย่อหน้าที่มีคลาส test1</p>
<p class="test2">ย่อหน้าที่มีคลาส test2</p>
<p>ย่อหน้าอ้างอิงที่ไม่มีคลาส</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

ดูเพิ่มเติม

แอตทริบิวต์ id,
ซึ่งกำหนดตัวระบุเฉพาะให้กับองค์ประกอบ