استایل‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
(تغییرمسیر از استایل HTML)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳ویرایشگرها
۴پایه
۵عنصرها
۶ویژگی‌ها
۷عنوان‌ها
۸پاراگراف‌ها
۹استایل‌ها
۱۰قالب‌بندی
۱۱نقل‌قول‌ها
۱۲توضیحات
۱۳رنگ‌ها
۱۴CSS
۱۵لینک‌ها
۱۶تصاویر
۱۷جداول
۱۸لیست‌ها
۱۹بلوک‌ها
۲۰کلاس‌ها
۲۱شناسه
۲۲Iframeها
۲۳جاوا اسکریپت
۲۴مسیرهای فایل
۲۵سرصفحه
۲۶چیدمان‌ها
۲۷واکنش‌گرا
۲۸کد کامپیوتری
۲۹معنایی‌ها
۳۰راهنمای استایل
۳۱موجودیت‌ها
۳۲نماد‌ها
۳۳ایموجی‌ها
۳۴مجموعه کاراکترها
۳۵رمزگذاری URL
۳۶HTML و XHTML
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML


مثال[ویرایش | ویرایش]

40px ساخت نمونه مثال این بخش در دست اقدام است.


مشاهدهٔ نتیجه

ویژگی استایل در HTML[ویرایش | ویرایش]

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

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

<tagname style="property:value;">

خصوصیت (به انگلیسی: Property) یک خصوصیت CSS است. مقدار (به انگلیسی: value) یک مقدار CSS است.

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

رنگ پیش زمینه[ویرایش | ویرایش]

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

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

مثال[ویرایش | ویرایش]

1 <body style="background-color:powderblue;">
2 
3 <h1>This is a heading</h1>
4 <p>This is a paragraph.</p>
5 
6 </body>


مشاهدهٔ نتیجه


رنگ متن[ویرایش | ویرایش]

خصوصیت color CSS رنگ متن برای یک عنصر HTML را مشخص می‌کند:

مثال[ویرایش | ویرایش]

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


مشاهدهٔ نتیجه


خط ها[ویرایش | ویرایش]

خصوصیت font-family CSS قلم مورد استفاده در یک عنصر HTML را نشان می‌دهد:

مثال[ویرایش | ویرایش]

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


مشاهدهٔ نتیجه


اندازه متن[ویرایش | ویرایش]

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

مثال[ویرایش | ویرایش]

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


مشاهدهٔ نتیجه


محل قرارگیری (به انگلیسی: Alignment) متن[ویرایش | ویرایش]

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

مثال[ویرایش | ویرایش]

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


مشاهدهٔ نتیجه


خلاصه بخش[ویرایش | ویرایش]

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

تمرین های HTML[ویرایش | ویرایش]

40px ساخت نمونه مثال این بخش در دست اقدام است.



منابع آموزشی[ویرایش | ویرایش]