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

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

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

زمان مطالعه: 3 دقیقه
بازدید: 1154
پرسش و پاسخ: 0
<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)

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

<tagname style="property:value;">

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

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

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

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

</body>

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

بیشتر بدانیم : آموزش شی گرایی در php

style رنگ متن تگ در html

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

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

style فونت در html

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

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

بیشتر بدانیم : فونت‌ آنلاین

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

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

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

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

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

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

بیشتر بدانیم: آموزش فرمت متن در html - قالبندی (HTML Text Formatting)

بهزاد میرزازاده
مسیر درست با پرسش های درست ساخته می شود

مشاهده تمام مطالب نویسنده