มีวิธีในการนำ 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 อยู่อีก ซึ่งจะได้อธิบายในโอกาสต่อไป
เนื้อหาที่เี่กี่ยวข้อง
- การใช้งาน CSS - ศึกษาิวิธีการนำ CSS ไปใช้กับ HTML
- สิ่งที่เรียกว่า Selects, Properties , and Values - สิ่งที่เป็นองค์ประกอบของ CSS
- สี Colours - การใช้งานสี
- ข้อความ Text - การจัดการเกี่ยวกับขนาดและรูปร่างของข้อความ
- Margins and Padding - การจัดการพื้นที่ระหว่างสิ่งต่างๆ
- Borders - การจัดการเกี่ยวกับขอบ
- รวมส่วนประกอบต่างข้างบนเป็น CSS
