Lv.4 CSS How to

CSS How to เว็บเบราว์เซอร์จะจัดรูปแบบเอกสารของ HTML ตามข้อมูลในสไตล์ชีตที่เราได้กำหนดเอาไว้

CSS How to 3 วีธีเรียกใช้งาน

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

  • เรียกใช้แบบ Inline
  • เรียกใช้แบบ Internal
  • เรียกใช้แบบ External

เรียกใช้แบบ Inline

กำหนด CSS ลงไปที่แท็กนั้นๆเลย

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS How to</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">
		
	</head>
	<body>
		<h1 style="color:red;">หัวเรื่อง h1</h1>
		<h2 style="text-align:center;">หัวเรื่อง h2</h2>
		<p style="font-size:14px;">พารากราฟ</p>
	</body>
</html>

เรียกใช้แบบ Internal

ให้เขียน CSS ภายในอิลิเมนต์ <style> ของส่วน <head>

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS How to</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>
			h1 {
				color: red;
			}

			h2 {
				text-align: center;
			}

			p {
				font-size: 14px;
			}
		</style>

	</head>
	<body>
	
		<h1>หัวเรื่อง h1</h1>
		<h2>หัวเรื่อง h2</h2>
		<p>พารากราฟ</p>
		
	</body>
</html>

เรียกใช้แบบ External

ใช้แบบแยกไฟล์ CSS ต่างหาก โดยใช้แท็ก <link> เรียกไฟล์ CSS เข้ามาใช้งาน

ตัวอย่างในไฟล์ index.html

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS How to</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">
		
		<link href="style.css" rel="stylesheet">
		
	</head>
	<body>
		<h1>หัวเรื่อง h1</h1>
		<h2>หัวเรื่อง h2</h2>
		<p>พารากราฟ</p>
	</body>
</html>

จากตัวอย่างไฟล์ CSS ผมชื่อ style.css ได้ถูกเรียกมาใช้งานแล้ว และต้องอยู่ในโฟลเดอร์เดียวกันนะ อ่านการเรียกใช้ไฟล์ต่างๆ ได้ที่นี่

โค้ดในไฟล์ style.css

h1 {
	color: red;
}
	
h2 {
	text-align: center;
}

p {
	font-size: 14px;
}

วิธีเขียน CSS แบบ External สะดวก ง่าย

ใส่ความเห็น

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

Top