0 Comments | Posted by Development Team in Programming
สวัสดีครับ ครั้งที่แล้วผมเขียนเรื่องการ Design หน้า content แบบ HCF (Header Content and Footer) โดย การใช้ Table เพื่อควบคุม Layout ทั้งหมดใน Email ไปแล้ว คราวนี้ เราจะมาเจาะลึกการทำ Inline Style Sheet ใส่ Email ของเราบ้างเพื่อความสวยงามครับ
การกำหนด Style Sheets แบบ Inline ก็คือการกำหนดรูปแบบการแสดงผลของ Tag ภายใน Tagนั้น ๆ เลย โดยจะมีผลต่อ Tag นั้น ๆ Tag เดียวที่เราทำการกำหนด Style ให้มัน โดยใช้ Attribute “style” ภายใน Tag ที่ต้องการกำหนดให้ เราลองไปดูตัวอย่างเบื้องต้นของการกำหนด Inline Style Sheet กันครับ
ตัวอย่างเบื้องต้นของการกำหนด Inline Style Sheet
<tablestyle='border: 1px solid black; margin: auto;"><tr><tdstyle="text-align: right; font-size: 18pt;">Some text aligned left.</td></tr></table>
จากตัวอย่างจะเห็นว่ามีการกำหนด Style ให้กับ Tag table โดยกำหนดภายใน Attribute “style” แต่ถึงแม้เราจะมี Tag table กี่Tagก็ตามมันจะไม่มีผลกระทบด้วยเลย เพราะมันหมายความว่ากำหนด Style ให้กับTagนั้น ๆ เพียงTagเดียว
ตัวอย่างการกำหนด Inline Style Sheet หลาย ๆ Tag
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><metahttp-equiv="content-type"content="text/xhtml; charset=utf-8"/><metahttp-equiv="content-language"content="th"/><title>Inline Style Sheet</title></head><body><h1style="color:black;border: 5px solid black;letter-spacing: 5px;padding: 10px;">Heading 1<h1><h2style="color: orange;border: 4px solid orange;letter-spacing: 5px;padding: 10px;">Heading 2</h2><h3style="color: blue;border: 3px solid blue;letter-spacing: 5px;padding: 10px;">Heading 3</h3><pstyle="font-family: Arial;font-size: 14pt;">Selectors choose the element to apply formatting to.</p></body></html>
หมายเหตุ : – เราสามารถใช้วิธีนี้ กับ HTMLTagใดก็ได้ ยกเว้นTagBASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE
