ป้ายกำกับ: class Selector คือ

Lv.7 CSS Class Selector

Posted on by alsoon

CSS Class Selector เป็นการเลือก Selector จากชื่อคลาสโดยหนึ่งอิลิเมนต์สามารถมีได้หลายๆคลาสหรือจะไม่มีเลยก็ได้

Syntax

.ชื่อคลาส {
	Property1: Value;
	Property2: Value;
}

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Class Selector</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			.red {
				color: red;
			}

			.text-center {
				text-align: center;
			}

			.font-14 {
				font-size: 14px;
			}
			
			.border-blue {
				border: 1px solid blue;
			}
		</style>

	</head>
	<body>
	
		<h1 class="red text-center">หัวเรื่อง h1</h1>
		<h2 class="text-center">หัวเรื่อง h2</h2>
		<p class="red text-center font-14 border-blue">พารากราฟ</p>
		
	</body>
</html>

และที่สำคัญ Property แต่ละคลาสต้องไม่ซ้ำกัน ในกรณีที่ Property ซ้ำกัน เว็บเบราว์เซอร์จะใช้ค่า Property ที่อยู่ลำดับล่างสุดแทน

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Class Selector</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			.red {
				color: red;
			}
			
			.red {
				color: gold;
			}
		</style>

	</head>
	<body>
	
		<h1 class="red">หัวเรื่อง h1</h1>
		
	</body>
</html>
Top