การประกาศ CSS นั้นเราสามารถทำได้ 3 วิธีด้วยกันครับ ทั้งนี้ในแต่ละวิธีจะมีลำดับความสำคัญ ดังนั้นเราจะมาทำความรู้จัก
เพื่อให้ท่านสามารถพัฒนา CSS ได้ด้วยความเข้าใจ และแก้ไขได้เมื่อเกิดปัญหาขึ้น
การประกาศ CSS แบบ Inline
เป็นการกำหนด CSS ไว้ในแท๊กของ HTML โดยใช้แอททริบิวต์ "Style" ซึ่งการกำหนดในลักษณะนี้จะส่งผลเฉพาะข้อมูลในแท๊กเท่านั้น
รูปแบบ
โค๊ด:
<html tag style = "Property : Value;"> </html tag>
ตัวอย่าง
โค๊ด:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>datatan</title>
</head>
<body>
<p style = "font-family : Ms sans serif; font-size : 14; color : red; text-align : center;">
ยินดีต้อนรับเข้าสู่ Datatan : <span style = "color : blue;">ขอบคุณสำหรับน้ำใจที่แบ่งปัน</span></p>
</body>
</html>
การประกาศ CSS แบบ Embedded
เป็น การประกาศ CSS ไว้ระหว่างแท๊ก <head>...</head> ใน HTML ซึ่งการใช้รูปนี้จะเป็นต้นแบบของแท๊กที่ถูกกำหนด ให้เป็นลักษณะเหมือนกัน
รูปแบบ
โค๊ด:
<head>
<style type = "text/css">
<!- -
html tag {Property : Value;}
- ->
</style>
</head>
ตัวอย่าง
โค๊ด:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>datatan</title>
<style type = "text/css">
<!--
p { font-family : Ms sans serif; font-size : 14; color : red; }
span { font-family : Ms sans serif; font-size : 14; color : blue; }
-->
</style>
</head>
<body>
<center>
<p>ยินดีต้อนรับเข้าสู่ Datatan : <span>ขอบคุณสำหรับน้ำใจที่แบ่งปัน</span></p>
</center>
</body>
</html>
การประกาศ CSS แบบ External
เป็นการประกาศ CSS โดยสร้างไฟล์แยกออกจากเอกสาร (.css) ซึ่งสามารถเรียกใช้ได้ 2 วิธี ดังนี้
* 1. กำหนดแท๊ก <link>
* 2. ใช้คำสั่ง import
1. การเรียกใช้ CSS แบบ External โดยใช้แท๊ก Link
รูปแบบ
โค๊ด:
<head>
<link rel = "stylesheet" href = "Filename .css" type = "text/css" />
</head>
ตัวอย่าง
ขั้นแรกสร้างไฟล์ "datatan.css" โดยมีโค๊ดคำสั่งดังนี้
โค๊ด:
p { font-family : Ms sans serif; font-size : 14; color : red; }
span { font-family : Ms sans serif; font-size : 14; color : blue; }
จากนั้นให้เปิดโปรแกรม Notepad หรือ Text Editor ขึ้นมาจากนั้นพิมพ์คำสั่งดังนี้
โค๊ด:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>datatan</title>
<link rel = "stylesheet" href = "datatan.css" type = "text/css" />
</head>
<body>
<center>
<p>ยินดีต้อนรับเข้าสู่ Datatan : <span>ขอบคุณสำหรับน้ำใจที่แบ่งปัน</span></p>
</center>
</body>
</html>
2. การเรียกใช้ CSS แบบ External โดยคำสั่ง import
โค๊ด:
<head>
<style>
<!--
@import url("Filename.css");
-->
</style>
</head>
ตัวอย่าง
ขั้นแรกสร้างไฟล์ "datatan.css" โดยมีโค๊ดคำสั่งดังนี้
โค๊ด:
p { font-family : Ms sans serif; font-size : 14; color : red; }
span { font-family : Ms sans serif; font-size : 14; color : blue; }
จากนั้นให้เปิดโปรแกรม Notepad หรือ Text Editor ขึ้นมาจากนั้นพิมพ์คำสั่งดังนี้
โค๊ด:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>datatan</title>
<style>
<!--
@import url("datatan.css");
-->
</style>
</head>
<body>
<center>
<p>ยินดีต้อนรับเข้าสู่ Datatan : <span>ขอบคุณสำหรับน้ำใจที่แบ่งปัน</span></p>
</center>
</body>
</html>
ทั้งหมดนี้คือการเรียกใช้งาน CSS ในแบบต่างๆ ครับ ซึ่งรูปร่างหน้าตาจะออกมาเหมือนกัน ดังรูป
