از ویژگی استایل HTML برای افزودن سبک به یک عنصر مانند رنگ ، قلم ، اندازه و موارد دیگر استفاده می شود.
تمام المان های HTML از مقادیر پیش فرض ظاهری برخوردار هستند. برای مثال پس زمینه سفید، رنگ متن سیاه، اندازه فونت 14 پیکسل و ….
تغییر سبک نمایش ظاهری المان های HTML با استفاده از ویژگی استایل انجام می شود.
مثال:
من قرمز هستم
من آبی هستم
من بزرگ هستم
ویژگی استایل در HTML
تنظیم سبک یک عنصر HTML می تواند با ویژگی style انجام شود.
ویژگی style در HTML به صورت حالت کلی به شکل زیر است:
|
1 |
<tagname style="property:value;"> |
Property صفتی از جنس CSS و value یک مقدار از جنس CSS است.
رنگ پس زمینه
ویژگی background-color رنگ پس زمینه را برای یک عنصر HTML تعریف می کند.
مثال:
رنگ پس زمینه صفحه را روی powderblue تنظیم کرده ایم:
|
1 2 3 4 5 6 |
<body style="background-color:powderblue;"> <h1>این یک عنوان است</h1> <p>.این یک پاراگراف است</p> </body> |
مثال:
رنگ زمینه را برای دو عنصر مختلف تنظیم کرده ایم:
|
1 2 3 4 5 6 |
<body> <h1 style="background-color:powderblue;">این یک عنوان است</h1> <p style="background-color:tomato;">.این یک پاراگراف است</p> </body> |
رنگ متن
ویژگی color رنگ متن را برای یک عنصر HTML تعریف می کند:
مثال:
|
1 2 |
<h1 style="color:blue;">این یک عنوان است</h1> <p style="color:red;">.این یک پاراگراف است</p> |
فونت ها یا قلم ها
ویژگی font-family فونت مورد استفاده یا نوع قلم به کار رفته برای یک عنصر HTML را تعریف می کند:
مثال:
|
1 2 |
<h1 style="font-family:verdana;">این یک عنوان است</h1> <p style="font-family:courier;">.این یک پاراگراف است</p> |
اندازه متن
ویژگی font-size ، اندازه متن یا اندازه قلم نوشته شده را برای یک عنصر HTML تعریف می کند:
مثال:
|
1 2 |
<h1 style="font-size:300%;">این یک عنوان است</h1> <p style="font-size:160%;">.این یک پاراگراف است</p> |
تراز متن
ویژگی text-align ، برای تعریف مکان قرارگیری یک متن یا تراز متن (تراز متن از چپ، وسط یا راست باشد) را برای یک عنصر HTML تعریف می کند:
مثال:
|
1 2 |
<h1 style="text-align:center;">عنوان مرکزی</h1> <p style="text-align:center;">.پاراگراف مرکزی</p> |
خلاصه ی فصل
از ویژگی style برای سبک دهی به عناصر HTML استفاده کنید
از ویژگی background-color برای رنگ پس زمینه استفاده کنید
از ویژگی color برای رنگ متن استفاده کنید
از ویژگی font-family برای قلم های متن استفاده کنید
از ویژگی font-size برای اندازه متن استفاده کنید
از ویژگی text-align برای ترازبندی متن استفاده کنید