کدلپر - مرجع جامع آموزش برنامه‌نویسی

All Right Reserved © 2025 Codoloper

background codoloper

سبک های HTML

خانه

استایل‌ها در HTML

ویژگی style در HTML برای افزودن استایل‌ها (ظاهر ظاهری) به عناصر استفاده می‌شود. مثل رنگ، فونت، اندازه و موارد دیگر.

مثال :

I am Red

I am Blue

I am Big

 ویژگی Style در HTML

برای تعیین استایل یک عنصر HTML، از ویژگی style استفاده می‌شود.

نحوه نگارش:

 
<tagname style="property:value;">

 مقدار property یک ویژگی CSS است و value مقدار آن ویژگی در CSS است.

 نگران CSS نباش! در ادامه آموزش بیشتر با آن آشنا خواهی شد.

 رنگ پس‌زمینه (Background Color)

ویژگی background-color در CSS، رنگ پس‌زمینه یک عنصر HTML را مشخص می‌کند.

مثال: تعیین رنگ پس‌زمینه کل صفحه

<body style="background-color: powderblue;">
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

مثال: رنگ پس‌زمینه برای دو عنصر مختلف

<body>
  <h1 style="background-color: powderblue;">This is a heading</h1>
  <p style="background-color: tomato;"> This is a paragraph.</p>
</body>

 رنگ متن (Text Color)

ویژگی color در CSS، رنگ متن یک عنصر HTML را مشخص می‌کند.

مثال (کد):

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
 

فونت‌ها (Fonts)

ویژگی font-family در CSS فونت مورد استفاده برای متن عنصر را مشخص می‌کند.

مثال (کد):

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

🔠 اندازه متن (Text Size)

ویژگی font-size اندازه متن یک عنصر HTML را مشخص می‌کند.

مثال (کد):

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

 ترازبندی متن (Text Alignment)

ویژگی text-align در CSS جهت افقی متن را مشخص می‌کند.

مثال (کد):

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

📚 خلاصه فصل

🔹 برای استایل‌دهی به عناصر HTML از ویژگی style استفاده کنید.
🔹 از background-color برای رنگ پس‌زمینه استفاده کنید.
🔹 از color برای رنگ متن استفاده کنید.
🔹 از font-family برای تعیین نوع فونت استفاده کنید.
🔹 از font-size برای اندازه متن استفاده کنید.
🔹 از text-align برای تنظیم ترازبندی متن استفاده کنید.