تک دیک

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

روش های اضافه کردن CSS به HTML و اعمال سی اس اس روی اچ تی ام ال
سی‌اس‌اس 

روش های اضافه کردن CSS به HTML

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

پس از آشنایی مقدماتی با CSS، اولین موضوعی که مطرح می‌شود نحوه اعمال یا اضافه کردن سی‌اس‌اس به اچ‌تی‌ام‌ال است. سه روش کلی برای اعمال CSS روی HTML وجود دارد: استایل‌شیت خارجی (External stylesheet)، استایل‌شیت داخلی (Internal stylesheet) و استایل‌های درجا (Inline styles).

سه روش برای اعمال یا اضافه کردن CSS به HTML

در ادامه با روش‌های مختلف اضافه کردن یا اعمال CSS روی HTML آشنا می‌شوید.

استایل شیت خارجی یا اکسترنال CSS

استایل‌شیت خارجی یا اکسترنال (External stylesheet) یا همان CSS خارجی در قالب یک فایل مجزا با پسوند .css ذخیره می‌شود. برای اتصال CSS خارجی به سندهای HTML کافیست در سندهای موردنظر با کمک یک المان <link> به فایل CSS موردنظر ارجاع داده شود.

در مثال زیر محتویات یک سند HTML ساده و نحوه افزودن یک استایل شیت خارجی به سند با کمک المان <link> را مشاهده می‌کنید. همانطور که می‌بینید این المان در بخش <head> سند قرار گرفته است. گفتنی است خصوصیت href در این المان به فایل استایل شیت خارجی موردنظر اشاره می‌کند.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>آموزش سی‌اس‌اس</title>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <h1>یک هدینگ نمونه</h1>
    <p>این یک پاراگراف نمونه است.</p>
  </body>
</html>

محتویات استایل‌شیت (در اینجا فایل style.css) می‌تواند چیزی مشابه با نمونه زیر باشد. فراموش نکنید در این مثال، فایل style.css داخل همان دایرکتوری قرار می‌گیرد که سند HTML در آن قرار دارد (بیشتر بخوانید: مسیر فایل ها در HTML).

body {
  background-color: yellow;
}
h1 {
  color: blue;
  margin: 5px;
}
p {
  font-size: 20px;
}

این شیوه متداول‌ترین و مناسب‌ترین روش برای افزودن CSS به HTML محسوب می‌شود. استفاده از این روش، امکان اعمال استایل های موجود در یک استایل شیت روی چندین سند یا صفحه HTML را فراهم می‌کند. به علاوه استایل‌شیت‌های خارجی، ضمن جداسازی فایل استایل از محتوای سند، نگه داری و ویرایش استایل ها را به سادگی امکان‌پذیر می‌کنند چرا که در این حالت لازم است تغییرات موردنیاز تنها روی فایل یا فایل‌های CSS مربوطه انجام گیرد. به این ترتیب بدون نیاز به دستکاری صفحات HTML، تغییرات استایل روی تمام یا مجموعه‌ای از صفحات یک سایت اعمال می‌شود. افزون بر این جداسازی محتوا از استایل، مطالعه، درک و تغییر استایل یا محتوا را آسان‌تر می‌کند.

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

بیشتر بخوانید: ارجاع به استایل شیت های خارجی با کمک المان <link> در HTML

استایل شیت داخلی یا اینترنال CSS

استایل‌شیت داخلی یا اینترنال (Internal stylesheet) یا همان CSS داخلی، درون سند HTML تعبیه می‌شود. در این حالت محتویات استایل شیت مابین تگ های <style> و </style> در بخش <head> سند قرار می‌گیرند.

در مثال زیر نمونه‌ای از اِعمال استایل داخلی CSS روی یک سند HTML را مشاهده می‌کنید. (این استایل، معادل داخلی استایل شیت مورد استفاده در مثال قبل است).

<!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> در HTML و استایل شیت های داخلی

استایل های درجا یا اینلاین (Inline styles) در CSS

استایل‌های درجا، درخط یا اینلاین (Inline styles) یا همان CSS اینلاین، تنها روی یک المان HTML اعمال می‌شوند. این استایل ها با کمک خصوصیت style در تگ شروع المان درج می‌شوند.

در مثال زیر نمونه‌هایی از استایل های اینلاین در یک سند HTML را مشاهده می‌کنید.

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

همانطور که می‌بینید در این شیوه با توجه به اینکه استایل روی المان جاری اعمال می‌شود از بخش سلکتورها و آکولاد پیرامون بخش اظهاریه‌ها خبری نیست. در عوض تنها جفت های نام ویژگی و مقدار درج می‌شوند.

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

تا حد ممکن پیشنهاد می‌شود از استایل های درجا استفاده نکنید. این استایل ها علاوه بر اینکه انجام تغییرات را دشوار می‌کنند درک و مطالعه استایل ها را نیز سخت‌تر می‌کنند. در واقع با استفاده از این روش، محتوای صفحه و استایل ها با هم ترکیب می‌شوند. با این وجود در برخی موارد مانند تست سریع، استفاده از استایل های اینلاین راهکاری کاربردی به شمار می‌رود. به عنوان مثالی دیگر معمولا ویرایشگر نوشته ها در یک سیستم مدیریت محتوا به شما اجازه می‌دهد مواردی مانند تراز یا رنگ متن را تنها در قالب استایل های اینلاین روی بخش های مختلف محتوا اعمال کنید.

بیشتر بخوانید: خصوصیت style در HTML و استایل های اینلاین

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

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

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

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

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