سی اس اس – شیوه‌نامه‌ آبشاری – CSS – Cascading Style Sheet

سی‌اس‌اس CSS یا شیوه‌نامه‌ آبشاری Cascading Style Sheet چیست؟

سی‌اس‌اس (CSS) یا شیوه‌نامه‌ آبشاری (Cascading Style Sheet)، یک زبان طراحی استایل است که به منظور تعیین و توصیف ظاهر و نحوه‌ی نمایش یک سندِ نوشته شده با زبان‌های نشانه‌گذاری به کار می‌رود.

معمولا از CSS برای تعیین ظاهر و جلوه‌ی صفحات وب (فونت متون، رنگ و میزان حاشیه المان‌ها و …) استفاده می‌شود. با اینحال می‌توان از این زبان برای هر نوع سند XML (از جمله SVG و XUL) نیز استفاده نمود. CSS در کنار HTML و JavaScript از جمله زبان‌های اصلی در دنیای امروزی وب به شمار می‌رود که در اکثر وبسایت‌ها برای ایجاد صفحات جذاب و زیبا به کار می‌رود. علاوه بر این در طراحی واسط کاربری اپلیکیشن‌های وب و حتی بسیاری از اپلیکیشن‌های موبایلی، CSS یک راه حل مناسب به شمار می‌رود.

شیوه‌نامه‌ آبشاری می‌تواند برای هر نوع المان HTML (نظیر پیوندهای موجود در صفحات وب و یا سطوح مختلف هدینگ‌ها)، ظاهر و فرمتی اختصاصی تعیین کند. به عنوان مثال می‌توان رنگ لینک‌های موجود در نوار کناری یک وبسایت را از رنگ لینک‌های موجود در منوها یا محتوای میانی صفحات متمایز نمود.

ساختار CSS و نحوه استفاده از آن

هر شیوه‌نامه (یا استایل شیت) سی‌اس‌اس شامل مجموعه‌ای از قوانین (Rule ها) می‌باشد. هر قانون نیز دارای یک یا چند گزینشگر (Selector) است که مشخص می‌کند می‌خواهید چه المان یا المان‌هایی را استایل‌بندی کنید. در هر قانون بخش دیگری به نام Declaration نیز وجود دارد که در میان آکولاد قرار گرفته و برای تعیین ویژگی‌های استایل، مورد استفاده قرار می‌گیرد. این بخش شامل جفت‌هایی به صورت “مقدار:نام ویژگی” می‌باشد که با استفاده از سمی کلن (یا ;) از یکدیگر جدا می‌شوند.

به عنوان مثال در نمونه‌ی زیر که برای استایل‌بندی یک صفحه وب نوشته شده است، تمامی المان‌های p با اندازه فونت 12 پیکسل و رنگ آبی به نمایش در می‌آیند:

p {
     color: blue;
     font-size: 12px;
 }

بیشتر بخوانید: قواعد نحوی CSS – قانون، گزینشگر، اظهاریه و ویژگی در سی‌اس‌اس

به سه روش متفاوت می‌توان با استفاده از سی اس اس نحوه فرمت بندی المان‌های HTML را تعیین نمود:

• اینلاین یا درجا (Inline): در این شیوه با کمک خصوصیتی به نام Style، می‌توانیم به یک المان معین HTML، استایل منحصربفردی را اختصاص دهیم. در این حالت مطابق نمونه زیر تنها کافی است جفت “مقدار:نام ویژگی” ذکر شود:

<h1 style="color: green;"> My Heading Title </h1>

• داخلی (Internal): در این روش، می‌توان با استفاده از تگ Style در بخش head، المان‌های مختلف موجود در یک صفحه‌ی HTML را استایل بندی نمود.
• خارجی (External): در این روش، محتوای سند HTML از نحوه‌ی نمایش آن مجزا می‌شود. به عبارت بهتر با قرار دادن استایل در یک فایل جداگانه با پسوند css و سپس متصل کردن آن به صفحات HTML، می‌توان ظاهر چندین صفحه را همسان‌سازی و کنترل نمود. ممکن است برای یک صفحه وب یا وبسایت از چند استایل شیت مختلف در قالب فایل های مجزا استفاده شود.

بیشتر بخوانید: روش های اضافه کردن CSS به HTML

مزایای سی‌اس‌اس

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

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

مفهوم واژه آبشاری در سی اس اس

واژه آبشاری (Cascading) در عنوان این زبان با اولویت های اعمال استایل روی المان ها در ارتباط است. به عبارت بهتر اگر مقدار یک ویژگی در چند قانون با توجه به گزینشگرها برای یک المان مشخص شده باشد مقداری که در استایل شیت (یا منشأ) دارای اولویت بیشتر باشد روی المان اعمال می‌شود. در صورتی که مقدار ویژگی در استایل شیت دارای اولویت بالاتر موجود نباشد به منشأ دارای اولویت پایین‌تر مراجعه می‌شود. پایین‌ترین سطح اولویت مربوط به استایل‌های پیشفرضی است که توسط مرورگر مشخص می‌شود (User agent style).

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

سطوح مختلف CSS

اولین مستندات رسمی سی اس اس با عنوان CSS level 1 (به اختصار CSS 1)، در سال 1996 توسط کنسرسیوم وب جهان گستر (W3C) منتشر شد که از قابلیت‌هایی چون تعیین خواص فونت، رنگ متن، بک گراند، خصوصیات متون نظیر فاصله‌ی بین خطوط و اندازه‌ی متن، تراز متن و تصویر، حاشیه، قاب و … پشتیبانی می‌کرد. CSS 2 و CSS 3 نیز با افزودن قابلیت‌هایی نظیر سایه‌دهی متن، z-order، تعیین موقعیت ثابت، نسبی و مطلق، قابلیت متحرک سازی و … به تکمیل سطح اول پرداختند.