HTML Styles การจัดรูปแบบสไตล์
ในภาษา HTML เราสามารถใช้แอททริบิวต์ style เพื่อกำหนดสไตล์ให้ตัวอักษร รูปภาพ หรืออื่น ๆ ได้ ซึ่งมีรูปแบบการใช้งานดังนี้
<tagname style="property:value;">- tagname คือ ชื่อแท็ก
- property คือ css property
- value คือ css value
การกำหนดสีพื้นหลัง ด้วย background-color
เราสามารถใช้ css property ที่ชื่อว่า background-color เพื่อกำหนดสีพื้นหลังให้อิลิเมนต์ได้ ดังนี้
<body style="background-color:blue;"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body>
การกำหนดสีอักษร ด้วย color
เราสามารถกำหนดสีตัวอักษรด้วย css property ที่ชื่อว่า color ดังตัวอย่าง
<h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p>
กำหนดฟอนต์ตัวอักษรด้วย font-family
เราสามารถกำหนดฟอนต์ตัวอักษรให้ข้อความได้ด้วย css property ที่ชื่อว่า font-family ดังนี้
<h1 style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p>
กำหนดขนาดฟอนต์ด้วย font-size
เราสามารถกำหนดขนาดตัวอักษรด้วย css property ที่ชื่อว่า font-size ดังนี้
<h1 style="font-size:300%;">This is a heading</h1> <p style="font-size:160%;">This is a paragraph.</p>
กำหนดตำแหน่งตัวอักษรด้วย text-align
เราสามารถใช้ css property ที่ชื่อว่า text-align จัดตำแหน่งตัวอักษร เช่น ชิดซ้าย ชิดขวา กึ่งกลาง เป็นต้น ดังนี้
<h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p>
