استایل ها (Styles)
«استایل HTML» یعنی ظاهر متن و المان ها. با ویژگی style رنگ، اندازه، فونت و تراز را عوض می کنیم. «ویژگی (Attribute)» یک تنظیم روی تگ است.
ویژگی style چگونه کار می کند؟
المان را با خاصیت های CSS تغییر بده. «خاصیت (Property)» نام تنظیم است. «مقدار (Value)» عدد یا نام همان تنظیم است.
<tagname style="property:value;">
نمونه سریع استایل HTML
اندازه و رنگ را روی چند پاراگراف می گذاریم. هر قانون داخل style می آید.
<p style="font-size:20px;color:red;">I am Red</p>
<p style="font-size:20px;color:blue;">I am Blue</p>
<p style="font-size:36px;margin:12px 0;">I am Big</p>
رنگ پس زمینه با background-color
خاصیت background-color رنگ پس زمینه را تعیین می کند. می توانی صفحه یا المان خاص را رنگی کنی.
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
رنگ متن با color
color رنگ نوشته ها را تعیین می کند. مثل دفتر یادداشت رنگی فکر کن.
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
فونت با font-family
font-family نوع قلم را عوض می کند. اگر فونت نبود، جایگزین می آید.
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
اندازه متن با font-size
font-size اندازه نوشته را مشخص می کند. می توانی درصد یا پیکسل بدهی.
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
تراز متن با text-align
text-align چینش افقی متن است. وسط، چپ، یا راست می شود.
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
گام های عملی
- یک پاراگراف بساز و color بده.
- روی عنوان font-size و text-align بگذار.
- پس زمینه بدنه را رنگی کن.
نکته: برای آموزش کامل استایل ها، صفحه استایل HTML را ذخیره کن. سپس برای متن ها به پاراگراف ها و برای ظاهرهای بیشتر به قالب بندی سر بزن.
جمع بندی سریع
- استایل HTML با ویژگی style تنظیم می شود.
- background-color پس زمینه را رنگی می کند.
- color رنگ متن را تغییر می دهد.
- font-family و font-size فونت و اندازه اند.
- text-align متن را ترازبندی می کند.