style در HTML یا استایل دهی style یا ضاهر سازی در html که درباره Attribute ها در جلسه قبل به صورت مختصر صحبت کردیم و در اینجا بیشتر درباره Attribute ها یا خاصیت style آشنا خواهید شد.
با خاصیت style می توانیم یک عنصر از html ، رنگ مورد نظر یا اندازه مورد نظر را تغییر دهیم. برای مثال پس زمینه سفید، رنگ متن سیاه، اندازه فونت 12 پیکسل و ….
تغییر سبک نمایش ظاهری المان های HTML با استفاده از ویژگی style انجام می شود.
برای مثال
<!DOCTYPE html>
<html>
<body>
<p>ما یه تیم هستیم</p>
<p style="color:red;">متن قرمز می شود</p>
<p style="color:blue;">متن آبی می شود</p>
<p style="font-size:36px;">متن بزرگ می شود</p>
</body>
</html>
نحوه تعریف کد به این صورت است:
<tagname style="property:value;">
یا
style="مقدار خصوصیت:خصوصیت مورد نظر"
در مثال فوق tagname همان عنصر می باشد. مانند تگ a یا تگ p یا تگ h1. عبارت style همان خاصیت style می باشد. هر آن چه به عنوان مقادیر ویژگی style (در کلمه ی property) برای هر المان HTML نوشته می شود همان دستورات CSS است (درباره css در آینده خواهیم گفت).
رنگ پس زمینه صفحه HTML
ویژگی background-color رنگ پس زمینه را مشخص می کند.
در مثال زیر رنگ پس زمینه سند html را به رنگ طلایی تبدیل می کند
<!DOCTYPE html>
<html>
<body style="background-color:gold;">
<h1>آموزش استایل در اچ تی ام ال</h1>
</body>
</html>
رنگ متن در HTML
با خصوصیت color برای تعریف رنگ متن یا نوشته در ویژگی style در تگ های HTML استفاده می شود:
توجه داشته باشید: با خاصیت color رنگ پس زمینه ایجاد نمی شود، بلکه فقز خود متن.
مثال:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red;">این متن تیتر است و به رنگ قرمز است</h1>
<p style="color:blue;">این یک پاراگراف است و به رنگ آبی است</p>
</body>
</html>
فونت در HTML
خصوصیت font-family برای تعریف نوع قلم مورد استفاده برای نوشتن متن در ویژگی style در تگ های HTML استفاده می شود:
مثال:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">wellcome to learn HTML</h1>
<p style="font-family:courier;">i'm a web developer</p>
</body>
</html>
نکته: در نسخه های قبلی یا ورژن های قبلی یعنی از HTML4 به پایین، به جای استفاده از این روش یک المان HTML به نام تگ <font> نیز وجود داشت که امکان تغییر فونت را با استفاده از تگ، فراهم می کرد. ولی امروزه در نسخه های جدید و با استاندارد HTML5 استفاده نمی شود.
اندازه متن در HTML
با ویژگی font-size می توانیم میزان اندازه متن را تعیین کنید.
مثال:
<!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 style="text-align:right;">پاراگراف راست چین شده</p>
</body>
</html>
نکته: در نسخه قبلی HTML به نام تگ <center> نیز وجود داشت که امکان تراز از وسط (وسط چین کردن) متن را با استفاده از تگ، فراهم می کرد. ولی امروزه در نسخه های جدید و با استاندارد HTML5 استفاده نمی شود.
- با استفاده از خصوصیت background-color می توانید رنگ پس زمینه تگ مورد نظر را تغییر دهید
- با استفاده از خصوصیت color می توانید رنگ متن تگ مورد نظر را تغییر دهید
- با استفاده از خصوصیت font-family می توانید نوع قلم (فونت) متن تگ مورد نظر را تغییر دهید
- با استفاده از خصوصیت font-size می توانید اندازه قلم (اندازه فونت) متن تگ مورد نظر را تغییر دهید
- با استفاده از خصوصیت text-align می توانید تراز متن تگ مورد نظر را تغییر دهید
دیدگاه و پرسش