بایگانی برچسب‌ها : css structure

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

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

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

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

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

ساختار CSS

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

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

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

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

  • اینلاین یا درجا (Inline): در این شیوه با کمک خصوصیتی به نام Style، می‌توانیم به یک المان معین HTML، استایل منحصربفردی را اختصاص دهیم. در این حالت مطابق نمونه زیر تنها کافی است جفت “مقدار:نام ویژگی” ذکر شود:
<h1 style="color: green;"> My Heading Title </h1>
  • داخلی (Internal): در این روش، می‌توان با استفاده از تگ Style در بخش head، المان‌های مختلف موجود در یک صفحه‌ی HTML را استایل بندی نمود.
  • خارجی (External): در این روش، محتوای سند HTML از نحوه‌ی نمایش آن مجزا می‌شود. به عبارت بهتر با قرار دادن استایل در یک فایل جداگانه با پسوند css و سپس متصل کردن آن به صفحات HTML، می‌توان ظاهر چندین صفحه را همسان‌سازی و کنترل نمود.

مزایای CSS

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

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

سطوح مختلف CSS

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

نمونه ای از قوانین CSS برای تعیین ظاهر یک صفحه وب
نمونه ای از قوانین سی اس اس برای تعیین ظاهر یک صفحه وب