HTML การใช้งาน class แอตทริบิวต์ คือการกำหนดคลาสให้กับ HTML อิลิเมนต์ ให้มีคลาสเหมือนกัน เวลาแก้ไขคุณสมบัติของคลาส ก็แก้ที่เดียว ใช้ได้ทั้งเว็บ
ตัวอย่าง
<!DOCTYPE html>
<html lang="th-TH">
<head>
<title>nkaub | HTML การใช้งาน class แอตทริบิวต์</title>
<style>
.color-red {
color: red;
}
</style>
</head>
<body>
<h1 class="color-red">หัวเรื่อง</h1>
<p class="color-red">พารากราฟ</p>
</body>
</html>
จากตัวอย่าง เราได้กำหนดให้แท็ก h1 และแท็ก p มีคลาสชื่อ color-red และได้กำหนดคุณสมบัติของคลาส color-red ให้มีตัวอักษรสีแดง เราสามารถใช้คลาส color-red กับอิลิเมนต์อื่นๆได้ ถ้าต้องการให้อิลิเมนต์นั้นมีตัวอักษรสีแดง ก็แค่เพื่อคลาส color-red เข้าไปที่อิลิเมนต์นั้นๆ เช่น
<h2 class="color-red">หัวเรื่อง h2</h2>
<div class="color-red">กล่องว่างเปล่า</div>
HTML การใช้งาน class ต้องเขียน CSS
การกำหนดคุณสมบัติต่างๆ ต้องเขียนเป็นภาษา CSS นะครับ
ตัวอย่าง
.color-red {
color: red;
}
.bg-blue {
background-color: blue;
}
การใช้งานคลาส ช่วยลดเวลาการเขียนคุณสมบัติที่เหมือนๆกัน เพราะเราเขียนชุดเดียว แต่ใช้ได้หลายๆที สะดวกขึ้นเยอะเลย