زبان CSS

از CSS به عنوان مکمل HTML یاد می کنند. در این مقاله قصد داریم به این مسئله بپردازیم که چرا زبان CSS مهم است و بدون وجود آن یک صفحه سایت چه مشکلاتی پیدا می کند و چه قابلیت هایی را از دست می دهد. تا پایان این مطلب همراه ما باشید و پاسخ این سوالات را پیدا کنید!

پیشینۀ CSS

CSS

قبل از هر چیز بیایید سری به تاریخچه CSS بزنیم و ببینیم این ابزار کاربردی چگونه به وجود آمد. از نسخه های متعدد آن اطلاع پیدا کنیم و از فراز و نشیب هایی که پشت سر گذاشت تا به جایگاه فعلی رسید مطلع شویم.

نسخه اول یا CSS1

سال 1996 آغازی بود برای زبان CSS و در این سال اولین نسخه آن با عنوان CSS1 عرضه شد. عبارت Cascading Style Sheets به معنای شیوه نامه آبشاری چیزی بود که با اختصار حروف آن CSS به وجود آمد. در نسخه اولیه قابلیت هایی مثل: ایجاد و سبک فونت، تنظیم تصاویر و متن، حاشیه سازی، تغییر رنگ و مواردی از این دست به توسعه دهندگان وب ارائه شد. اما این پایان راه نبود.

نسخه 2

نسخه دوم در سال 1998 انتشار یافت. در این نسخه ویژگی های جدیدی مانند امکان درج و ایجاد و شناخت انواع فایل به CSS اضافه شد. علاوه بر این شما در نسخه دوم می توانستید به نوشته ها سایه اضافه کنید. راست چین کردن متن ها و همچنین قابلیت تنظیم جایگاه اجسام از قابلیت های مهم دیگر این نسخه بودند.

CSS3

آخرین نسخۀ استانداردی که منتشر شده CSS3 است. عرضۀ اولیه در سال 1999 انجام شد اما از آنجا که ساختار این نسخه به صورت ماژولار بود تا سال 2012 بیش از 50 نوع ماژول مختلف در اختیار برنامه نویسان قرار گرفت. این ماژول ها امکانات متعددی داشتند و قابلیت های CSS را بهبود بخشیدند. از جمله این قابلیت ها می شود به اضافه کردن تصاویر پس زمینه، فرم های چند ستونی و صفحه بندی سایت اشاره کرد.

نسخه آینده

طراحی نسخه چهارم CSS از سال 2009 در دستور کار قرار گرفت؛ با این وجود هنوز هیچ یک از مرورگرهای معروف از تمامی امکانات آن پشتیبانی نمی کنند. اما این مسئله باعث نمی شود که همه گیر شدن استفاده از آن را در آینده ای نزدیک دور از ذهن تصور کنیم. بی شک هنگامی که این نسخه نیز به بلوغ کافی برسد و بستر لازم برای آغاز به کار آن فراهم شود می تواند جایگاه محکمی در دنیای تکنولوژی به دست آورد.

زیبایی بصری با CSS

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

CSS نیز یک زبان برنامه نویسی به حساب نمی آید. متغیرها، توابع، شرط ها، حلقه و... در این زبان وجود ندارد. سی اس اس یک زبان نشانه گذاری است که به عنوان ابزاری برای زیباسازی به کار گرفته می شود.

کاری اصلی که CSS انجام می دهد این است که اطلاعات محتوا را از اطلاعات ظاهری مثل رنگ و سایز و نوع فونت جدا می کند. با انجام این کار سرعت دسترسی به سایت بالا می رود. این جداسازی همچنین انعطاف پذیری بیشتری به وجود می آورد و در نتیجه کنترل بیشتری روی ویژگی های ظاهری خواهید داشت. CSS به شما کمک می کند تا چندین صفحه را با فرمت یکسان طراحی کنید و دیگر نیازی به انجام کارهای تکراری در طراحی سایت نداشته باشید.

تنظیماتی در CSS وجود دارند که با اعمال آن، صفحه سایت بسته به اندازۀ صفحه نمایش کاربر به شکل متفاوتی نمایش داده می شود. به این کار طراحی صفحه Responsive یا واکنش گرا می گویند که اخیرا در دنیای وب اهمیت بالایی پیدا کرده است.

ساختار کدهای زبان CSS

زبان CSS

حالا که در مورد تاریخچه CSS می دانیم و با کاربردهای آن تا حدودی آشنا هستیم وقت آن رسیده که به مسائل عملی ورود کنیم. در این قسمت با ساختار کدهای CSS آشنا خواهید شد.

یک قطعه کد CSS از دو قسمت اساسی تشکیل می شود:

  • گزینشگر یا Selector
  • اعلان یا Declaration

اگر به تصویر زیر دقت کنید این بخش ها را خواهید دید.

css code

Selector معمولا یک تگ HTML است که آن را قالب بندی می کنید. این عنصر می تواند یک پاراگراف، تیتر یا تصویر باشد.

بخش دوم که اعلان (Declaration) نام دارد خود به دو قسمت Peroperty و Value تقسیم می شود. قسمت Property نمایانگر یک خاصیت است که قصد تغییر آن را دارید؛ هر Property یک Value یا مقدار نیز دارد. در مثال بالا ما قصد تغییر اندازه فونت را داریم و مقدار 1.2 را برای آن در نظر گرفته ایم.

چگونگی قرار گرفتن کدها

پس از آنکه کدهای CSS نوشته شد باید آنها را به صفحه HTML اضافه کنیم. سه روش کلی برای انجام این کار وجود دارد که عبارت‌اند از: Inline style، Internal style و External style.

روش اول (inline style) به این صورت است که کدهای CSS را در میان تگ های HTML تعریف می کنید. اگر چنین روندی را در پیش بگیرید بد نیست بدانید به مرور زمان و با بزرگ شدن پروژه، کدهای شما نامرتب خواهند شد. این روش غالباً در مواقعی به کار می رود که بخواهید تغییرات مستقیم بر روی یک تگ به خصوص اعمال کنید بدون آنکه تأثیری روی تگ های خارجی بگذارد.

در روش دوم یعنی internal style کدهای CSS در میان تگ های <style></style> در صفحه HTML نوشته می شوند. برنامه نویسان معمولاً زمانی از این روش استفاده می کنند که بخواهند برای یک صفحه خاص، استایل مشخصی داشته باشند.

در نهایت روش سوم با نام external style به این شکل انجام می شود که توسعه دهنده یک صفحه با پسوند css می سازد و کدهای CSS را در آن می نویسد. کاربردی ترین روش کدنویسی سی اس اس در واقع همین روش است. پس از آنکه کدها را نوشتید و فایل را ذخیره کردید نوبت به اتصال می رسد. دستورات HTML کار اتصال را انجام می دهند. برای انجام این کار فقط لازم است درون تگ <link> در بخش <head> فایلی که ایجاد کرده اید را معرفی کنید.

برای یادگیری بهتر این زبان بد نیست به سایت w3schools سر بزنید.

دلایل استفاده از زبان CSS

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

مزایا

  • سرعت سایت را بهبود می بخشد و زمان بارگذاری صفحات را کاهش می دهد. این مسئله به ویژه در بهینه سازی سایت یا SEO تأثیر به سزایی دارد.
  • در طراحی سایت سازگاری بیشتری نشان می دهد و ویژگی های بیشتری برای اجزای صفحات نسبت به HTML دارد.
  • کدهای آن را می توان در جاهای دیگر نیز به کار برد و نگه داری از این کدها راحت است.
  • امکان ساخت انیمیشن های جذاب را برای توسعه دهندگان فراهم می کند.

در کنار این مزیت ها محدودیت هایی نیز در این زبان وجود دارد که توجه به آنها لازم است.

محدودیت ها

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

نتیجه گیری: با اینکه مثالی در مورد ساختمان آوردیم و گفتیم که زبان سی اس اس در واقع نقش رنگ آمیزی و زیبایی های ظاهری را دارد اما این مسئله نباید موجب برداشت غلط شود. همه می دانند که در یک ساختمان کار ساخت و ساز و انجام موارد مربوط به نورپردازی و رنگ آمیزی بر عهده اشخاص متفاوتی است.

در دنیای برنامه نویسی وب اوضاع به شکل دیگری است. کار نوشتن کدهای HTML و CSS توسط یک برنامه نویس انجام می شود و اگر بخواهید در این مورد کسب مهارت کنید بهتر است هر دوی این موارد را یاد بگیرید. همچنین فراموش نکنید که سه عنصر دیگر نیز در ایجاد یک سایت خوب دخالت دارند. یکی از آنها پایگاه داده MySQL است و دیگری زبان برنامه نویسی JavaScript. عنصر سوم زبان PHP است که امکانات فوق العاده ای برای طراحی سایت در اختیار شما می گذارد. یادگیری آنها را فراموش نکنید!