استایل یا ظاهر در html (Styles)

با استفاده از خصوصیت (ویژگی) استایل در html می توانید ظاهر، سایز، فونت و ... یک تگ را تغییر دهید.

بهزاد میرزازاده بهزاد میرزازاده

زمان مطالعه

3 دقیقه

بازدید

188

پرسش و پاسخ

0
استایل یا ظاهر در html (Styles)
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

استایل در html

تنظیم حالتهای گفته شده مثل رنگ و ... یک تگ می تواند با خصوصیت style اعمال شود در مثال زیر property یک ویژگی مثل color است و value مقدار ویژگی رو مشخص میکنه.

<tagname style="property:value;">

رنگ پس زمینه در html

با خصوصیت background-color می توانید رنگ پس زمینه هر تگی را تعیین کنید. به مثال زیر توجه کنید

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

استایل رنگ پس زمینه در html

رنگ متن تگ در html

با استفاده از خصوصیت (پراپرتی) color می توانید رنگ محتوای یک تگ را تغییر دهید

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

فونت در html

خصوصیت font-family به شما این امکان را می دهد که فونت مورد دلخواه خود را به تگ مورد نظر اعمال کنید.

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

تغییر سایز متن (Text Size)

font-size اندازه فونت فعلی تگ را مشخص می کنید و می تواند به صورت درصدی یا پیکسلی اعمال شود.

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

تراز دهی متن (Text Alignment)

پراپرتی text-align ترازبندی به صورت افقی را مشخص می کند و ورودی های right، left، center و.... می گیرد

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>