การใช้งาน CSS ศึกษาิวิธีการนำ CSS ไปใช้กับ HTML

25 September 2008 เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee

css กับ html การใช้งาน css css

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ css กับ html การใช้งาน css css

มีวิธีในการนำ CSS ไปใช้กับ HTML อยู่ 3 วิธี ประกอบไปด้วย

In-line
Internal
External

การใช้วิธีแบบ In-line

In-line เป็นการเขียน CSS เ้ข้าไปในแท็ก HTML โดยใช้ style attribute
ซึ่งมีลักษณะดังต่อไปนี้

 <p style="color: red">text</p>

จากโค้ดด้านบนเป็นการกำหนด paragraph ใ้ห้เป็นสีแดง

แต่จำไว้ว่า HTML เป็นเอกสารในลักษณะ stand-alone หรือเป็นการนำเสนอเอกสารเปล่าๆ
ดังนั้นหากเป็นไปได้ควรหลักเลี่ยงการแทรก CSS เข้าไปในแท็ก HTML

การใช้วิธีแบบ Internal

การใช้วิธีการฝังโค้ด หรือวิธีแบบ Internal style ใ่ช้สำหรับหน้าเพจทั้งหมด จะแทรกอยู่ในแท็ก <head> และมีแท็ก <style>
อยู่ล้อมรอบ styles ในหน้าเพจนั้นๆ
ซึ่งมีลักษณะดังต่อไปนี้

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>CSS Example</title>
<style type="text/css">
p{
	color:#0066CC;
}
body{
	background-color:#333333;
}
</style>
</head>

<body>

จากโค้ดด้านบนเป็นการกำหนดสีของ paragraph และสีพื้นหลังหรือ background ของหน้าเพจนั้น

เช่นเดียวกับกันกับวิธีแบบ in-line ซึ่งทางที่ดีควรจะจัดให้ CSS และ HTML แยกกันด้วยวิธีที่ 3 คือ Extenal

การใช้วิธีแบบ External

รูปแบบ External style เป็นวิธีการใช้ CSS ทั้งเว็บหรือสำหรับหลายเว็บไซต์ได้ ซึ่งจะมีไฟล์ CSS แยกออกมาต่างหาก
ลักษณะไฟล์เป็นดังนี้

p{
	color:#0066CC;
}
body{
	background-color:#333333;
}

ถ้าทำการบันทึกไฟล์จากด้านบนเป็นชื่อ web.css เราจะสามารถลิ๊งค์ไฟล์นีเข้ากับ HTML ได้ดังนี้

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>CSS Example</title>
<link rel="stylesheet" href="web.css" type="text/css" />
</head>

<body>

ในความเป็นจริงยังมีวิธีการในการนำ CSS มาใช้กับ HTML อยู่อีก ซึ่งจะได้อธิบายในโอกาสต่อไป

เนื้อหาที่เี่กี่ยวข้อง