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

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

I am Red
I am Blue
I am Big

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

می توان سبک و استیل یک عنصر 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>

خلاصه بخش اول

  • از خصیصه style برای قالب دهی به عناصر HTML استفاده می شود
  • از ویژگی background-color برای تعیین رنگ پس زمینه عنصر استفاده می شود
  • از ویژگی color برای تعیین رنگ متن استفاده می شود
  • از ویژگی font-family برای تعیین فونت متن استفاده می شود
  • از ویژگی font-size برای تعیین سایز فونت متن استفاده می شود
  • از ویژگی text-align برای تعیین چیدمان متن استفاده می شود

اگر در اجرای این راهنما به مشکل برخورد کردید و سایر سئوالات و پیشنهادات خود را در بخش سئوالات عمومی انجمن پلکسا مطرح نمایید. گروه توسعه وب پلکسا به سئوالات شما پاسخ خواهند داد.

عضویت در خبرنامه پلکسا

در صورت تمایل ایمیل خود را وارد کنید و تازه های پلکسا را از طریق ایمیل دریافت کنید. خبرنامه الکسا هفته نامه بوده و حاوی جدیدترین مطالب و نشریات پلکسا است.

با ما شریک شوید

با ما باشید

قابل توجه وبمسترها

وبمستر گرامی

در صورتی که به دنبال جذب بازدید کننده یا ارتقای رنکینگ سایت خود هستید، پیشنهاد می کنیم پلکسا را یک پست یا مطلب مهمان کنید. همانطور که برای سایت خود مطلب می نویسید، مطلب خود را آماده و کد نویسی کرده و در پلکسا منتشر کنید. پلکسا هیچگونه دخل یا تصرفی در پست شما نخواهد داشت.