CSS چیست ؟ | آشنایی کامل با زبان سی اس اس

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 دست و پنجه نرم کنند. آن ها می بایست این تغییرات را در تک تک صفحه های مورد نظر و بر روی تک به تک اجزای آن اعمال می کردند. این عوامل طراحی سایت را با صرف زمان و سختی های زیادی همراه ساخته بود.

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

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

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

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

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

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

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

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

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

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

• روش inline style : استفاده از این روش می‌توانید کدهای css را در میان تگ های html تعریف کنید. این روش معمولا توصیه نمی شود، زیرا به مرور زمان و با بزرگ تر شدن پروژه، این کدها بسیار نامرتب می‌شوند و در آینده باعث سردرگمی خواهند شد. برای مثال :
   

  1	<p style=”background-color:red;color:white;”></p>

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

  1 2 3 4 5 6

  <style>     P {         Background-color:red;         Color:white;     } </style>

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

  1 2 3

  <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 کمک می‌کند.