برنامه نویسی CSS یا Cascade Style Sheets زبان برنامه نویسی می باشد که کنسرسیوم بین المللی شبکه جهانی وب یا W3C برای غلبه بر مشکلاتی که در طی زمان با استفاده از HTML بوجود آمده است پیشنهاد داده است. عملا این زبان برنامه نویسی، مکملی بر زبان باستانی HTML است و سعی در پر کردن نقاط ضعف و خلاء های آن دارد.
CSS زبانی است که توسط آن قادر خواهید تا استیل طراحی صفحات وب سایت تان را یکبار تعریف و به صفحات مورد نیازتان اعمال نمایید.
برای این منظور مثالی را می زنیم. تصور کنید که سایت شما شامل ۱۰۰ صفحه استاتیک می باشد و شما آنها را تماما به زبان HTML نوشته اید. بعد از یک هفته تصمیم گرفته اید تا فونت تمام کلمات را کمی بزرگتر کنید. گفتن اینکه فونت تمام کلمات بزرگتر شود بسیار کار راحتی است و تنها یک جمله است. ولی آیا در عمل تغییر ۱۰۰ صفحه نیز به همان راحتی خواهد بود؟
قطعا نه. CSS دقیقا همان زبانی است که جمله یک خطی شما را تبدیل به همان یک جمله خواهد کرد. شما تنها کافی است تا استیل مورد نیازتان را در طراحی تغییر دهید و آن هم تنها با تغییر یک یا چند مورد کوچک.
جمله آخر اینکه، استفاده از CSS باعث تمیزتر شدن کدهای برنامه نویسی تان می شود، تغییرات آتی را آسان می کند و همچنین دید شما را بیشتر به طراحی معطوف می کند تا سر و کله زدن با کدهای برنامه نویسی.
دنیای وب بدون زبان CSS چگونه می‌شد؟
همانطور که از تصویر بالا برداشت می‌شود، CSS حکم پوست و گوشت و در نهایت کت و شلوار صفحات وب را دارد. برنامه نویسی css طراحان سایت را قادر می‌سازد که بدون محدودیت خلاقیت‌های خود را در طراحی صفحات سایت پیاده سازی کنند.
آیا متوجه شدید اگر CSS وجود نداشت دنیای وب چه چهره زشت و ناخوشایندی به خود می‌گرفت؟ در گذشته برای ساخت صفحات وب سایت همه چیز در کدهای HTML خلاصه می‌شد. طراحان سایت برای ساخت یک صفحه وب و اعمال ویژگی‌های ظاهری مختلف مانند تغییر رنگ، اندازه و… عناصر صفحه، کافی بود با خاصیت‌های داخلی HTML دست و پنجه نرم کنند. آنها می‌بایست این تغییرات را در تک تک صفحه‌های مورد نظر و بر روی تک به تک اجزای آن اعمال می‌کردند. این عوامل طراحی سایت را با صرف زمان و سختی‌های زیادی همراه ساخته بود.
آشنایی با نحوه عملکرد CSS
کلمه “Cascading” که اولین کلمه از CSS است به این نکته اشاره می‌کند که کدهای نوشته شده با CSS به صورت پیش فرض از بالا به پایین و به ترتیب پردازش و اجرا می‌شوند. CSS این قابلیت را در اختیار شما قرار می‌دهد که با ایجاد یک فایل خارجی (Style Sheet) ویژگی‌های اجزای مختلف در صفحات وب سایت را تعیین کنید. یعنی تغییراتی که شما به کمک CSS در یک صفحه وب ایجاد می‌کنید، روی اجزای زیرمجموعه ی آن هم تاثیر می‌گذارند. به عنوان مثال اگر شما رنگ متن یک صفحه را تغییر دهید، تمامی زیرمتن‌ها مانند پاراگراف‌ها و سرخط‌ها نیز آن رنگ را خواهند داشت. تصویر بالا نمونه ای از یک فایل CSS یا Styles است.
فرانت اند (Front End) به چه معناست؟
CSS یکی از پرکاربردترین زبان‌ها در زمینه طراحی فرانت اند است. به مجموعه تکنولوژی هایی که روی ظاهر و گرافیک سایت تاثیر گذاشته و هیچ ارتباطی با عملکرد آن ندارند فرانت اند گفته می‌شود. در فرانت اند فقط با عناصر بصری سایت کار می‌کنیم و هر تغییری که ایجاد می‌کنیم در چهره سایت مشخص می‌شود. زبان‌های HTML، JS و CSS جزو اصلی‌ترین عناصر فرانت اند هستند.
چرا باید از CSS استفاده کنیم؟
اساسی‌ترین کاربرد CSS، زیبا سازی و بهبود طراحی صفحات وب است. CSS بسیار منعطف‌تر از HTML است و به شما اجازه می‌دهد برای تغییر صفحات وب، کمتر سراغ ساختار HTML رفته و با سرعت بیشتری طراحی خود را خوش استیل کنید. در ادامه این مطلب می‌خواهیم ببینیم که چرا باید از کدهای CSS در صفحات وب استفاده کنیم.
آشنایی با نسخه‌های CSS
هر کدام از نسخه‌های CSS به منظور تکمیل نسخه قبلی و ارائه ویژگی‌های جدید معرفی شدند که در این قسمت به شرح مختصر هر یک می‌پردازیم. داشتن نسخه‌های متعدد CSS ممکن است برای کسانی که آشنایی چندانی با آن ندارند گیج کننده باشد، اما معرفی این نسخه‌ها اشاره مختصری به تاریخچه css و تنها به منظور آشنایی با آنها است زیرا امروزه از نسخه سوم و چهارم بیشتر استفاده می‌شود.
- CSS 1
CSS 2
CSS 3
CSS 4
CSS 1
اولین نسخه از CSS که به طور رسمی در سال ۱۹۹۶ معرفی شد، CSS 1 بود.
با معرفی نسخه‌های جدیدتر، در حال حاضر استفاده از CSS 1 پیشنهاد نمی‌شود. برخی از ویژگی‌های اصلی این نسخه از CSS به صورت زیر می‌باشند:
- افزودن امکاناتی برای فونت مانند ایجاد سبک و تنظیم Font face و Emphasis
- امکان تغییر رنگ، تخصیص رنگ به پس زمینه و سایر عناصر دیگر به متن
- امکان تنظیم فاصله بین کلمات و سطرها در متن (Alignment)
- امکان اضافه کردن کادر (Border)، حاشیه (Margin) و لایه بندی (Padding) صفحات وب
- امکان کلاس بندی گروهی از ویژگی‌ها (Attributes)
CSS 2
این نسخه در ۱۹۹۸ معرفی شد و برخی از امکانات جدید آن عبارت اند از:
- امکان تنظیم جایگاه اجسام به سه روش ثایت، متغیر و وابسته به سایر اجسام
- شناخت انواع فایل‌های چند رسانه ای
- قابلیت هایی برای طراحی متن مانند تنظیم راست چین بودن نوشته ها
این نسخه دارای دو اصلاحیه CSS 2.1 و CSS 2.2 نیز بود اما به طور کلی امروزه استفاده از این نسخه نیز پیشنهاد نمی‌شود.
CSS 3
CSS 3 در ۱۹۹۹ معرفی شد و تحول بزرگی در بهبود نسخه‌های CSS محسوب می‌شود. این نسخه ساختاری ماژول بندی شده دارد و امکانات آن در قالب ماژول‌های مختلف در دسترس طراحان قرار می‌گیرد. تا سال ۲۰۱۲ حدود ۵۰ ماژول معرفی شدند که امکاناتی مانند استفاده از تصویر در پس زمینه، اضافه کردن فرم‌های چند ستونی و غیره را برای طراحی سایت‌ها فراهم می‌کنند.
CSS 4
در واقع استانداردی به نام CSS 4 وجود ندارد زیرا توسعه دهندگان CSS 3 به توسعه و بهبود هر کدام از ماژول‌ها پرداختند و این سطح، در واقع از تعدادی از ماژول‌های سطح ۴ تشکیل شده است. برخی از این ماژول‌ها عبارت اند از Image value، Background و Selectors که بسیار کاربردی هستند.
جمع بندی
در این مقاله در مورد حقایق css صحبت کردیم و دیدیم که مهمترین کاربردهای css چیست . اما فراموش نکنید که برای طراحی سایت، آموزش CSS به تنهایی کافی نیست و به یادگیری HTML و جاوا اسکریپت نیز نیاز دارید. اگر از آموزش‌ها و تمرینات پروژه محور استفاده کنید، قطعا زمان یادگیری شما بسیار کاهش خواهد یافت و پس از چند هفته می‌توانید از قابلیت‌های CSS در کدهای خود استفاده کنید.
