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