การเชื่อมหน้าเว็บให้เรียกใช้ style sheet จากที่อื่น

เป็นขั้นตอนที่ไม่ยากเลยและเป็นสิ่งที่ควรทำกับทุกหน้าของเว็บเพื่อที่จะได้เรียกใช้ style sheet จากไฟล์เดียวกัน เวลาแก้ไขก็จะมีผลต่อทั้งเว็บเลย

จากบทความก่อน ทำให้ตอนนี้เรามี css ที่ชื่อ styles.css แล้วนะครับ ซึ่งข้างในมี rule ว่าimg { border: 4px solid red; }

การเชื่อมหน้าเว็บเพื่อดึง style sheet เข้ามาใช้
1.ในส่วนของ head section ของหน้าเว็บ xhtml ที่ต้องการเรียกใช้ style sheet พิมพ์ <link rel=”stylesheet” type=”text/css” โดยที่ text/css นั่นเป็นตัวบอกว่าเราจะดึงไฟล์ที่เขียนเป็น css เข้ามานั่นเอง
2. พิมพ์ href=”url.css” โดยที่ url.css นั้นคือชื่อของ style sheet ที่เราได้สร้างขึ้นมา อย่างของผมก็คือ styles.css นั่นเอง
3.พิมพ์ /> เพื่อปิด ส่วนการเรียกใช้

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=tis-620″ />
<title>Untitled Document</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
</head>
<body>
<p>เราก็จะถือว่านี้คือย่อหน้าปรกติ</p>
<p><img src=”mindwebhost_logo.png” /></p>
สิ่งเพิ่มเติมที่ 8.3 โค้ดการเชื่อม css เข้ามาใช้ในหน้าเว็บนี้ โดยการเชื่อมจะปรากฏใน head section ตามขั้นตอน

เพิ่มเติม
- เมื่อคุณแก้ไข style sheet หน้าเว็บทุกหน้าที่มีการเรียกใช้ style sheet อันที่ถูกแก้ไขนั้น จะมีการเปลี่ยนไปโดยอัตโนมัติ โดยที่เราไม่ต้องทำอะไรเลย
- URLs ที่ใช้อ้างถึง style sheet เป็นการ relative กับตำแหน่งของการเก็บ style sheet เท่านั้น ไม่ได้เป็นการ relative กับตำแหน่งหน้าเว็บ XHTML

apply style sheet to web page
สิ่งเพิ่มเติมที่ 8.4 หน้าเว็บที่เรียกใช้ style sheet นี้จะเห็นว่ารูปนั้นมีเส้นขอบหน้า 4 pixel ปรากฏให้เห็นทันที

- เราสามารถเขียน style sheet ทับในหน้าเว็บได้อีก เพื่อสร้างความแตกต่างใน style ในหน้านั้นๆได้
- คุณสามารถลิ้งค์ไปยังหลายๆ style sheet ได้ในหน้าเดียวกัน แต่ style sheet ที่ถูกเรียกทีหลังจะมีผลทับอันก่อนหน้า (หากเขียน rule สำหรับ element เดียวกัน)
- คุณสามารถจำกัดการแสดงผลของ style sheet ได้ด้วยการระบุ media attribute ซึ่งจะกล่าวถึงต่อไป

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