Lv.17 HTML class

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;
}

การใช้งานคลาส ช่วยลดเวลาการเขียนคุณสมบัติที่เหมือนๆกัน เพราะเราเขียนชุดเดียว แต่ใช้ได้หลายๆที สะดวกขึ้นเยอะเลย

Top