استایل و سبک ها در HTML
استایل HTML
از ویژگی استایل HTML برای افزودن سبک به یک عنصر مانند رنگ ، قلم ، اندازه و موارد دیگر استفاده می شود.
تمام المان های HTML از مقادیر پیش فرض ظاهری برخوردار هستند. برای مثال پس زمینه سفید، رنگ متن سیاه، اندازه فونت 14 پیکسل و ….
تغییر سبک نمایش ظاهری المان های HTML با استفاده از ویژگی استایل انجام می شود.
مثال:
من قرمز هستم
من آبی هستم
من بزرگ هستم
ویژگی استایل در 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 برای ترازبندی متن استفاده کنید