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

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

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

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

مزایای CSS

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

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

معایب CSS چیست؟

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

• ناتوانی در انتخاب والد در CSS نمی‌توان برای هر عنصر، گزینه بالاتر یا والد را انتخاب کرد. دلیل اصلی آن، بهبود کارایی در نمایش صفحات وب در مرورگرهای مختلف است.
• ناتوانی در نام گذاری نقش‌ها در زمان ارجاع script‌های بخش کاربر و تغییر Selectorها
• تفاوت کارکرد CSS در مرورگرهای مختلف که ممکن است مشکلاتی برای برنامه نویسان ایجاد کند.
• دسترسی برای ایجاد هرگونه تغییر به علت متن باز بودن CSS می‌تواند برنامه نویسان را در دام تغییرات ناخواسته ای بیندازد که ممکن است روی ظاهر کل سایت تاثیر بگذارند.

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

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

سازگار کردن صفحات وب‌سایت‌ها همان Responsive یا واکنشگرا کردن است. به عبارت دیگر یعنی بتوانید صفحات وب سایت را در رزولوشن‌های مختلفی مشاهده کنید، بدون اینکه صفحه مورد نظر با اختلالی رو به رو شود. پیاده سازی این قابلیت با فریم ورک هایی که برای 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 که بسیار کاربردی هستند.

تمام، پیشنهاد می کنم حتما مقاله های دیگر ما را هم بخوانید تا به صورت کامل با HTML, Css, Java آشنا شوید.

• آشنایی با HTML

• آشنایی با Javascript