Lv.3 CSS Selectors

CSS Selectors เป็นการเลือกอิลิเมนต์(แท็ก)ด้วยวิธีต่าง

  • เลือกจากชื่อแท็ก
  • เลือกจาก Id
  • เลือกจาก Class
  • เลือกทุกอิลิเมนต์
  • เลือกแบบเฉพาะเจาะจง
  • เลือกเป็นกลุ่ม

CSS Selectors เลือกอิลิเมนต์ด้วย Tag selector

การใช้ Selectors ขั้นพื้นฐานสุดๆ ก็คือการเลือกจากชื่อแท็ก

ตัวอย่าง

h1 {
	color: red;
	font-size: 36px;
}

p {
	text-align: center;
	font-size: 16px;
}

เลือกอิลิเมนต์ด้วย Id selector

การเลือกอิลิเมนต์แบบ Id จะมีค่า Id ที่ซ้ำกันไม่ได้

ตัวอย่าง

#wrap {
	margin: auto;
	width: 50%;
	height: 100vh;
	background-color: blue;
}

เลือกอิลิเมนต์ด้วย Class selector

ในหนึ่ง 1 อิลิเมนต์ จะมี Class หรือไม่มีก็ได้ หรือจะมีมากว่า 1 Class ก็ได้

ตัวอย่าง

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

จากตัวอย่างแท็ก h2 ตัวหนังสือสีดำ เพราะไม่ได้กำหนคลาส red ให้

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น

Top