آشنایی با زبان برنامه نویسی CSS

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

یکی از خصوصیات بارز در CSS، این است که امکان جداسازی محتوای یک سایت از شکل نمایش آن را ممکن می سازد. این جداسازی باعث کاهش پیچیدگی و تکرار در مورد اضافه کردن اطلاعات سبک دار در محتوای ساختاری سایت می گردد. به علاوه، این جداسازی باعث می شود نمایش یک وب سایت، ساده تر شود چون کل نمای وب سایت را می توان تنها با یک برگه سبک آبشاری تحت کنترل درآورد.

امروزه CSS به عنوان یکی از زبان های اصلی وب نویسی، تقریباً توسط تمام وب سایت های مورد استفاده قرار می گیرد و در واقع توانسته انقلابی در شبکه جهانی وب ایجاد و هر کسی که با طراحی وب سر و کار دارد، حتماً باید آن را بیاموزد. یادگیری و استفاده از زبان CSS هم مثل HTML بسیار راحت و ساده می باشد.

نسخه های CSS

کنسرسیوم شبکه جهانی وب (W3C) که سازمان استانداردهای بین المللی برای اینترنت می باشد به صورت مستمر در حال توسعه و ارتقای زبان CSS است. W3C، مشخصاتی که مرورگرهای وب برای نمایش صفحات وب اجرا می کنند را تعیین و تنظیم می کند. مشخصات جدید، زبان CSS را با اضافه کردن ویژگی های جدید و در عین حال، حفظ سازگاری با استخوان بندی قدیمی، بسط می دهد.

نخستین مشخصات CSS به نام CSS 1 در سال 1996 توسط W3C معرفی شد. در سال 1998 نسخه CSS 2 به بازار عرضه شد که خصوصیات جدیدی را به CSS 1 اضافه کرد. البته با توجه به اینکه بیشتر مرورگرهای وب اصلی، خصوصیات هر دوی این مشخصات را اجرا می کنند بندرت نیاز پیدا است که بین این دو نسخه تمایز قائل شویم.

W3C از سال 1998 روی CSS 3 کار می کند که برخلاف نسخه های قبلی، به شکل قابل توجهی بزرگتر است و در نتیجه به چندین بخش مجزا که ماژول نامیده می شوند تقسیم شده که هر کدام از آنها می توانند جداگانه بسط یافته و تکمیل شوند. در نتیجه توسعه و تکمیل روز افزون، میزان پشتیبانی از CSS 3 توسط مرورگرها نیز تغییر کرد. بعضی از ویژگی های آن، ثابت هستند و مورد پشتیبانی بیشتر مرورگرها قرار می گیرند اما سایر ویژگی ها تنها توسط آخرین نسخه های مرورگرها پشتیبانی می شوند و یا اصلاً مورد استفاده قرار نمی گیرند.

ساختار کدنویسی

CSS معمولاً در یک سند برگه سبک دار که شامل فهرستی از قوانین است بکار گرفته می شود. برای مثال، قانون به رنگ قرمز در آوردن تمام عناصر پاراگرافی به صورت زیر نوشته می شود:

p { color: red; }

این قانون دارای دو قسمت است: یک انتخابگر و یک بلوک اعلان.

• انتخابگر، بین سند HTML و برگه سبک داری که مشخص می کند قانون روی کدام عنصر صفحه اعمال شود، پیوندی ایجاد می کند. در کد فوق، انتخابگر از نوع p است که در واقع روی تمام عناصر پاراگرافی (<p>) اعمال می شود. به این ترتیب می توان هر عنصر HTML را به عنوان یک انتخابگر نوع به کار گرفت.
• بلوک اعلان که در بین دو کاراکتر آکولاد ({}) نوشته می شود، سبک اعمال شده روی عناصر انتخاب شده را تعریف می کند. هر بلوک می تواند شامل یک یا چند اعلان باشد که هر کدام از آنها از یک خصوصیت سبک که پس از آن، یک کاراکتر دو نقطه (:) و سپس مقدار مربوط به آن خصوصیت درج شده، تشکیل شده اند. در ضمن پس از هر اعلان باید یک کاراکتر نقطه ویرگول (;) نوشته شود که البته این امر در مورد اعلان آخر، اجباری نمی باشد.

p { color: red; background: black }

اگرچه درج آخرین کاراکتر نقطه ویرگول اجباری نیست، اما بهتر است آن را هم در کد مربوط بنویسید تا دچار فراموشی و سهل انگاری در مورد درج نقطه ویرگول های اجباری نشوید. همچنین اگرچه انتخابگرها و خصوصیات نسبت به بزرگ و کوچک بود حروف نام شان حساسیت ندارند، اما بهتر است در زمان نوشتن کد CSS، از حروف کوچک استفاده شود.

به شکل خلاصه می توان گفت که یک قانون سبک شامل یک انتخابگر و یک یا چند اعلان است که هر کدام از آنها، شامل یک یا چند جفت خصوصیت – مقدار می باشد.

منابع

مقاله علمی و آموزشی «آشنایی با زبان برنامه نویسی CSS»، نتیجه ی تحقیق و پژوهش، گردآوری، ترجمه و نگارش هیئت تحریریه علمی پورتال یو سی (شما می توانید) می باشد.