اجرای کد
بی آکادمی
آموزش html
استایل دهی
inline
ذخیره کد
دانلود کد
مثال‌ها
تغییر تم
×
مثال‌های آماده
برای استفاده از هر مثال، روی آن کلیک کنید:
ساختار پایه HTML
یک صفحه HTML ساده با ساختار اصلی
جدول ساده
یک جدول HTML با استایل زیبا
فرم تماس
فرم تماس با فیلدهای مختلف
استایل‌دهی با CSS
صفحه با استایل‌های پیشرفته CSS
Flexbox
طرح‌بندی با Flexbox
CSS Grid
طرح‌بندی با CSS Grid
<!DOCTYPE html> <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>استایل دهی Inline</title> </head> <body style="font-family: Tahoma; background-color: #f5f5f5; margin: 0; padding: 20px; text-align: center;"> <h1 style="color: #2e86c1; border-bottom: 2px solid #3498db; padding-bottom: 10px;"> استایل دهی Inline در HTML </h1> <p style="color: #333; line-height: 1.6;"> در این روش استایلها مستقیماً در تگهای HTML با استفاده از ویژگی style اعمال میشوند. </p> <div style="background-color: white; padding: 15px; margin: 15px 0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"> <h2 style="color: #2e86c1; margin-top: 0;">مزایای استایل دهی Inline</h2> <p style="color: #333; margin: 10px 0;">• سرعت بالا در اعمال تغییرات کوچک</p> <p style="color: #333; margin: 10px 0;">• اولویت بالاتر نسبت به سایر روشهای استایل دهی</p> <p style="color: #333; margin: 10px 0;">• عدم نیاز به دانش پیشرفته CSS</p> </div> <div style="background-color: #fef9e7; padding: 10px; border-radius: 5px; border-right: 4px solid #f1c40f;"> <p style="color: #333; margin: 0;">توجه: استایل Inline فقط روی همان تگی که اعمال شده اثر میگذارد.</p> </div> <button style="background-color: #3498db; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin: 10px;"> دکمه نمونه </button> <p style="color: #333; line-height: 1.6;"> همانطور که میبینید، هر تگ استایل مخصوص به خود را دارد. </p> </body> </html>