معرفی ویژگی سبک ظاهری یا style در html
 

معرفی ویژگی سبک ظاهری یا style در html

در این مقاله آموزشی به معرفی و نحوه استفاده از ویژگی سبک ظاهری یا style در عناصر html و محتوای درون تگ‌ها می‌پردازیم. همراه با مثال و تست آنلاین نمونه کدهای html.
پنجشنبه، 16 دی 1400 | Article Rating

ویژگی سبک یا style در تگ‌های HTML برای افزودن سبک و ظاهر نمایش محتوای آن تگ در صفحه است. برای مثال برای یک متن می‌توان با ویژگی style رنگ، فونت، اندازه و موارد دیگر را تغییر داد.

  • مثال برای درک بهتر آموزش اسناد HTML:

    من یک متن عادی هستم.

    من یک متن قرمز هستم و کمی بزرگ‌تر!

    من یک متن آبی و بزرگ هستم.

    من یک متن بزرگ و وسط چین هستم.

    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!



نحوه استفاده از ویژگی style در تگ‌های HTML

کار ویژگی style در تگ‌های html تنظیم سبک و ظاهر یک عنصر HTML است. شما می‌توانید نحوه نمایش و ظاهر و چیدمان محتوای تگ‌های html را با استفاده از ویژگی Style تغییر دهید.

نحوه استفاده از این ویژگی به شکل زیر است:

  • </>
    <tagname style="property:value;">

در مثال بالا property «ویژگی» مد نظر و value نیز «مقدار» آن ویژگی است. در ویژگی Style می‌توانید بیش از یک ویژگی را تعریف کنید و برای تعریف کردن چند ویژگی باید آن‌ها را با سمیکالن (;) از هم جدا کنید. در واقع این ویژگی‌هایی که در style قرار می‌گیرند همان دستورات CSS هستند که به صورت اختصاصی یا به اصطلاح Inline-CSS برای یک تگ نوشته می‌شوند.

توجه:

آموزش بیشتر دستورات CSS را می‌توانید از بخش آموزش CSS یاد بگیرد. در ادامه به صورت مثال به چند نمونه دستور ساده اشاره می‌کنیم.


رنگ پس زمینه یا Background Color

یک ویژگی در دستورات CSS وجود دارد به نام background-color که رنگ پس زمینه یک عنصر HTML را مشخص می کند.

  • </>

    مثال برای درک بهتر آموزش اسناد HTML:

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

    <h1>این یک سرفصل نوع ۱ است.</h1>
    <p>این یک نمونه متن پاراگراف است.</p>

    </body>
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!


  • </>

    مثال برای درک بهتر آموزش اسناد HTML:

    <body>

    <h1 style="background-color:powderblue;">این یک سرفصل نوع ۱ است.</h1>
    <p style="background-color:tomato;">این یک نمونه متن پاراگراف است.</p>

    </body>
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!



رنگ متن یا ویژگی color

ویژگی دیگری در مجموع دستورات CSS وجود دارد به نام color که رنگ متن را در صفحه مشخص می‌کند:

  • </>

    مثال برای درک بهتر آموزش اسناد HTML:

    <body>

    <h1 style="color:blue;">این یک سرفصل نوع ۱ است.</h1>
    <p style="color:red;">این یک نمونه متن پاراگراف است.</p>

    </body>
    کد HTML را آزمایش کنید

    تنها کافی است روی گزینه "کد HTML را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!



قلم یا فونت یا ویژگی 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 را آزمایش کنید " کلیک کنید تا ویرایشگر متنی ما همان لحظه باز شود و شما کدهایی را که یاد گرفتید در پنجره سمت چپ وارد کنید و با زدن گزینه "مشاهده نتیجه"، نتیجه کد خود را به صورت زنده مشاهده نمایید!



معرفی برخی خدمات مرتبط با راه اندازی کسب و کار آنلاین کارگزاران تجارت الکترونیک ایران

در صورتی که مایل به معرفی خدمات طراحی سایت ما به دوستان خود هستید لطفا این صفحه را برای ایشان به اشتراک بگذارید. همچنین می‌توانید اطلاعات بیشتری درباره خدمات ما در زمینه طراحی سایت فروشگاهی همچون طراحی سایت عطر، طراحی سایت شخصی، طراحی سایت شرکتی، طراحی سایت سازمانی با ورود به این صفحات به دست آورید. این که وب سایت مورد نظر شما از چه نوعی باشد را به ما بسپارید. بسته به امکانات و نیاز شما بهترین را برای شما انتخاب می‌کنیم. چه از نوع طراحی سایت با دی ان ان DNN (دات نت نیوک) باشد و چه از نوع طراحی سایت با وردپرس Wordpress می‌توانید از طریق صفحات مربوط به آن اطلاعات بیشتری کسب کرده و همه خدمات خود را از میزبانی وب و خرید هاست گرفته تا طراحی اپلیکیشن موبایل و آموزش طراحی سایت و سئو سایت SEO، آن را با خیال راحت به ما بسپارید. نکته قابل توجه این است که ما با هدف افزایش درآمد و رساندن شما به اهدافی که مد نظر دارید این کار را انجام می‌دهیم و این موضوع بسیار متفاوت است با این که بخواهید فقط یک سایت داشته باشید! چون هر طراحی سایتی شما را به اهداف‌تان نمی‌رساند. تخصص ما تجارت الکترونیک و راه اندازی کسب و کار آنلاین است و طراحی سایت تنها بخشی از این خدمات محسوب می‌شود. عکاسی 360 درجه از محصول و طراحی سیستم اختصاصی یکپارچه ERP و راهبری و چگونگی انجام کار برای رسیدن به درآمد آنلاین چیزی است که بسیاری از طراحان سایت نمی‌دانند. این در حالی است که هدف ما از طراحی سایت تمرکز روی به نتیجه رسیدن اهداف شما است نه طراحی سایت! کارگزار خدمات فناوری اطلاعات خود را به درستی و با دقت انتخاب کنید.

تصاویر
ثبت امتیاز
اشتراک گذاری
نظر جدید

تصویر امنیتی
کد امنیتی را وارد نمایید:

این صفحه را به دوستان خود معرفی کنید

با به اشتراک گذاری این صفحه، یک فرصت خوب به دوستان خود هدیه می‌دهید