DeeMocDIY Blog » HTML http://blog.deemocdiy.com ทุกอย่างที่คุณอยากรู้เกี่ยวกับ Email Marketing Wed, 28 Jul 2010 08:27:26 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 How to Code HTML Email Newsletter : Part II Inline Style Sheet http://blog.deemocdiy.com/how-to-code-html-email-newsletter-part-ii-inline-style-sheet/ http://blog.deemocdiy.com/how-to-code-html-email-newsletter-part-ii-inline-style-sheet/#comments Mon, 11 Jan 2010 08:39:04 +0000 Development Team http://blog.deemocdiy.com/?p=245

สวัสดีครับ ครั้งที่แล้วผมเขียนเรื่องการ 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

  1. <table style='border: 1px solid black; margin: auto;">
  2. <tr>
  3. <td style="text-align: right; font-size: 18pt;">
  4. Some text aligned left.
  5. </td>
  6. </tr>
  7. </table>

จากตัวอย่างจะเห็นว่ามีการกำหนด Style ให้กับ Tag table โดยกำหนดภายใน Attribute “style” แต่ถึงแม้เราจะมี Tag table กี่Tagก็ตามมันจะไม่มีผลกระทบด้วยเลย เพราะมันหมายความว่ากำหนด Style ให้กับTagนั้น ๆ เพียงTagเดียว

ตัวอย่างการกำหนด Inline Style Sheet หลาย ๆ Tag

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
  6. <meta http-equiv="content-language" content="th" />
  7. <title>Inline Style Sheet</title>
  8. </head>
  9. <body>
  10. <h1 style="color:black;
  11. border: 5px solid black;
  12. letter-spacing: 5px;
  13. padding: 10px;">
  14. Heading 1
  15. <h1>
  16. <h2 style="color: orange;
  17. border: 4px solid orange;
  18. letter-spacing: 5px;
  19. padding: 10px;">
  20. Heading 2
  21. </h2>
  22. <h3 style="color: blue;
  23. border: 3px solid blue;
  24. letter-spacing: 5px;
  25. padding: 10px;">
  26. Heading 3
  27. </h3>
  28. <p style="font-family: Arial;
  29. font-size: 14pt;">
  30. Selectors choose the element to apply formatting to.
  31. </p>
  32. </body>
  33. </html>

หมายเหตุ : – เราสามารถใช้วิธีนี้ กับ HTMLTagใดก็ได้ ยกเว้นTagBASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE

Share/Bookmark]]> http://blog.deemocdiy.com/how-to-code-html-email-newsletter-part-ii-inline-style-sheet/feed/ 0