زبان css در یک نگاه

یکی از لایه‌های طراحی وب‌ سایت بعد از html که باید یاد بگیریم لایه CSS است که در این پست می‌خواهیم با هم یک مرور سریع و کوتاهی بر این سؤال که CSS چیست و به چه دردی می خوره رو داشته باشیم. پس با ما همراه باشید.زبان css چیست ؟سی‌ اس‌ اس مخفف عبارت Cascading Style Sheet است. CSS یک زبان style نویسی (Style Sheet Language) است که از آن به‌عنوان ابزاری کمکی برای بهبود و زیباسازی صفحات وب استفاده میشه؛ مثلاً می‌تونیم تمامی خصوصیات ظاهری صفحه وب‌ سایت مانند رنگ، فونت، تصاویر پس‌زمینه، ترازبندی عناصر و ... را به‌صورت دلخواه تنظیم کنیم. یعنی توسط CSS می‌توانیم تعیین کنیم که عناصر موجود در صفحه وب به چه صورتی برای کاربر در مرورگر نمایش داده شوند.تاریخچه CSS :زمانی که زبان سی‌اس‌اس (CSS) وجود نداشت ، هر مرورگری قواعد مخصوص به خود رو برای نمایش تگ‌های اچ تی ام ال داشت. پس صفحات وب در مرورگرهای مختلف با ظاهری متفاوت نمایش داده می‌شدند.Mosaic browserدر سال ۱۹۹۳ میلادی، یکی از اولین مرورگرهای وب یعنی موزاییک (Mosaic) منتشر شد. این مرورگر به‌ خاطر ویژگی‌هایی که داشت به یکی از مرورگرهای غالب آن زمان تبدیل شد. این مرورگر دارای زبان استایل نویسی ای بود که این قابلیت رو برای کاربران فراهم می‌کرد که بتوانند رنگ‌های محدودی را در وب‌ سایت تغییر بدهند. در این‌ بین Hakon Wium Lie همراه با Dave Ragget، زبان CHSS را برای مرورگر Arena و Bret Bos زبان SSP را برای مرورگر Argo ارائه کردند. در نهایت در سال 1996 ، نسخه اولیه زبان CSS با همکاری Hakon Wium Lie و Tim Berners-Lee به‌ صورت رسمی معرفی شد تا مشکلاتی که طراحان وب در آن زمان با HTML3.2 داشتند را برطرف کند. CSS راه حلی بود که اکثر کاربران HTMLدر آن زمان به دنبال آن بودند. هنگامی که CSS منتشر شد، کاربران می‌توانستند از HTML 4.01 و CSSبا هم برای ساخت صفحات وب از آن استفاده کنند. ایده پشت سی اس اس این بود که ارائه (presentation) و محتوا (content) را از هم جدا کند. مزیت این روش این است که به‌روزرسانی‌ها و تغییرات در ارائه فقط یک‌بار (در کدهای CSS) اعمال می‌شوند تا بر همه صفحات تأثیر بگذارد. ورژن‌های مختلف CSS :ورژن CSS 1 :اولین نسخه از CSS در سال 1996 همراه با پراپرتی‌های مربوط به فونت، توانایی تغییر رنگ عناصر و بک‌گراند آن‌ها و وجود مفاهیمی چون margin و padding عرضه شد. اما در حال حاضر، این نسخه قدیمی است و توسط W3C پشتیبانی نمی‌شود. ورژن CSS 2 :این نسخه در سال ۱۹۹۸ عرضه شد. دارای و ویژگی‌ها و قابلیت‌های بیشتری نسبت به ورژن قبلی خود بود. در این نسخه کاربران می‌توانستند از ویژگی‌هایی مانند موقعیت‌های relative، absolute، fixed و مفهوم z-index استفاده کنند. ورژن CSS 2.1 :در این نسخه یک سری از باگ‌ها و کمبودهای CSS 2 برطرف شد.ورژن CSS 3 :آخرین نسخه از CSS که توسط w3c در سال 1999 ارائه شد. که در چندین ماژول تقسیم‌بندی‌ شده است که باعث می‌شود کارکردن با این نسخه از CSS آسان‌تر شود.ورژن CSS 4 :در واقع فعلاً استانداردی به نام CSS 4 وجود ندارد؛ زیرا توسعه دهندگان به توسعه و بهبود هرکدام از ماژول‌های موجود در نسخه سه می‌پردازند. و به صورت مداوم آن را بهبود و توسعه میدهند.قواعد نوشتاری زبان CSS :هر زبان برنامه‌نویسی دارای یک سری قواعد و اصولی برای نوشتن است که اگر رعایت نشوند باعث بروز خطا می‌شود که زبان برنامه‌نویسی CSS هم از این قاعده مستثنی نیست و دارای قواعد مخصوص به خود است. در css ساختار کد ها از دو قسمت Selector و Declaration تشکیل شده است.بخش Selectorدر بخش selector که به معنی انتخاب‌کننده است. و وظیفه آن انتخاب عنصر یا عناصری است که می‌خواهیم دستورات CSS را روی آن‌ها اعمال کنیم.بخش Declarationبا استفاده از این بخش که در بین {…} قرار می‌گیرد، می‎‌توانیم مشخص کنیم چه استایلی روی تگ‌های انتخاب شده اعمال گردد. این بخش از دو قسمت “property” و “value” تشکیل شده است و همیشه با یک سیمی کالن “;” به پایان می‌رسد که باید مشخص کنیم عنصر انتخاب شده چه ویژگی و چه مقداری داشته باشد.حساسیت به حروف بزرگ و کوچک در CSSنام ویژگی‌های CSS و بسیاری از مقادیر به بزرگی یا کوچکی حروف حساس نیستند. اما برای انتخاب‌گرهای CSS این‌ گونه نیست. به‌ عنوان‌ مثال ، انتخاب‌گر کلاس btn. با BTN. یکسان نیست.