نقش CSS در طراحی سایت

چنانچه بخواهیم صفحاتی از وب که با زبان اچ تی ام ال نوشته می شوند را با مثالی از دنیای واقعی مقایسه کنیم به نظر می رسد که بهترین مثال یک ساختمان است.

در واقع زمانی که یک ساختمان می سازیم، چارچوب اصلی ساختمان جایگاه در، پنجره ها، اتاق ها و … را مشخص می سازد اما این در حالی است که اگر صرفاً به سازه ساختمان اکتفا کنیم ساختمانی خواهیم داشت که از هرگونه زیبایی ظاهری عاری است:

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

در مورد طراحی سایت و زبان اچ تی ام ال هم قضیه به همین صورت است. در واقع با استفاده از اچ تی ام ال فقط می توانیم متون را روی یک صفحه مرورگر وب به نمایش در آوریم بدون آنکه رنگ و اندازه و شکل خاصی برای متون، جداول، فرم ها، منوها و … بتوانیم در نظر بگیریم. چیزی که در اینجا به کمک ما می آید CSS است که مخفف واژگان Cascading Style Sheet است. الگوهای آبشاری یا همان سی اس اس ها در کنار زبان اچ تی ام ال این امکان را به برنامه نویس یا طراح وب می دهند تا بتواند چیدمان، رنگ، اندازه، نوع فونت و بسیاری از امکانات دیگر را در مورد عناصر اچ تی ام ال اعمال کند و بالتبع صفحات به مراتب زیباتری نسبت به صفحاتی که صرفاً با زبان اچ تی ام ال طراحی می شوند را ایجاد کند. برای آنکه به اهمیت سی اس اس در طراحی وب بیشتر پی ببریم در ادامه یک صفحه اچ تی ام ال ساده را خواهیم دید که به هیچ وجه سی اس اس در آن استفاده نشده است:

می بینیم که متون به خوبی نمایش داده شده اند اما اصلا زیبا به نظر نمی رسند. حال با استفاده از کمی کدهای سی اس اس سعی می کنیم که صفحه را کمی زیباتر جلوه دهیم:

منبع: نت شهر