เรียน...พี่น้องชาว Dexmore
สำหรับการประกาศสไตล์ซีทหรือ 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> DexMore </title>
</head>
<body>
<p style = "font-family : Ms sans serif; font-size : 14; color : red; text-align : center;">
ยินดีต้อนรับเข้าสู่เด็กมอร์ : <span style = "color : blue;">ขอบคุณสำหรับน้ำใจที่แบ่งปัน</span></p>
</body>
</html>
เป็นการประกาศ 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>DexMore</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>ยินดีต้อนรับเข้าสู่เด็กมอร์ : <span>ขอบคุณสำหรับน้ำใจที่แบ่งปัน</span></p>
</center>
</body>
</html>
เป็นการประกาศ CSS โดยสร้างไฟล์แยกออกจากเอกสาร (.css) ซึ่งสามารถเรียกใช้ได้ 2 วิธี ดังนี้
- 1. กำหนดแท๊ก <link>
- 2. ใช้คำสั่ง import
1. การเรียกใช้ CSS แบบ External โดยใช้แท๊ก Linkรูปแบบ<head>
<link rel = "stylesheet" href = "ไฟล์ .css" type = "text/css" />
</head>
ตัวอย่างขั้นแรกสร้างไฟล์ "dexmore.css" โดยมีโค๊ดคำสั่งดังนี้
p { font-family : Ms sans serif; font-size : 14; color : red; }
span { font-family : Ms sans serif; font-size : 14; color : blue; }
สร้างไฟล์เอกสาร และเรียกใช้ CSS โดยใช้แท๊ก <link>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>DexMore</title>
<link rel = "stylesheet" href = "dexmore.css" type = "text/css" />
</head>
<body>
<center>
<p>ยินดีต้อนรับเข้าสู่เด็กมอร์ : <span>ขอบคุณสำหรับน้ำใจที่แบ่งปัน</span></p>
</center>
</body>
</html>
<head>
<style>
<!--
@import url("ไฟล์ .css");
ิ -->
</style>
</head>
ตัวอย่างขั้นแรกสร้างไฟล์ "dexmore.css" โดยมีโค๊ดคำสั่งดังนี้
p { font-family : Ms sans serif; font-size : 14; color : red; }
span { font-family : Ms sans serif; font-size : 14; color : blue; }
สร้างไฟล์เอกสาร และเรียกใช้ CSS โดยใช้คำสั่ง import
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>DexMore</title>
<style>
<!--
@import url("dexmore.css");
ิ -->
</style>
</head>
<body>
<center>
<p>ยินดีต้อนรับเข้าสู่เด็กมอร์ : <span>ขอบคุณสำหรับน้ำใจที่แบ่งปัน</span></p>
</center>
</body>
</html>
ทั้งหมดนี้คือการเรียกใช้งาน CSS ในแบบต่างๆ ครับ ซึ่งรูปร่างหน้าตาจะออกมาเหมือนกัีน ดังรูป
หมายเหตุ : ลำดับความสำคัญของการประกาศ CSS จากมากไปหาน้อย
- Inline > Embedded > Link > Import
ในกระทู้ต่อไปผมจะมาให้ความรู้เกี่ยวกับเรื่องเหล่านี้น่ะครับผม เช่น การเรียกสไตล์ซ้ำซ้อน, ลำดับความสำคัญของแต่ละรูปแบบ ยังไงถ้าชอบก็ลองติดตามกันต่อไปครับ
เจ้าของบทความโดย : DexMore
ลิงค์หัวข้อ:
http://dexmore.com/topic/617 
Web Achieve 
หน้า: 1 
Powered by 