การใช้งาน div พื้นฐาน

• Facebook
• Line

เกริ่นนำ

div คือ แท็กประเภทนึงของ html ใช้สำหรับครอบวัตถุที่เราต้องการ เพื่อจัดรูปแบบต่างๆ ให้กับวัตถุในตำแหน่งนั้นๆ สามารถใส่ค่าไปตรงๆ ใน div นั้น หรือ ใส่ id กับ class เพื่อใช้อ้างอิงกับการจัด CSS ได้ตามความเหมาะสม

ตัวอย่างโค้ด แบบใส่ค่าตรง ใน div

<div style="color: red;">
     Your Text
</div>

ตามตัวอย่าง ตัวหนังสือคำว่า Your Text ก็จะแสดงผลเป็นสีแดง

ตัวอย่างโค้ด ใส่ id หรือ class เพื่อใช้อ้างอิงกับการจัด CSS

ใน html
<div class="red">
     Your Text
</div>

ใน CSS
.red{
     color: red;
}

ตามตัวอย่าง ตัวหนังสือคำว่า Your Text ก็จะแสดงผลเป็นสีแดงเช่นเดียวกับแบบแรก ซึ่งวิธีการหลังจะเป็นวิธีการที่ได้รับความนิยมมากกว่า เนื่องจากง่ายต่อการแก้ไขในภายหลังนั้นเอง

ตัวอย่างการนำไปใช้งาน

ความแตกต่างของ ID กับ class

สามารถใช้ ID ได้เพียง 1 ครั้งใน 1 แท็ก และ ควรใช้เพียงครั้งเดียวใน 1 หน้าเว็บ แต่ class สามารถใช้ได้หลาย class ใน 1 แท็ก และ สามารถเรียกใช้ได้หลายครั้งใน 1 หน้าเว็บ ซึ่งถ้าเราเรียกค่าชนกัน ID จะได้รับความสำคัญมากว่า Class