ฝัง style เข้าไปในโค้ด

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

การฝัง style เข้าไปในโค้ดหน้าเว็บ
1.ในโค้ด XHTML tag ที่เราต้องการกำหนด style ให้เราพิมพ์ style=”
2.สร้าง style rule
3.ถ้าเราต้องการเพิ่ม style rule ใหม่เข้าไปอีกให้คั่นด้วย ; แล้วทำข้อ 2 ใหม่อีกครั้ง
4.พิมพ์ ”

<title>Untitled Document</title>
</head>
<body>
<p>เราก็จะถือว่านี้คือย่อหน้าปรกติ</p>
<p><img src=”mindwebhost_logo.png” style=”border: 4px solid red”/></p>
</body>
สิ่งเพิ่มเติมที่ 8.15 style ที่ฝังเข้าไปในโค้ด โดยเราจะกำหนดให้รูปดังกล่าวมีเส้นขอบหนา 4 px และมีสีแดง

สิ่งเพิ่มเติมที่ 8.16 จะเห็นได้ว่ารูปนั้นจะมีเส้นขอบสีแดง ขนาด 4 px ตามที่เราได้กำหนดเอาไว้ในโค้ด ทั้งๆที่เราไม่ได้ import หรือ link style sheet เข้ามาในเว็บเลย

เพิ่มเติม
-ต้องระวังการใช้งานเครื่องหมาย = และ : เพราะว่าอาจจะทำให้ tag ที่ใช้งานปรกตินั้นเพี้ยนไปได้
-อย่าลืมคั่นแต่ละ ค่า property ของแต่ละ style ด้วย ;
-อย่าลืมปิดการจบ style ด้วยเครื่องหมาย ”
ถ้าคุณกำหนดรูปแบบของ font ในการฝังโค้ดนี้ คุณจะต้องครอบชื่อ font ที่มีหลายพยางค์ แบบไม่ติดกันด้วย ‘ (ฟันหนูเดียว) และครอบ style ด้วยฟันหนู ” เหมือนเดิม โดยที่ไม่สามารถครอบ ชื่อ font ด้วยเครื่องหมาย ” เพราะว่าจะทำให้เกิดข้อผิดพลาด

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