CSS چیست ؟

سی اس اس چیست؟

CSS مخفف Cascading Style Sheets طبق تعریف کنسرسیوم جهانی وب ( W3 ) عبارت است از مکانیزمی ساده برای سبک دهی اسناد وب نظیر فونت ها ، رنگ ها و فاصله ها. سبک دهی از طریق CSS ظاهر یک صفحه را برای ارائه در فضای وب آماده میکند. توجه کنید که CSS یک زبان برنامه نویسی نیست !.


ممکن است بدانید که HTML جهت کسب اطلاعات بیشتر مقاله HTML چیست؟ را مطالعه نمایید ساختار اصلی و محتوی صفحات وب را از طریق تگ ها و محتویات درون آنها تعریف و سازماندهی میکند. برای مثال جهت نمایش یک پاراگراف از تگ p به صورت زیر استفاده میشود:

<p>محتوی و متن درون تگ پاراگرف</p>

به صورت پیش فرض این پاراگراف به صورت یک خط بدون رنگ بندی ، فونتی خاص، اندازه و ... در یک مرورگر تمایش داده میشود. برای نمایش این پاراگراف با ویژگی های خاص خودمان ( طراح سایت ) از CSS استفاده میشود. در واقع CSS شکل ظاهری ، مختصات ، برخی از جلوه های بصری ساده و ... را تعیین میکند. بدون وجود CSS تمام محتوی صفحات وب از جمله متن ، تصویر ، لینکهای پیمایش و ... از بالا و سمت چپ صفحه نمایش شروع و چیده میشود. اطلاعات نمایش داده شده و بدون CSS همین صفحه را میتوانید در اینجا مشاهده کنید.

CSS محفف عبارت Cascading Style Sheets به معنی سبک دهنده های آبشاری است. هر CSS از یک یا چند قانون تشکیل میشود و هر قانون شامل یک انتخاب کننده و یک یا چند اعلان میباشد. انتخاب کننده ها ( Selector ) قسمتی از صفحه را که تحت تاثیر سبک ( Style ) قرار میگیرد مشخص میکند و اعلانها ( Declaration ) فرمت اعمال شونده را مشخص میکنند. انتخاب کننده ها انواع مختلفی دارند نظیر : استفاده از نام یک نوع المان که تمامی المانهای صفحه را با فرمتی خاصی مشخص میکند. استفاده از ID که به بک المان خاص اِعمال میشود و استفاده از کلاسهای برای تعیین ویژگی های گروهی المان ها.

روشهای مختلف اِعمال سبک ها ( Style )

سبک های درون خطی

از این نوع سبکها درون المانهای HTML استفاده میشود و ویژگی های تعریف شده تنها بر روی همان المان تاثیر دارد. مثال زیر رنگ متن داخل پاراگراف را به رنگ قرمز تغییر میدهد

<p style="color:red;">محتوی و متن درون تگ پاراگرف</p>

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

سبک های درون صفحه ای

از این سبک ها در بالای صفحات HTML و در داخل تگ HEAD استفاده میشود. برای مشخص کردن سبک ها از سایر آیتم ها ، سبک ها را درون تگ STYLE قرار میگیرند.

چنانچه از یک سبک همانند کادر بالا استفاده کنید ، تمام متن المانهای P ( پاراگراف ها ) موجود در صفحه به رنگ قرمز تغییر میکنند. همچنین میتوان سایر المان ها را در تگ STYLE سبک دهی کرد. میتوان از کلاسها و آیدی های مختلف استفاده کرد و یا فونتی را به صفحه ضمیمه کرد. دقت کنید که این مطلب قصد آموزش CSS را ندارد و تنها توضیحاتی برای شناخت خوانندگان عزیز ارائه کرده است.

سبک های خارجی

اگر چه سبک دهی به روش درون صفحه ای مشکلات درون خطی را ندارد ولی به هر ترتیب برای ویرایش باید سند HTML را ویرایش کرد.

سبک دهی خارجی عبارت است از تعیین ویژگی های المانهای یک سند HTML در خارج از سند. سبک های خارجی در یک صفحه متنی و با فرمت ( پسوند ) CSS ذخیره میشوند و با عبارت زیر به یک سند HTML پیوست میشود.

<link href="address/file.css" rel="stylesheet" type="text/css" />

شاید متوجه شده باشید منظور از address/file.css آدرس صفحه سبک ها است و با توجه به این نکته میتوان از یک صفحه سبک دهی خارجی برای بیش از یک سند HTML استفاده کرد و این یکی از مزیتهای مهم سبک دهی خارجی است. تمامی قوانین مربوط به سبک های خارجی مانند سبک های درون صفحه است.


یک سند HTML  بدون وجود CSS خسته کننده ، بی روح و از مقدار زیادی آشفتگی برخوردار خواهد بود و به همین خاطر است که طراحان وب سایت ها پیوسته منتظر ارائه ویرایش های جدید CSS هستند. در حال حاضر و در زمان ارائه این مطلب CSS3 جدیدترین نسخه ارائه شده توسط W3C مشاهده وب سایت کنسرسیوم جهانی وب است که جذابیت بسیار زیادی را برای صفحات وب به ارمغان آورده است.

واژه ها و عبارات به کار رفته در این مطلب

  • المان : تگ های ( عناصر ) به کار رفته در تگ Body
  • HTML : زبان نشانه گذاری ابر متن
  • سبک : Style
  • سبک های درون خطی : Inline Style
  • سبک های درون صفحه ای : Global Style
  • سبک های خارجی : External Style
  • W3C : کنسرسیوم جهانی وب