ویژگی سبک یا style در تگ‌های HTML برای افزودن سبک و ظاهر نمایش محتوای آن تگ در صفحه است. برای مثال برای یک متن می‌توان با ویژگی style رنگ، فونت، اندازه و موارد دیگر را تغییر داد.
نحوه استفاده از ویژگی style در تگ‌های HTML
کار ویژگی style در تگ‌های html تنظیم سبک و ظاهر یک عنصر HTML است. شما می‌توانید نحوه نمایش و ظاهر و چیدمان محتوای تگ‌های html را با استفاده از ویژگی Style تغییر دهید.
نحوه استفاده از این ویژگی به شکل زیر است:
در مثال بالا property «ویژگی» مد نظر و value نیز «مقدار» آن ویژگی است. در ویژگی Style می‌توانید بیش از یک ویژگی را تعریف کنید و برای تعریف کردن چند ویژگی باید آن‌ها را با سمیکالن (;) از هم جدا کنید. در واقع این ویژگی‌هایی که در style قرار می‌گیرند همان دستورات CSS هستند که به صورت اختصاصی یا به اصطلاح Inline-CSS برای یک تگ نوشته می‌شوند.
توجه:
آموزش بیشتر دستورات CSS را می‌توانید از بخش آموزش CSS یاد بگیرد. در ادامه به صورت مثال به چند نمونه دستور ساده اشاره می‌کنیم.
رنگ پس زمینه یا Background Color
یک ویژگی در دستورات CSS وجود دارد به نام background-color که رنگ پس زمینه یک عنصر HTML را مشخص می کند.
رنگ متن یا ویژگی color
ویژگی دیگری در مجموع دستورات CSS وجود دارد به نام color که رنگ متن را در صفحه مشخص می‌کند:
قلم یا فونت یا ویژگی font
ویژگی دیگری در مجموع دستورات CSS وجود دارد به نام font که تنظیمات قلم متن را شامل نوع فونت، اندازه، ضخامت و نحوه نمایش و... را در صفحه مشخص می‌کند. دستورات دیگری هستند که مشخصا یک بخش از ویژگی قلم را مشخص می‌کند. مثلا نوع فونت font-family یا ضخامت فونت font-weight یا اندازه فونت font-size و...:
-
</>
مثال برای درک بهتر آموزش اسناد HTML:
<body>
<h1 style="font-family:tahoma; font-size:200%; font-weight:normal;">این یک سرفصل نوع ۱ است.</h1>
<p style="font-family:times; font-weight:bold;">این یک نمونه متن پاراگراف است.</p>
</body>
کد HTML را آزمایش کنید
تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!
تراز کردن (چیدمان) متن یا Text Alignment
ویژگی دیگری در مجموع دستورات CSS وجود دارد به نام text-align که تراز متن در صفحه مشخص می‌کند. یک متن می‌تواند راست چین یا چپ چین یا وسط چین و یا از دو طرف تراز باشد:
-
</>
مثال برای درک بهتر آموزش اسناد HTML:
<body>
<h1 style="text-align:center;">سرفصل نوع ۱ وسط چین</h1>
<p style="text-align:right;">این یک نمونه متن پاراگراف راست چین است که نحوه تراز کردن راست چین را نشان می‌دهد. در حالت راست چین فونت‌ها از سمت راست تراز هستند و از سمت چپ نسبت به طول آخرین کلمه‌ای که در یک سطر جا گرفته است شکسته شده و به خط بعد منتقل می‌شود. در نتیجه سمت چپ این نوع تراز منظم نیست. ولی سمت راست منظم است.</p>
<p style="text-align:justify;">این یک نمونه متن پاراگراف دو طرف تراز (Justify) است که به روش تراز از دو طرف تنظیم شده است. اگر جهت پیش‌فرض سند html شما راست به چپ باشد (RTL) این روش مشابه حالت راست چین است با این تفاوت که علاوه بر تراز بودن سمت راست، سمت چپ متن را نیز تراز می‌کند و پاراگراف شما بسیار زیبا و منظر و به شکل یک بلوک متنی ولی راست چین نمایش داده می‌شود. در واقع تفاوت عمده آن با راست چین نظم سمت چپ کار است. ولی اگر ساختار نوشتاری سند html شما چپ به راست باشد (LTR) تراز دو طرف همچنان وجود دارد ولی نوشته ها از تراز می‌شوند. این حالت را در خط آخر یک پاراگراف که معمولا نا تمام است می‌توانید تشخیص دهید.</p>
</body>
کد HTML را آزمایش کنید
تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!