خاصیت style در html
اگر دروس قبل را دنبال کرده باشید درباره Attribute ها یا خاصیت ها در html توضیح داده ایم.
با خاصیت style می توانیم به یک عنصر از html رنگ مورد نظر یا اندازه مورد نظر را اعمال کنیم.
برای مثال:
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">نوشته قرمز می شود</p>
<p style="color:blue;">نوشته آبی می شود</p>
<p style="font-size:36px;">نوشته بزرگ می شود</p>
</body>
</html>
در قطعه کد زیر نحوه ی تعریف یک style بر روی عنصر html گفته شده.
به مثال زیر دقت کنید:
<tagname style="property:value;">
در مثال فوق tagname همان عنصر شما است. مانند تگ a یا تگ p . کلمه ی style همان خاصیت style می باشد. کلمه ی property یک ویژگی از css است (درباره css در آینده خواهیم گفت).
رنگ پس زمینه سند HTML
ویژگی background-color رنگ پس زمینه را مشخص می کند.
این مثال رنگ پس زمینه سند html را به رنگ طلایی تبدیل می کند:
<!DOCTYPE html>
<html>
<body style="background-color:gold;">
<h1>آموزش استایل در اچ تی ام ال</h1>
<p>سایت چسبون</p>
</body>
</html>
رنگ متن در HTML
با ویژگی color می توان رنگ متن در html را تعیین کرد.
مثال:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">این متن تیتر است</h1>
<p style="color:red;">این یک پاراگراف است</p>
</body>
</html>
فونت در HTML
با ویژگی font-family می توان نوع فونت متن را تعیین کرد.
مثال:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">my name is Arman Babaee</h1>
<p style="font-family:courier;">i'm a web developer</p>
</body>
</html>
انداره متن در HTML
با ویژگی font-size می توانید میزان اندازه متن را تعیین کنید.
مثال:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">این متن تیتر است</h1>
<p style="font-size:160%;">این یک پاراگراف است</p>
</body>
</html>
تراز متن در HTML
با خصوصیت text-align می توان تراز متن در صفحه را تعیین نمود. برای مثال وسط چین یا راست چین.
مثال:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">تیتر وسط چین شده</h1>
<p style="text-align:right;">پاراگراف راست چین شده</p>
</body>
</html>