Inline Styles
การกำหนด Style Sheets แบบ Inline
ก็คือการกำหนดให้ภายในแท็กนั้น ๆ เลย โดยจะมีผลต่อแท็กนั้น ๆ
แท็กเดียวที่เราทำการกำหนด Style ให้มัน โดยใช้ Attribute "style"
ภายในแท็กที่ต้องการกำหนดให้ เราลองไปดูตัวอย่างเบื้องต้นของการกำหนด
Inline Style Sheet กันครับ
จากตัวอย่างจะเห็นว่ามีการกำหนด Style ให้กับแท็ก table โดยกำหนดภายใน Attribute "style" แต่ถึงแม้เราจะมีแท็ก table กี่แท็กก็ตามมันจะไม่มีผลกระทบด้วยเลย เพราะมันหมายความว่ากำหนด Style ให้กับแท็กนั้น ๆ เพียงแท็กเดียว
tag)
และ External style sheet ตามลำดับ
จากลำดับความสำคัญดังกล่าว Style ที่จะถูกใช้คือแบบ Inline style
2. กรณีที่มีการเขียน style ซ้ำ selector เดิม อันที่อยู่ด้านล่าง จะถูกทำเป็นลำดับสุดท้าย
ตัวอย่าง ไฟล์ mystyle.css
p{ color:black }
p{ color:blue }
เมื่อเราเรียกใช้ ใน HTML เช่น
รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอตัวอย่างเบื้องต้นของการกำหนด 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 ให้กับแท็ก table โดยกำหนดภายใน Attribute "style" แต่ถึงแม้เราจะมีแท็ก table กี่แท็กก็ตามมันจะไม่มีผลกระทบด้วยเลย เพราะมันหมายความว่ากำหนด Style ให้กับแท็กนั้น ๆ เพียงแท็กเดียว
ตัวอย่างการกำหนด Inline Style Sheet หลาย ๆ แท็ก
01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"03.<html>04.<head>05.<meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />06.<meta http-equiv="content-language" content="th" />07.<title>Inline Style Sheet</title>08.</head>09.<body>10.<h1 style="color:black;11.border: 5px solid black;12.letter-spacing: 5px;13.padding: 10px;">14.Heading 115.<h1>16.<h2 style="color: orange;17.border: 4px solid orange;18.letter-spacing: 5px;19.padding: 10px;">20.Heading 221.</h2>22.<h3 style="color: blue;23.border: 3px solid blue;24.letter-spacing: 5px;25.padding: 10px;">26.Heading 327.</h3>28. 29.<p style="font-family: Arial;30.font-size: 14pt;">31.Selectors choose the element to apply formatting to.32.</p>33.</body>34.</html>จะได้ตัวอักษรใน Tag เป็นสีน้ำเงิน แต่หากเรากำหนด !important ไว้ใน value เช่น p{color:black!important} p{color:blue} เมื่อเขียนแบบนี้ ใน Tag จะได้ตัวอักษรสีดำ
