ثبت نام لاتاری 2022 آموزش ثبت نام لاتاری گرین کارت آمریکا 2022 لاتاری

کاربرد ویژگی style در HTML بخش چهارم

کاربرد ویژگی style در HTML بخش چهارم

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

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

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

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

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

مثال

<body style=“background-color:lightgrey”>

<h1>تست</h1>

<p>تست.</p>

</body>

رنگ پ زمينه خاكستري مي شود.

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

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

منظور از خصوصیت همان ویژگی ها در CSS هستند و منظور از مقادیر خصوصیت، همان مقادیری است که برای هر ویژگی در CSS وجود دارد. در واقع ویژگی style دستورات و ویژگی های CSS را داخل تگ های HTML برای تغییر خصوصیات ظاهری آن تگ فراخوانی می کند و هر آن چه به عنوان مقادیر ویژگی style برای هر المان HTML نوشته می شود همان دستورات 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:tahoma”>این یک پاراگراف با فونت tahoma مي باشد.</p>
</body></html>

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

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

مثال

<!DOCTYPE html>
<html><body>
<p style=“font-size:120%”>این یک پاراگراف با اندازه قلم 120% بزرگ تر است.</p>
<p>این یک پاراگراف با اندازه قلم پیش فرض است.</p>
</body></html>

تراز متن در HTML

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

مثال

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

نظر خودتان را ارسال کنید