در ابتدا برای دوستانی که آشنایی کمی با دارند به طور مختصر به معرفی آن می پردازیم.
CSS) Cascading Style Sheet) روشی است برای قالب بندی و طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شود،بدون نیاز به استفاده از کدهای HTML. با این روش میتوان از دوباره نویسی کدهای HTML که باعث مشکل شدن کد نویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت می شود جلوگیری کرد. به طور مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم. همچنین می توانیم از این ابزار در مواردی به جای جاوا اسکریپت نیز استفاده کنیم و چون مشکلات جاوا اسکریپت،مثلاً غیر فعال بودن جاوا اسکریپت در مرورگر را ندارد با خیالی آسوده تر می توانیم از آن استفاده کنیم.
CSS هم مانند جاوا اسکریپت این امکان را به ما می دهد که از هر فایل استایل خارجی مورد پسند برای تعیین خواص بخش های مختلف صفحه های یک سایت استفاده کنیم. در این صورت می توانیم ظاهر هر صفحه ی دلخواه را با ایجاد یک تغییر کوچک در فایل استایل تغییر دهیم. مثلاً فرض کنید که رنگ متن یا نوع فونت متن صفحه ای را در یک فایل استایل تعیین کرده ایم و از آن در طراحی چندین صفحه استفاده کرده ایم، حالا اگر بخواهیم رنگ متن همه این صفحات را تغییر دهیم تنها کافی است تا رنگ متن را در همان فایل استایل تغییر دهیم و نیازی به تغییر دادن همه ی صفحات نداریم.
نحوه ارتباط CSS با HTML
اطلاعات CSS می تواند از منابع مختلفی تامین شوند. CSSها می توانند بصورت فایلی مجزا ضمیمه کدهای HTML شوند و یا درون کدهای HTML جا سازی شوند. میتوان در یک صفحه، چندین فایل CSS را از بیرون فراخوانی کرد. حتی می توان CSSهای کاملا متفاوتی را برای نسخه چاپی و نسخه نمایشی تهیه و استفاده کرد. برای مثال، نسخه نمایشی (آن چیزی که بر روی مرورگرها نشان داده می شود)، می تواند کاملا متفاوت از نسخه چاپی همان صفحه باشد بطوریکه طراحان می توانند با دقت بالاتری، نیازهای طراحی را در این دو محیط جداگانه، طراحی و پیاده سازی نمایند.
الویت در منابع CSS
الویت در منابع CSS (از بالاترین به پایینترین):
CSSهای نوشته شده توسط طراحان وب سایت:
- CSSهای درون خطی: درون کدهای HTML صفحات، ویژگیهای طراحی برای یک المان خاص، با استفاده از "style" مشخص می شوند.
- CSSهای جاسازی درونی، بلوکی از کدهای CSS درون خود صفحه HTML
- CSSهای خارجی، یعنی فایلی جداگانه از CSS که از صفحه HTML به آن ارجاع داده می شود.
CSSهای کاربران:
- فایلی از CSS است که کاربر اینترنتی توسط مرورگر خود آن را انتخاب می کند و به تمام صفحات اعمال می شود.
CSSهای پیش فرض:
- CSSهایی می باشند که بطور پیش فرض توسط مرورگر اعمال می شوند. با وجود این CSSهای پیش فرض، نیاز نخواهیم داشت تا همه CSSهای یک المان را تعریف و پیاده سازی نماییم.
استایلی که بیشترین الویت را دارد، محتوای نشان داده شده را کنترل می کند. الویت ها به ترتیبی است که در بالا توضیح داده شده اند. چنانچه استایلی با الویت بالاتری پیدا نشود، الویت پایینتر بررسی خواهد شد. بسته به نوع مرورگر مورد استفاده، کاربر می تواند از یکی از CSSهای ارائه شده توسط طراح استفاده نماید و یا آنکه تمامی آنها را حذف نماید و صفحه را با CSSهای پیش فرض مرورگر مشاهده نماید و یا آنکه ممکن است بخواهد سرتیترهای قرمز رنگ ایتالیک را بدون تغییرات در دیگر استایلها حذف نماید.
مثالها:
برای مثال، فایلی به نام highlighheaders.css شامل محتویات زیر می باشد:h1 -- color: white; background-color: orange !important; }
h2 -- color: white; background-color: green !important; }
چنین فایلی بطور محلی ذخیره شده است و درصورت نیاز فراخوانی و استفاده شود و یا آنکه بصورت داخلی مورد استفاده قرار گیرد. "!important" به معنای غلبه کردن بر ویژگیهای تعریف شده توسط طراح است (بحث الویت).
