وقتی شما اقدام به طراحی سایت می کنید پایه و اساس این کار دو زبان برنامه نویسی Cascading Style Sheet)CSS) و HTML است. در یک تعریف ابتدایی می توان چنین گفت که CSS یک زبان برای طراحی صفحات وب است که برای ساخت ظاهری اسناد و اطلاعات وبسایت ها کاربرد دارد. در ابتدای بوجود آمدن HTML این زبان برای نمایش متن و عکس ها ساخته شده بود و مشخص است که هنوز کامپیوتر های شخصی در سراسر دنیا پرکاربرد نبود. به مرور زمان این زبان پیشرفته تر شد و امروز در تمام صفحات وب از این زبان استفاده می شود. اما در ادامه این مقاله می خواهیم به سوال CSS چیست بپردازیم.
CSS یا Cascade Style Sheets زبان برنامه نویسی می باشد که کنسرسیوم بین المللی شبکه جهانی وب یا W3C برای غلبه بر مشکلاتی که در طی زمان با استفاده از HTML بوجود آمده است پیشنهاد داده است. عملا این زبان برنامه نویسی، مکملی بر زبان باستانی HTML است و سعی در پر کردن نقاط ضعف و خلاء های آن دارد. CSS زبانی است که توسط آن قادر خواهید بود تا استیل طراحی صفحات وب سایت تان را یکبار تعریف و به صفحات مورد نیازتان اعمال نمایید. به طور کلی استفاده از CSS باعث تمیزتر شدن کدهای برنامه نویسی تان می شود، تغییرات آتی را آسان می کند و همچنین دید شما را بیشتر به طراحی معطوف می کند تا سر و کله زدن با کدهای برنامه نویسی.
هدف از ساخت زبان CSS چیست ؟
هدف از تولید زبان برنامه نویسی css در واقع جداسازی اطلاعات محتوا (که توسط زبانی مانند HTML نوشته شده اند) از اطلاعات ظاهری مانند صفحه بندی، رنگ و سایز و نوع فونت می باشد. این جداسازی موجب افزایش سرعت در دسترسی به سایت، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، قابلیت طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از پیچیدگی و انجام کارهای تکراری در طراحی وب سایت می گردد. در ادامه برخی عبارت های مرتبط با زبان CSS را با هم مرور می کنیم.
webkit
WebKit یک موتور طراحی است که به مرورگرهای وب اجازه ارائه صفحات وب را می دهد. Webkit موتور ارائه دهنده html / css است که در مرورگر Safari اپل و در Chrome Chrome استفاده می شود.
stylesheet
یک stylesheet مجموعه ای از قوانین و کدهای css است که به مرورگر می گوید که چگونه tag HTML نمایش داده شود.
فایل css
زبان برنامه نویسی css با ایجاد فایل .css همچنین شما را قادر می سازد تا نمایش صفحه مورد نظر خود را در چندین حالت مختلف Rendering مانند حالت نمایش بر روی مانیتور، حالت نمایش در زمان چاپ، در زمان حالت شناسایی صدا ( برای مرورگرهای مبتنی بر قابلیت شناسایی صدا) و همچنین برای نمایش در صفحات مرورگر موبایل را به درستی تنظیم نمایید.
مزایای CSS چیست ؟
با CSS علاوه بر اینکه کدنویسی تمیزتری نیز خواهید داشت، از یک قطعه کد می‌توانید برای صفحات مختلف HTML استفاده کرده و در زمان صرفه جویی کنید. CSS همچنین به بهبود سئو سایت نیز کمک می‌کند و به اصطلاح SEO Friendly است. زیرا استفاده از این کدها می‌تواند تاثیر بسیار خوبی در زیبایی و دسترسی پذیری صفحات وب، پشتیبانی از صفحات وب در دستگاه‌ها و مرورگرهای مختلف و در نهایت بهبود تجربه کاربری داشته باشد. برخی دیگر از مزایای این زبان به صورت زیر می‌باشند:
- ویژگی‌های بیشتری برای کار با اجزای صفحات نسبت به HTML دارد.
- بهبود بخشیدن به سرعت وب سایت و زمان بارگذاری کمتر برای صفحات وب
- امکان ساخت جلوه‌های تصویری و انیمیشنی جذاب
- نگه داری آسان کدها
- جلوگیری از کدنویسی کثیف و غیر اصولی
معایب CSS چیست ؟
زبان CSS در مقابل مزایای بسیار زیادی که دارد، شامل ضعف‌ها و محدودیت‌هایی هم می‌باشد. برخی از محدودیت‌های این زبان عبارتند از:
- ناتوانی در انتخاب والد در CSS نمی‌توان برای هر عنصر، گزینه بالاتر یا والد را انتخاب کرد. دلیل اصلی آن، بهبود کارایی در نمایش صفحات وب در مرورگرهای مختلف است.
- ناتوانی در نام گذاری نقش‌ها در زمان ارجاع scriptهای بخش کاربر و تغییر Selectorها
- تفاوت کارکرد CSS در مرورگرهای مختلف که ممکن است مشکلاتی برای برنامه نویسان ایجاد کند.
- دسترسی برای ایجاد هرگونه تغییر به علت متن باز بودن CSS می‌تواند برنامه نویسان را در دام تغییرات ناخواسته ای بیندازد که ممکن است روی ظاهر کل سایت تاثیر بگذارند.
آشنایی با نسخه های CSS
هر کدام از نسخه‌های CSS به منظور تکمیل نسخه قبلی و ارائه ویژگی‌های جدید معرفی شدند که در این قسمت به شرح مختصر هر یک می‌پردازیم. داشتن نسخه‌های متعدد CSS ممکن است برای کسانی که آشنایی چندانی با آن ندارند گیج کننده باشد، اما معرفی این نسخه‌ها اشاره مختصری به تاریخچه css و تنها به منظور آشنایی با آن‌ها است زیرا امروزه از نسخه سوم و چهارم بیشتر استفاده می‌شود.
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 که بسیار کاربردی هستند.
نکته پایانی
طراحی سایت یک پروژه تخصصی است که کدنویسان، طراحان و مدیران پروژه دست در دست هم می دهند تا بتوانند یک وبسایت حرفه ای و به روز را طراحی کنند. شرکت طراحی سایت پیام آوا با انجام بیش از ۶۰۰ پروژه طراحی سایت شرکتی و طراحی سایت فروشگاهی بهترین مهندسان و طراحان را به خدمت گرفته است تا یک سایت فوق مدرن را برای مشتریان خود کدنویسی کند.
