استایل HTML

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

این متن در Verdana و قرمز است
این متن در Times و آبی است
این متن 30 پیکسل ارتفاع دارد

تست کنید

ویژگی style HTML

عملکرد ویژگی style:

یک روش عمومی برای تغییر استایل همه عناصر HTML ارائه می‌دهد.

استایل در HTML 4 معرفی شده است، که یک روش جدید و پیشنهادی برای تغییر استایل عناصر HTML است. از طریق استایل HTML، می‌توانید مستقیماً از طریق ویژگی style استایل به عناصر HTML اضافه کنید یا به صورت غیرمستقیم در یک جدول استایل مستقل (فایل CSS) تعریف کنید.

شما می‌توانید در آموزش CSSدر اینجا همه دانش مربوط به استایل و CSS را یاد می‌گیرید.

در آموزش HTML ما از ویژگی style برای توضیح استایل HTML استفاده خواهیم کرد.

برچسب‌ها و ویژگی‌های غیرقابل استفاده

در HTML 4، تعدادی از برچسب‌ها و ویژگی‌ها منسوخ شده‌اند. منسوخ شده (Deprecated) به معنای این است که در نسخه‌های آینده HTML و XHTML از این برچسب‌ها و ویژگی‌ها پشتیبانی نخواهد شد.

معلوماتی که اینجا منتقل می‌شود واضح است: از این برچسب‌ها و ویژگی‌های منسوخ شده اجتناب کنید!

باید از این برچسب‌ها و ویژگی‌ها اجتناب کنید:

برچسب توضیح
<center> محتوای مرکزی را تعریف کنید.
<font> و <basefont> شکل فون HTML را تعریف کنید.
<s> و <strike> تекст خط کشیده را تعریف کنید
<u> تекст زیرخط دار را تعریف کنید
ویژگی توضیح
align حالت تراز متن را تعریف کنید
bgcolor رنگ پس‌زمینه را تعریف کنید
color رنگ متن را تعریف کنید

برای این برچسب‌ها و ویژگی‌ها: از استایل استفاده کنید!

مثال‌های استایل HTML - رنگ پس‌زمینه

ویژگی background-color رنگ پس‌زمینه عناصر را تعریف می‌کند:

<html>
<body style="background-color:yellow">
<h2 style="background-color:red">این یک عنوان است</h2>
<p style="background-color:green">این یک پاراگراف است.</p>
</body>
</html>

تست کنید

ویژگی style جایگزین کرده است "bgcolor" قدیمی.

تست کنید: روش قدیمی برای تنظیم رنگ پس‌زمینه

مثال‌های استایل HTML - فونت، رنگ و اندازه

ویژگی‌های font-family،color و font-size به ترتیب جلوه‌دهی کدنویسی، رنگ و اندازه فونت متن در عناصر را تعریف می‌کنند:

<html>
<body>
<h1 style="font-family:verdana">یک عنوان</h1>
<p style="font-family:arial;color:red;font-size:20px;">یک پاراگراف.</p>
</body>
</html>

تست کنید

ویژگی style جایگزین کرده است برچسب <font> قدیمی.

تست کنید: روش قدیمی برای تنظیم فونت

مثال‌های استایل HTML - قرار دادن متن

ویژگی text-align روش قرار دادن افقی متن در عناصر را مشخص می‌کند:

<html>
<body>
<h1 style="text-align:center">این یک عنوان است</h1>
<p>عنوان بالا در وسط این صفحه قرار دارد.</p>
</body>
</html>

تست کنید

ویژگی style جایگزین کرده است "align" قدیمی.

تست کنید: روش قدیمی برای قرار دادن وسط قرار دادن