استایل بندی در HTML

استایل یا سبک در HTML برای تعیین مشخصات عناصر سند استفاده می شود.

خصیصه Style در سند HTML

می توان سبک و استایل یک عنصر HTML را با استفاده از خصیصه Style تعیین کرد. خصیصه Style در سند HTML دارای دستور بیان (syntax) زیر است:

این دستور به این شکل تفسیر می شود: تگ 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 برای تعیین فونت متن تیتر ۱ و متن پاراگراف استفاده شده است:

<h1 style=”font-family:verdana;”>This is a heading</h1>
<p style=”font-family:courier;”>This is a paragraph.</p>

سایز متن در HTML

برای تعیین سایز متن در HTML از ویژگی font-size استفاده می شود. این ویژگی برای تعیین سایز متن یک عنصر استفاده می شود. در مثال زیر اندازه متن تیتر ۱ به سه برابر و اندازه متن پاراگراف به ۱۶۰% ست می شود:

<h1 style=”font-size:300%;”>This is a heading</h1>
<p style=”font-size:160%;”>This is a paragraph.</p>