استایل بندی در HTML
استایل بندی در HTML
استایل یا سبک در HTML برای تعیین مشخصات عناصر سند استفاده می شود.
خصیصه Style در سند HTML
می توان سبک و استایل یک عنصر HTML را با استفاده از خصیصه Style تعیین کرد. خصیصه Style در سند HTML دارای دستور بیان (syntax) زیر است:
| <tagname style=”property:value;”> |
این دستور به این شکل تفسیر می شود: تگ tagname دارای سبک style برای ویژگی property تگ با مقدار value است. این ویژگی یک ویژگی CSS بوده و مقدار value نیز یک مقدار CSS است.
در مورد CSS در ادامه مطالب بیشتر می آموزیم.
رنگ پس زمینه در HTML
ویژگی background-color رنگ پس زمینه یک عنصر HTML را مشخص می کند. در مثال زیر رنگ پس زمینه بدنه سند به آبی نیمه روشن ست می شود:
| <body style=”background-color:powderblue;”> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> |
رنگ متن در HTML
ویژگی color رنگ متن یک سند یا عنصر HTML را تعیین می کند. مثال:
| <h1 style=”color:blue;”>This is a heading</h1> <p style=”color:red;”>This is a paragraph.</p> |
در کد فوق متن خط اول به رنگ آبی و متن خط دوم به رنگ قرمز در صفحه مرورگر ظاهر می شود.
فونت متن در HTML
خصیصه font-family فونت مورد استفاده توسط یک عنصر HTML را تعیین می کند. در مثال زیر از خصیصه font-family برای تعیین فونت متن تیتر 1 و متن پاراگراف استفاده شده است:
| <h1 style=”font-family:verdana;”>This is a heading</h1> <p style=”font-family:courier;”>This is a paragraph.</p> |
سایز متن در HTML
برای تعیین سایز متن در HTML از ویژگی font-size استفاده می شود. این ویژگی برای تعیین سایز متن یک عنصر استفاده می شود. در مثال زیر اندازه متن تیتر 1 به سه برابر و اندازه متن پاراگراف به 160% ست می شود:
| <h1 style=”font-size:300%;”>This is a heading</h1> <p style=”font-size:160%;”>This is a paragraph.</p> |
چیدمان متن در HTML
ویژگی text-align چیدمان افقی متن را برای یک عنصر HTML مشخص می کند. در مثال زیر متن تیتر 1 و متن پاراگراف به صورت وسط چین نمایش می یابد:
| <h1 style=”text-align:center;”>Centered Heading</h1> <p style=”text-align:center;”>Centered paragraph.</p> |
