100% کامل شده تا
به‌روزرسانی شده در: ۲۸ روز پیش

استایل‌ها در اچ‌تی‌ام‌ال (HTML Styles)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


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


Responsive demo.svg


ویژگی استایل در اچ‌تی‌ام‌ال (The HTML Style Attribute)

تنظیم استایل یک عنصر HTML را می‌توان توسط ویژگی style انجام داد.[۱]

ویژگی style در HTML، دارای نحو (Syntax) زیر است:

<tagname style="property:value;">


property یک خصوصیت CSS است. value یک مقدار CSS است.

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

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

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

مثال

این مثال رنگ پیش زمینه یک صفحه را برابر powderblue تنظیم می‌کند:

<body style="background-color:powderblue;">

=This is a heading=
<p>This is a paragraph.</p>

</body>

مثال

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

=This is a heading=
<p>This is a paragraph.</p>

</body>
</html>

Responsive demo.svg


مثال

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

<body>

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

</body>

مثال

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Responsive demo.svg




رنگ متن (Text Color)

ویژگی color در CSS، رنگ متن را برای یک عنصر HTML تعریف می‌کند:

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Responsive demo.svg


قلم‌ها (Fonts)

ویژگی CSS font-family، فونت مورد استفاده برای عنصر HTML را تعریف می‌کند:

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Responsive demo.svg


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

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

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Responsive demo.svg


محل قرارگیری متن (Text Alignment)

خصوصیت text-align CSS محل قرارگیری افقی متن را برای یک عنصر HTML مشخص می‌کند:

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Responsive demo.svg


خلاصهٔ بخش (Chapter Summary)

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

منابع آموزشی