เขียน style sheet ใส่ในหน้าเว็บ

จากที่เราได้รู้วิธีใช้ style sheet ที่อยู่ด้านนอกของหน้าเว็บมาแล้ว มาคราวนี้เราจะมาดูวิธีการเขียน style sheet แบบใส่เข้าไปในหน้าเว็บเลย ไม่ต้องแยกไฟล์ออกมาต่างหาก ซึ่งเราสามารถเขียนใส่ได้ในส่วนหัวของเว็บ xhtml ของเรานั่นเอง แต่อย่างไรก็ดี ถ้าคุณมีแผนที่จะใช้ style sheet นี้กับอีกหลายๆหน้า เราก็แนะนำให้ใช้แบบแยกไฟล์ออกมาอยู่ดี

การสร้าง style sheet แบบใส่ในหน้าเว็บเลย
1.ใน head section ของหน้าเว็บ xhtml ให้เราพิมพ์ <style type=”text/css”>
2. ก็เขียน rule ของ css ใส่ได้ตามใจชอบ
3.พิมพ์ </style> เพื่อทำให้ คำสั่งของ CSS สมบูรณ์

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=tis-620″ />
<title>Untitled Document</title>
<style type=”text/css”>
img { border: 4px solid red; }
</style>
</head>
<body>
<p>เราก็จะถือว่านี้คือย่อหน้าปรกติ</p>
<p><img src=”mindwebhost_logo.png” /></p>
สิ่งเพิ่มเติมที่? 8.10 การเขียน style sheet แบบฝังเข้าไปในหน้าเว็บ

รูปแสดงผลจากโค้ด จะเห็นได้ว่า ถ้าเราเขียน rule เหมือนกัน ไม่ว่าจะแยกไฟล์หรือไม่ก็สามารถแสดงผลได้เช่นเดียวกัน

รูปแสดงผลจากโค้ด จะเห็นได้ว่า ถ้าเราเขียน rule เหมือนกัน ไม่ว่าจะแยกไฟล์หรือไม่ก็สามารถแสดงผลได้เช่นเดียวกัน

สิ่งเพิ่มเติมที่ 8.11 รูปแสดงผลจากโค้ด จะเห็นได้ว่า ถ้าเราเขียน rule เหมือนกัน ไม่ว่าจะแยกไฟล์หรือไม่ก็สามารถแสดงผลได้เช่นเดียวกัน

เพิ่มเติม
-การเขียน style ในหน้าเว็บนั้น rule ที่เราเขียนแบบฝังเอาไว้ จะมีผลทับกับแบบ แยกไฟล์ต่อเมื่อคำสั่ง style มาก่อน link เท่านั้น หากสลับกัน ก็จะทำให้ style sheet แบบแยกไฟล์มีผลที่สำคัญกว่าแบบในหน้าเว็บทันที
-การใส่ XHTML comment tag (<!–) หลังจากที่เราเปิด <style> และ (–>) ก่อนปิด </style> จะทำให้เราสามารถซ่อนโค้ด style sheet จาก browser เวอร์ชั่นเก่าๆได้?? สำหรับใน XHTML คุณจะต้องเขียน style sheet ในคำสั่ง <![CDATA[... ..]]> เพื่อป้องกันการอ่านจากตัว XML parsers (จะกล่าวในภายหลัง)
-ถ้าคุณต้องการนำเอา style sheet ดังกล่าวไปใช้กับหลายๆหน้าควรทำด้วยวิธีการแยกไฟล์ออกมา ซึ่งมีวิธีอยู่ในบทที่เราได้กล่าวไปแล้ว
-ถ้าคุณใช้ style sheet language ที่ต่างกันออกไป เช่น พวก XSL คุณจะต้องกำหนด ใน type ให้ ถูกต้องด้วย( เช่น text/xsl)

No comments yet.
You must be logged in to post a comment.