HTML طراحی ظاهر صفحات
تمام المان های HTML از مقادیر پیش فرض ظاهری برخوردار هستند. برای مثال پس زمینه سفید، رنگ متن سیاه، اندازه فونت 12 پیکسل و ....
تغییر سبک نمایش ظاهری المان های HTML با استفاده از ویژگی style انجام می شود.
در مثال زیر رنگ پس زمینه را از حالت پیش فرض که سفید است به رنگ طوسی روشن (Light Grey) تغییر می دهیم:
مثال
<body style="background-color:lightgrey">
<h1>این یک عنوان است</h1>
<p>این یک پاراگراف است.</p>
</body>
خودتان آزمایش کنید »
 |
به جای استفاده از این روش یک ویژگی قدیمی با نام نیز وجود دارد که امکان تغییر رنگ را مثلا به این شکل <"body bgcolor="lightgrey> ممکن می سازد که البته در نسخه های جدید منسوخ شده و اجرا نمی شود. |
خواص مربوط به ویژگی style تگ های HTML
سبک نگارش خواص ویژگی style که برای تغییر ظاهر تگ های HTML هنگام نمایش در مرورگر استفاده می شوند به روش زیر است:
style="مقدار خصوصیت:خصوصیت مورد نظر"
منظور از خصوصیت همان ویژگی ها در CSS هستند و منظور از مقادیر خصوصیت، همان مقادیری است که برای هر ویژگی در CSS وجود دارد. در واقع ویژگی style دستورات و ویژگی های CSS را داخل تگ های HTML برای تغییر خصوصیات ظاهری آن تگ فراخوانی می کند و هر آن چه به عنوان مقادیر ویژگی style برای هر المان HTML نوشته می شود همان دستورات CSS است.
|
در بخش آموزش 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>
خودتان آزمایش کنید »
|
پیش از این به جای استفاده از این روش یک المان 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>
خودتان آزمایش کنید »
|
پیش از این به جای استفاده از این روش یک المان HTML به نام تگ <center> نیز وجود داشت که امکان تراز از وسط (وسط چین کردن) متن را با استفاده از تگ، فراهم می کرد. ولی امروزه در نسخه های جدید و با استاندارد HTML5 استفاده نمی شود. |
خلاصه فصل
- استفاده از ویژگی style در یک المان HTML به شما اجازه می دهد تا از دستورات CSS برای تغییر ظاهر محتوای المان مورد نظر استفاده کنید. در بخش آموزش CSS با دستورات بیشتری آشنا می شوید.
- با استفاده از خصوصیت background-color می توانید رنگ پس زمینه تگ مورد نظر را تغییر دهید
- با استفاده از خصوصیت color می توانید رنگ متن تگ مورد نظر را تغییر دهید
- با استفاده از خصوصیت font-family می توانید نوع قلم (فونت) متن تگ مورد نظر را تغییر دهید
- با استفاده از خصوصیت font-size می توانید اندازه قلم (اندازه فونت) متن تگ مورد نظر را تغییر دهید
- با استفاده از خصوصیت text-align می توانید تراز متن تگ مورد نظر را تغییر دهید