تک دیک

واژه نامه و مجله آموزشی کامپیوتر و فناوری

المان style و استایل شیت های داخلی
سی‌اس‌اس 

المان <style> در HTML و استایل شیت های داخلی

امیرحسین شهسواری 0 دیدگاه ،،،،،،،،،

المان <style> در HTML اطلاعات مربوط به استایل سند فعلی را شامل می‌شود. به عبارت بهتر این المان امکان درج استایل های CSS به صورت داخلی (اینترنال یا Internal) برای کل یک سند اچ‌تی‌ام‌ال را فراهم می‌کند.

نحوه استفاده از المان <style> در اچ‌تی‌ام‌ال

برای افزودن استایل CSS به صورت اینترنال یا داخلی در یک سند HTML کافیست محتویات استایل شیت یا قوانین CSS را مابین تگ های <style> و </style> در بخش <head> سند قرار دهید.

بیشتر بخوانید: قواعد نحوی CSS – قانون، گزینشگر، اظهاریه و ویژگی

در ادامه نمونه‌ای از اِعمال استایل داخلی CSS روی یک سند HTML با کمک المان <style> را مشاهده می‌کنید.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>آموزش سی‌اس‌اس</title>
    <style>
      body {
        background-color: yellow;
      }
      h1 {
        color: blue;
        margin: 5px;
      }
      p {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h1>یک هدینگ نمونه</h1>
    <p>این پاراگراف نمونه است.</p>
  </body>
</html>

در مثال فوق با توجه به قوانین مندرج در بخش <style>، رنگ زمینه بدنه سند (یا <body>) روی زرد تنظیم می‌شود. رنگ متن هدینگ های سطح اول نیز آبی و میزان حاشیه آن‌ها پنج پیکسل خواهد بود. اندازه متن پاراگراف های داخل سند هم روی 20 پیکسل تنظیم می‌شود.

چند نکته تکمیلی

استفاده از المان <style> و استایل‌شیت‌های داخلی، امکان درج استایل های اختصاصی روی المان های یک سند یا صفحه را فراهم می‌کند. بنابراین اگر استایل های موردنظر تنها برای یک صفحه کاربرد دارد و یا اجازه ویرایش استایل شیت های خارجی را ندارید می‌توانید استایل‌ها را در قالب یک استایل‌شیت داخلی به سند اضافه کنید.

اما در صورتی که لازم است استایل های موردنظر روی چند صفحه اچ‌تی‌ام‌ال اعمال شود در روش اینترنال مجبور می‌شوید آن‌ها را به صورت جداگانه به هر صفحه اضافه کنید. این موضوع باعث می‌شود تغییر و ویرایش استایل‌ها دشوارتر شود چرا که هر تغییر لازم است روی تمام سندها انجام شود. از همینرو تا حد ممکن پیشنهاد می‌شود از المان <style> و استایل های داخلی استفاده نکنید. در عوض بهترین راه برای اضافه کردن استایل به صفحات HTML، استفاده از استایل‎‌شیت های خارجی (یا اکسترنال) است.

در المان <style> می‌توانید از خصوصیت media برای اعمال استایل‌شیت روی سند براساس ویژگی‌های رسانه یا دستگاه استفاده کنید. برای نمونه در مثال زیر محتویات استایل‌شیت تنها زمانی روی سند اعمال می‌شود که عرض ناحیه نمایش حداکثر 480 پیکسل باشد.

<style media="all and (max-width: 480px)">
  ...
</style>

بیشتر بخوانید: آشنایی با روش های اضافه کردن CSS به HTML – استایل‌شیت‌های خارجی و داخلی و استایل های درخط

بیشتر بخوانید: فهرست مطالب مجموعه آموزشی CSS

بازگشت به فهرست مجموعه آموزشی HTML

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *