Lv.12 HTML CSS

HTML เรียกไฟล์ CSS มาใช้งานนั้น ก็เพื่อการจัดรูปแบบเลย์เอาต์ของหน้าเว็บเพจ เพิ่ม สี ขนาด เส้น อักษร CSS ช่วยประหยัดเวลาทำงานได้มาก สามารถควบคุมเลย์เอาต์ของหน้าเว็บหลายๆ หน้าพร้อมกันได้ โดยที่เราปรับแก้แค่ที่เดียว แต่ใช้ได้ทั้งเว็บไซต์

HTML เรียกไฟล์ CSS มาใช้งาน

สามารถเรียกใช้งาน CSS ได้ 3 วิธี

  • Inline เขียนในแท็กนั้นๆเลย โดยใช้แอตทริบิวต์ style
  • Internal ใช้อิลิเมนต์ <style> ใน <head>
  • External เรียกไฟล์ CSS จากที่อื่น หรือ อยู่ในโฟลเดอร์อื่นๆ มาใช้งาน โดยใช้อิลิเมนต์ <link> ใน <head>

การใช้งาน CSS แบบ Inline

การเขียน CSS แบบนี้ไม่แนะนำครับ เพราะแก้ไขงานลำบาก ใช้เฉพาะจำเป็นจริงๆ เท่านั้น

ตัวอย่าง

<h1 style="color:blue;">หัวเรื่อง</h1>

<p style="color:red;">ย่อหน้า</p>

การใช้งาน CSS แบบ Internal

การเขียน CSS แบบนี้ก็ไม่แนะนำเหมือนกันครับ เพราะแก้งานก็ยากอยู่

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML มาใช้ CSS เถอะ</title>
		<style>
			body {
				background-color: blue;
			}
			h1 {
				color: red;
			}
			p {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h1>หัวเรื่อง</h1>
		<p>ย่อหน้า</p>
	</body>
</html>

การใช้งาน CSS แบบ Internal

การเขียน CSS แบบนี้แนะนำที่สุดเลยครับ แก้ง่ายใช้ได้ทั้งเว็บไซต์

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML มาใช้ CSS เถอะ</title>
		<link href="style.css" rel="stylesheet">
	</head>
	<body>
		<h1>หัวเรื่อง</h1>
		<p>ย่อหน้า</p>
	</body>
</html>

ในตัวอย่างเรียกไฟล์ CSS ชื่อ style ที่อยู่ในโฟลเดอร์เดียวกันกับไฟล์นี้

ใส่ความเห็น

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

Top