استایل‌ها

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


مثال

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


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

ویژگی استایل در 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

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



منابع آموزشی