CSS چیست : همه ما دوست داریم جایی را برای زندگی انتخاب کنیم که احساسی گرم و صمیمی داشته باشد و از وقت گذراندن در آن خسته نشویم. طراحی دکور همان چیزی است که به یک اتاق بی روح و خالی، جانی دوباره می‌بخشد. در دنیای وب نیز برنامه نویسان به دنبال زیبایی و منعطف کردن صفحات وب سایت‌ها هستند تا توجه کاربران را جلب کنند و میزان بازدید آن‌ها از سایت را افزایش دهند. یکی از ابزارهای اصلی و لازم برای بهبود طراحی سایت، CSS است که در این مطلب قصد داریم شما را با آن آشنا کنیم تا بدانید css چیست و چه کاربردی در دنیای وب دارد؟

CSS چیست؟

اگر از ما بپرسید اولین قدم برای یادگیری طراحی سایت چیست، قطعا جواب ما آموزش HTML و سپس CSS است. این دو زبان در کنار یکدیگر معنی پیدا می‌کنند. زیرا CSS را می‌توان مکملی بر زبان HTML دانست که با هدف پر کردن نقاط ضعف و خلاء‌های آن توسعه یافته است. CSS مخفف عبارت Cascading Style Sheets و به معنی "برگه‌های آبشاری" است.

این زبان با هدف فرم دهی صفحات وب HTML و اجزای مختلف صفحات آن توسط کنسرسیوم بین المللی شبکه جهانی وب یا W3C توسعه داده شده است. در واقع CSS یک زبان نشانه‌ گذاری است که اجازه می‌دهد ساختار صفحات وب را از چیدمان عناصر گرفته تا تغییر رنگ‌بندی و فونت‌ها شکل دهید. این زبان در کنار HTML و JavaScript از هسته‌های اصلی طراحی صفحات وب به حساب می‌آیند.

دنیای وب بدون زبان CSS چگونه می‌شد؟

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

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

بیشتر بخوانید: HTML چیست و چه کاربردی دارد؟ توضیح مفاهیم همراه با مثال

آشنایی با نحوه عملکرد CSS

کلمه "Cascading" یا آبشاری که اولین کلمه از CSS است به این نکته اشاره می‌کند که کدهای نوشته شده با CSS به صورت پیش فرض از بالا به پایین و به ترتیب پردازش و اجرا می‌شوند. CSS این قابلیت را در اختیار شما قرار می‌دهد که با ایجاد یک فایل خارجی (Style Sheet) ویژگی‌های اجزای مختلف در صفحات وب سایت را تعیین کنید. یعنی تغییراتی که شما به کمک CSS در یک صفحه وب ایجاد می‌کنید، روی اجزای زیرمجموعه ی آن هم تاثیر می‌گذارند. به عنوان مثال اگر شما رنگ متن یک صفحه را تغییر دهید، تمامی زیرمتن‌ها مانند پاراگراف‌ها و سرخط‌ها نیز آن رنگ را خواهند داشت. تصویر بالا نمونه ای از یک فایل CSS یا Styles است.

فرانت اند (Front End) به چه معناست؟

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

بیشتر بخوانید: فرانت اند چیست : برنامه نویسی Front End چیست؟

مثالی از CSS در دنیای واقعی

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

P {      Background-color: red;      Color: white; }

همانطور که می‌بینید کدهای CSS بسیار به زبان انسان شبیه هستند، بنابراین یادگیری این زبان به شدت آسان است. در کد بالا، خاصیت‌های CSS به المان پاراگراف (p) اختصصاص داده شده است. به این قسمت از کدهای CSS انتخاب کننده یا selector گفته می‌شود. همچنین تمام بخش‌های داخل براکت‌ها بلوک declaration نامیده می‌شوند. هر کدام از خط‌های داخل بلوک declaration یک declaration است که از دو بخش تشکیل می‌شود.

بخش قبل از علامت : property نامیده می‌شود که نشان دهنده خاصیتی است که قصد دارید به آن مقداری اختصاص دهید. بخش بعد از علامت : که value نامیده می‌شود نشان دهنده مقدار آن خاصیت است. هر خط declaration با یک علامت سمی کالم (;) به پایان می‌رسد.

روش‌های اضافه کردن CSS به صفحه HTML

حال که دانستیم css چیست و چه ویژگی هایی دارد بهتر است سراغ معرفی نحوه استفاده از آن در کد برویم. برای استفاده از CSS سه راه برای توسعه دهندگان وجود دارد که در این قسمت از مطلب به این سه روش می‌پردازیم:

• روش inline style : استفاده از این روش می‌توانید کدهای css را در میان تگ‌های html تعریف کنید. این روش معمولا توصیه نمی‌شود، زیرا به مرور زمان و با بزرگ‌تر شدن پروژه، این کدها بسیار نامرتب می‌شوند و در آینده باعث سردرگمی خواهند شد. برای مثال :<p style=”background-color: red; color: white;”></p>

• روش internal style : در این روش کافیست تمام کد‌های CSS را در میان تگ‌های باز و بسته <style></style> که در صفحه HTML نوشته شده است، قرار دهید. این روش معمولا زمانی استفاده می‌شود که بخواهند استایل خاصی را فقط در یک صفحه منحصر به فرد داشته باشند. برای مثال :<style>    P {        Background-color: red;        Color: white;    } </style>

• روش External Style : با استفاده از این روش شما می‌توانید یک صفحه دیگر با پسوند css ایجاد کنید و سپس کدهای CSS را در آن بنویسید. سپس کافیست صفحات HTML مورد نظر خود را با استفاده از تگ‌‌های <link> به این صفحات متصل کنید. در این روش باید آدرس فایل صفحه css را در اتریبیوت href تگ link بنویسید. برای مثال :<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

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

1. استایل‌های inline
2. فایل‌ها و تگ‌های CSS
3. پیشفرض مرورگرها

و در نهایت اگر همه استایل‌ها دارای اولویت یکسان باشند، خواصی انتخاب میشوند که آخر از همه نوشته شده باشند.

چرا باید از CSS استفاده کنیم؟

اساسی‌ترین کاربرد CSS، زیبا سازی و بهبود طراحی صفحات وب است. CSS بسیار منعطف‌تر از HTML است و به شما اجازه می‌دهد برای تغییر صفحات وب، کمتر سراغ ساختار HTML رفته و با سرعت بیشتری طراحی خود را خوش استیل کنید. در ادامه این مطلب می‌خواهیم ببینیم که چرا باید از کدهای CSS در صفحات وب استفاده کنیم.

مزایای CSS

با CSS علاوه بر اینکه کدنویسی تمیزتری نیز خواهید داشت، از یک قطعه کد می‌توانید برای صفحات مختلف HTML استفاده کرده و در زمان صرفه جویی کنید. CSS همچنین به بهبود سئو سایت نیز کمک می‌کند و به اصطلاح SEO Friendly است. زیرا استفاده از این کدها می‌تواند تاثیر بسیار خوبی در زیبایی و دسترسی پذیری صفحات وب، پشتیبانی از صفحات وب در دستگاه‌ها و مرورگرهای مختلف و در نهایت بهبود تجربه کاربری داشته باشد. برخی دیگر از مزایای این زبان به صورت زیر می‌باشند:

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

معایب CSS چیست؟

زبان CSS در مقابل مزایای بسیار زیادی که دارد، شامل ضعف‌ها و محدودیت‌هایی هم می‌باشد. برخی از محدودیت‌های این زبان عبارتند از:

• ناتوانی در انتخاب والد در CSS نمی‌توان برای هر عنصر، گزینه بالاتر یا والد را انتخاب کرد. دلیل اصلی آن، بهبود کارایی در نمایش صفحات وب در مرورگرهای مختلف است.

• ناتوانی در نام گذاری نقش‌ها در زمان ارجاع script‌های بخش کاربر و تغییر Selectorها

• تفاوت کارکرد CSS در مرورگرهای مختلف که ممکن است مشکلاتی برای برنامه نویسان ایجاد کند.

• دسترسی برای ایجاد هرگونه تغییر به علت متن باز بودن CSS می‌تواند برنامه نویسان را در دام تغییرات ناخواسته ای بیندازد که ممکن است روی ظاهر کل سایت تاثیر بگذارند.

ریسپانسیو کردن با css

همانطور که می‌دانید در زمان‌های گذشته بیشتر افراد از طریق سیستم‌های کامپیوتری به وب‌گردی و مشاهده صفحات وب می‌پرداختند. اما امروزه با پیشرفت تکنولوژی، دسترسی به اینترنت با دستگاه‌هایی مثل گوشی ، تبلت، ساعت‌های هوشمند و ... افزایش پیدا کرده است. این امر سبب شد که توسعه دهندگان به فکر سازگار کردن صفحات وبسایت‌ها با دستگاه‌های هوشمند بیفتند.

سازگار کردن صفحات وب‌سایت‌ها همان Responsive یا واکنشگرا کردن است. به عبارت دیگر یعنی بتوانید صفحات وب سایت را در رزولوشن‌های مختلفی مشاهده کنید، بدون اینکه صفحه مورد نظر با اختلالی رو به رو شود. پیاده سازی این قابلیت با فریم ورک هایی که برای css نوشته شده است، بسیار ساده و سریع شده است.

آشنایی با نسخه‌های CSS

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

CSS 1

اولین نسخه از CSS که به طور رسمی در سال 1996 معرفی شد، CSS 1 بود.

با معرفی نسخه‌های جدیدتر، در حال حاضر استفاده از CSS 1 پیشنهاد نمی‌شود. برخی از ویژگی‌های اصلی این نسخه از CSS به صورت زیر می‌باشند:

• افزودن امکاناتی برای فونت مانند ایجاد سبک و تنظیم Font face و Emphasis

• امکان تغییر رنگ، تخصیص رنگ به پس زمینه و سایر عناصر دیگر به متن

• امکان تنظیم فاصله بین کلمات و سطرها در متن (Alignment)

• امکان اضافه کردن کادر (Border)، حاشیه (Margin) و لایه بندی (Padding) صفحات وب

• امکان کلاس بندی گروهی از ویژگی‌ها (Attributes)

CSS 2

این نسخه در 1998 معرفی شد و برخی از امکانات جدید آن عبارت اند از:

• امکان تنظیم جایگاه اجسام به سه روش ثایت، متغیر و وابسته به سایر اجسام

• شناخت انواع فایل‌های چند رسانه ای

• قابلیت هایی برای طراحی متن مانند تنظیم راست چین بودن نوشته ها

این نسخه دارای دو اصلاحیه CSS 2.1 و CSS 2.2 نیز بود اما به طور کلی امروزه استفاده از این نسخه نیز پیشنهاد نمی‌شود.

CSS 3

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

CSS 4

در واقع استانداردی به نام CSS 4 وجود ندارد زیرا توسعه دهندگان CSS 3 به توسعه و بهبود هر کدام از ماژول‌ها پرداختند و این سطح، در واقع از تعدادی از ماژول‌های سطح 4 تشکیل شده است. برخی از این ماژول‌ها عبارت اند از Image value، Background و Selectors که بسیار کاربردی هستند.

پشتیبانی مرورگرها از CSS

در اولین سال‌های معرفی CSS بسیاری از مرورگرها توانایی تفسیر و تجزیه کدهای آن را نداشتند. به همین دلیل توسعه دهندگان مجبور بودند از تکنیکی به نام CSS Hack استفاده کنند. به کمک این تکنیک، برنامه نویسان تعیین می‌کنند قسمت هایی از CSS که در مرورگر پشتیبانی نمی‌شوند، نمایش داده نشوند.

پس از آن مرورگر Internet Explorer 3 شروع به پشتیبانی از کدهای CSS کرد و در سال 2008 و در هشتمین نسخه خود، توانست به طور کامل CSS 2 را پشتیبانی کند. امروزه اکثر مرورگرها از CSS پشتیبانی می‌کنند، اما هنوز هم ممکن است توسعه ی نسخه‌های CSS، مشکلاتی به همراه داشته باشد.

جمع بندی

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

اگر می‌خواهید طراحی سایت را یاد بگیرید بهتر است مقالات زیر را مطالعه کنید

مراحل شروع یادگیری طراحی سایت  HTML چیست و چه کاربردی دارد؟ جاوا اسکریپت چیست؟ پیش نیازهای آموزش جاوا اسکریپت