دات نت نیوک
کاربرد ویژگی style (سبک نمایش) در تگ های HTML

سبک نمایش و ظاهر مطالب

من یک جمله به رنگ قرمز هستم

من یک جمله به رنگ آبی هستم


خودتان آزمایش کنید »

HTML طراحی ظاهر صفحات

تمام المان های HTML از مقادیر پیش فرض ظاهری برخوردار هستند. برای مثال پس زمینه سفید، رنگ متن سیاه، اندازه فونت 12 پیکسل و ....

تغییر سبک نمایش ظاهری المان های HTML با استفاده از ویژگی style انجام می شود.

در مثال زیر رنگ پس زمینه را از حالت پیش فرض که سفید است به رنگ طوسی روشن (Light Grey) تغییر می دهیم:

مثال

<body style="background-color:lightgrey">

<h1>این یک عنوان است</h1>

<p>این یک پاراگراف است.</p>

</body>

خودتان آزمایش کنید »
Note به جای استفاده از این روش یک ویژگی قدیمی با نام نیز وجود دارد که امکان تغییر رنگ را مثلا به این شکل <"body bgcolor="lightgrey> ممکن می سازد که البته در نسخه های جدید منسوخ شده و اجرا نمی شود.

خواص مربوط به ویژگی style تگ های HTML

سبک نگارش خواص ویژگی style که برای تغییر ظاهر تگ های HTML هنگام نمایش در مرورگر استفاده می شوند به روش زیر است:

style="مقدار خصوصیت:خصوصیت مورد نظر"

منظور از خصوصیت همان ویژگی ها در CSS هستند و منظور از مقادیر خصوصیت، همان مقادیری است که برای هر ویژگی در CSS وجود دارد. در واقع ویژگی style دستورات و ویژگی های CSS را داخل تگ های HTML برای تغییر خصوصیات ظاهری آن تگ فراخوانی می کند و هر آن چه به عنوان مقادیر ویژگی style برای هر المان HTML نوشته می شود همان دستورات CSS است.

Note در بخش آموزش CSS می توانید دستورات مربوط به این بخش را بیاموزید.

رنگ متن در HTML

خصوصیت color برای تعریف رنگ در ویژگی style در تگ های HTML استفاده می شود:

مثال

<!DOCTYPE html>
<html>

<body>
  <h1 style="color:blue">این یک عنوان است</h1>
  <p style="color:red">این یک پاراگراف است.</p>
</body>

</html>

خودتان آزمایش کنید »

فونت متن در HTML

خصوصیت font-family برای تعریف نوع قلم مورد استفاده برای نوشتن متن در ویژگی style در تگ های HTML استفاده می شود:

مثال

<!DOCTYPE html>
<html>

<body dir="rtl">
  <p style="font-family:courier">این یک پاراگراف با فونت courier است</p>
  <p style="font-family:verdana">این یک پاراگراف با فونت verdana است</p>
  <p style="font-family:tahoma">این یک پاراگراف با فونت tahoma است</p>
</body>

</html>

خودتان آزمایش کنید »
Note پیش از این به جای استفاده از این روش یک المان HTML به نام تگ <font> نیز وجود داشت که امکان تغییر فونت را با استفاده از تگ، فراهم می کرد. ولی امروزه در نسخه های جدید و با استاندارد HTML5 استفاده نمی شود.

اندازه متن در HTML

خصوصیت font-size برای تعریف اندازه قلم در ویژگی style در تگ های HTML استفاده می شود:

مثال

<!DOCTYPE html>
<html>

<body>
  <h1 style="font-size:300%">این یک عنوان با اندازه قلم 3 برابر یا 300% است</h1>
  <p style="font-size:160%">این یک پاراگراف با اندازه قلم 160% بزرگ تر است.</p>
  <p style="font-size:18px">این یک پاراگراف با اندازه قلم 18 پیکسل است.</p>
  <p>این یک پاراگراف با اندازه قلم پیش فرض است.</p>
</body>

</html>

خودتان آزمایش کنید »

تراز متن در HTML

خصوصیت text-align برای تعریف تراز متن (تراز متن از چپ، وسط یا راست باشد) در ویژگی style در تگ های HTML استفاده می شود:

مثال

<!DOCTYPE html>
<html>

<body>
  <h1 style="text-align:center">عنوان تراز شده از وسط</h1>
  <p>این یک پاراگراف است.</p>
</body>

</html>

خودتان آزمایش کنید »
Note پیش از این به جای استفاده از این روش یک المان HTML به نام تگ <center> نیز وجود داشت که امکان تراز از وسط (وسط چین کردن) متن را با استفاده از تگ، فراهم می کرد. ولی امروزه در نسخه های جدید و با استاندارد HTML5 استفاده نمی شود.

خلاصه فصل

  • استفاده از ویژگی style در یک المان HTML به شما اجازه می دهد تا از دستورات CSS برای تغییر ظاهر محتوای المان مورد نظر استفاده کنید. در بخش آموزش CSS با دستورات بیشتری آشنا می شوید.
  • با استفاده از خصوصیت background-color می توانید رنگ پس زمینه تگ مورد نظر را تغییر دهید
  • با استفاده از خصوصیت color می توانید رنگ متن تگ مورد نظر را تغییر دهید
  • با استفاده از خصوصیت font-family می توانید نوع قلم (فونت) متن تگ مورد نظر را تغییر دهید
  • با استفاده از خصوصیت font-size می توانید اندازه قلم (اندازه فونت) متن تگ مورد نظر را تغییر دهید
  • با استفاده از خصوصیت text-align می توانید تراز متن تگ مورد نظر را تغییر دهید
نظر و پرسش و پاسخ کاربران
  parham858 نظرات مثبت درباره این.
نمایش 0 نظر ترتیب نمایش

در صفحه "آشنایی با کاربرد ویژگی style در تگ های HTML": نخستین نظر دهنده باشید
مشاهده نظرات
نام

نظرات خود را مطرح کنید
*
*
*
*
*
Captcha:
آخرین اخبار و مقالات

آگهی ها
کارگزاران تجارت الکترونیک ایران
گرافیک پوسته وب سایت در کامپیوتر
گرافیک پوسته وب سایت در تبلت
گرافیک پوسته وب سایت در موبایل
طراحی واکنشگرا (Responsive)
پنل مدیریتی پیشرفته و کاربر پسند
قابل توسعه و ارتقاء و 100% داینامیک
امکانات کامل SEO برای موتورهای جستجو