100% کامل شده تا

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

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


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


Responsive demo.svg


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

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

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

<tagname style="property:value;">


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

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


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

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

مثال

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

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

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

</body>

مثال

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

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

</body>
</html>

Responsive demo.svg


مثال

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

<body>

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

</body>

مثال

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Responsive demo.svg




رنگ متن (Text Color)

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

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Responsive demo.svg



قلم‌ها (Fonts)

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

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Responsive demo.svg




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

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

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Responsive demo.svg



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

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

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Centered Heading</h1>
<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 برای محل قرار گرفتن متن استفاده می‌شود

منابع آموزشی




به‌روزرسانی شده: ۳۸ روز پیش