css چیست و چه کاربرد هایی دارد؟
زمان تخمینی مطالعه:‌ 10 دقیقه

css چیست؟

به معنی «برگه‌های سبک آبشار» یا «برگه‌های آبشاری» است. آبشاری بودن برگه‌های CSS به این معنی است که استایل، کلاس یا هر چیزی که به آن برگه داده شود، روی عناصر فرزند (Children) این برگه‌ها هم تاثیرگذار خواهد بود. به عنوان مثال اگر شما رنگ متن را در یک برگه CSS قرمز تعیین کنید، این به معنای قرمز بودن تمام سرنویس‌ها (هدینگ) و پاراگراف‌های متنی است که قرار است در این برگه( توسط HTML ) نوشته شود.

بررسی تخصصی css

به تعبیر تخصصی‌تر، CSS یک زبان برنامه نویسی ظاهری (Style Sheet Language) است که برای ارائه زیباتر و قابل فهم‌تر یک سند (Document) نوشته شده به زبان نشانه گذاری یاMarkup Language به کار برده می‌شود.

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

برگه‌های سی اس اس در واقع مسئولیت ایجاد ظاهر سایت را به عهده دارند و رنگ، اندازه و محل قرارگیری متن و دیگر تگ‌های HTML را تعیین می‌کنند. مسئولیت برگه‌های HTML با همکاری فیلدهای HTML کامل می‌شود. در واقع این فیلدهای HTML هستند که تعیین می‌کنند محتوای کدها چیست و هر کدام باید چگونه سازماندهی شوند.

علت ایجاد شدن

هنگامی که در سال ۱۹۹۶ زبان CSS به دنیا معرفی شد، هدف از آن ایجاد بخش بندی و ارائه بهتر محتوای موجود در یک صفحه وب بیان شد. CSS این کار را با عواملی مثل لایه بندی، رنگ و فونت به انجام می‌رساند. استفاده از برگه‌های CSS موجب می‌شود که شما بتوانید از یک محتوای ایجاد شده با زبان نشانه گذاری، در چند جای مختلف استفاده کنید. در واقع هنگامی که قدرت آن را در اختیار داشته باشید، می‌توانید یک سند نوشته شده به زبان نشانه گذاری مثل HTML‌ را، تنها با تغییر چند خط در هر برگه برای استفاده در مقاصد مختلف به کار ببرید و دیگر لازم نیست سراغ تغییر دادن محتوای سند HTML بروید.

تاریخچه

CSS هم مانند HTML برای اولین بار در مجموعه CERN متولد شد. اولین بار در تاریخ ۱۰ اکتبر سال ۱۹۹۴ بود که Hakon Wium Lie با همکاری «تیم برنرز لی» بحث CSS را وسط کشیدند. در همین زمان‌ها بود که چندین و چند زبان Style Sheet دیگر توسط افراد دیگر معرفی شدند و بحث‌های مختلفی که بین عموم افراد و همچنین در «کنسرسیوم وب جهان گستر» اتفاق افتاد، باعث شد تا در نهایت در سال ۱۹۹۶، زبان CSS به صورت رسمی معرفی شود.

برتری سی اس اس نسبت به دیگر زبان‌های Style Sheet این بود که، شما می‌توانید با استایل یا ظاهر یک داکیومنت را با چندین برگه CSS‌طراحی کرده و تحت تاثیر قرار بدهید. بنابراین، CSS توانست تمام رقبا را کنار بزند و خود را در جایگاه زبان برتر استایل در کنار HTML قرار بدهد.

داستان پذیرفته شدن CSS توسط مرورگرها

هنگامی که CSS 1 در سال ۱۹۹۶ معرفی شد، مایکروسافت هم نسخه ۳ از اینترنت اکسپلورر را معرفی کرد. این مرورگر در آن زمان از تعداد کمی از ویژگی‌های آن پشتیبانی می‌شد. پس از آن اینترنت اکسپلورر ۴ و Netscape 4.x معرفی شدند که قابلیت‌های بیشتری را پشتیبانی می‌کردند؛ اما تداخل CSS با این مرورگرها اصلا مناسب نبود و باگ‌های بسیار زیادی داشت.

در نهایت انقلاب مرورگرها اتفاق افتاد و اینترنت اکسپلورر ۵ با پشتیبانی از سیستم عامل مکینتاش در سال ۲۰۰۰ معرفی شد. این مرورگر با کنار زدن مرورگر Opera که تا آن زمان بیشترین پشتیبانی از CSS 1 را داشت، توانست جایگاه مقتدرانه‌ای برای خود به دست بیاورد و بیش از ۹۹٪ از قابلیت‌های CSS در آن اجرا می‌شدند.

همانطور که می‌دانید امروزه مرورگرهای پیشرفته‌ای مثل گوگل کروم یا فایرفاکس به بازار عرضه شده‌اند که از تمام قابلیت‌های CSS‌ پشتیبانی می‌کنند و کار طراحی سایت راحت‌تر از قبل انجام می‌شود.

نسخه‌های مختلف

CSS نسخه‌های مختلفی دارد که به آن‌ها Level گفته می‌شود، هر کدام از این نسخه‌ها هم به تنهایی دارای نسخه‌های تکمیلی دیگر هستند که به آن‌ها Profile گفته می‌شود. طبیعتا هر نسخه CSS بر اساس نسخه دیگر توسعه پیدا کرده و در نسخه‌های جدید قابلیت‌های جدیدتری اضافه شده است. هر Profile در CSS هم برای توسعه این زبان Style Sheet به یک دستگاه یا منظور خاص طراحی شده است.

CSS 1

اولین نسخه که توسط W3C به صورت رسمی به توسعه دهندگان وب پیشنهاد شد، CSS 1 بود. این نسخه در تاریخ ۱۷ دسامبر سال ۱۹۹۶ به صورت رسمی در دسترس افراد قرار گرفت. فهرست زیر بازرترین ویژگی‌های این level هستند:

• امکانات مختلف برای فونت، مثل ایجاد سبک و تاکید
• تخصیص رنگ، پس زمینه و عناصر دیگر به متن
• تنظیم (Alignment) متن، تصاویر، جدول‌ها و دیگر عنصر صفحه وب
• ایجاد حاشیه (Margin)، مرزبندی (Border)، لایه گذاری (Padding) و جای گذاری اکثر اجزا صفحه
• شناسایی متمایز و کلاس‌بندی عمومی گروهی از ویژگی‌ها (attributes)

در حال حاضر W3C دیگر CSS 1 را پیشنهاد نمی‌کند.

CSS 2

این نسخه یا Level  هم که دیگر از سوی W3C پیشنهاد نمی‌شود، شباهت‌های زیادی به نسخه اولیه داشت و در ماه مه سال ۱۹۹۸ معرفی شد. در این نسخه قابلیت‌های جدیدی مثل جایگذاری مطلق (Absolute)، وابسته (Relative) و  ثابت (Fixed) در نظر گرفته شده بود. در این نسخه همچنین امکاناتی مانند ایجاد درک و شناخت انواع مختلف فایل (Media) و قابلیت‌های جدید برای طراحی متن ایجاد شده بود.

مدتی بعد level 2.1 به عنوان اصلاحیه‌ای از CSS 2 معرفی شد که پس از کش و قوس‌های فراوان بالاخره در سال ۲۰۱۱ به عنوان پیشنهاد W3C تاییدیه گرفت. این نسخه قرار بود آخرین اصلاحیه از CSS 2 باشد اما در سال ۲۰۱۵ اصلاحیه  2.2 هم در دستور کار قرار گرفت.

CSS 3

می‌توان گفت که CSS 3 یک تحول بزرگ در تاریخچه CSS به همراه داشت. در این نسخه اسناد (Document) زیادی به وجود آمدن که به هر کدام از آن‌ها Module گفته می‌شد. در واقع level 2 یک مانند یک ویژگی بزرگ بود که تمام امکانات CSS را در بر می‌گرفت، اما در CSS 3 ماژول‌ها هستند که قابلیت‌ها و امکانات جدید را اضافه می‌کنند.

اولین بار در  ماه ژوئن سال ۱۹۹۹ بود که نسخه CSS 3 منتشر شد و در دسترس قرار گرفت. اما از آنجایی که این level بر پایه  ماژول‌ها بود، تا ژوئن ۲۰۱۲ بیش از پنجاه ماژول CSS شامل Media Queries، Namespace، Selector Level و Color از جانب تیمی که روی این زبان کار می‌کرد، منتشر شدند.

CSS 4

در واقع هیچ نسخه‌ای از ویژگی‌های متحد شده CSS 4 وجود ندارد، زیرا این Level از سی اس اس به ماژول‌های مختلف Level 4 تقسیم شده است.

بعد از level 3 و با ورود مبحث Module به این زبان، دیگر توجیهی برای توسعه یکباره نسخه جدید CSS وجود نداشت. بنابراین، از نسخه CSS 4 به بعد دیگر ماژول‌های Level 4 هر کدام به صورت جداگانه توسعه پیدا کردند و چیزی به نام CSS 4 به صورت یکپارچه معرفی و پیشنهاد نشد. در واقع در این نسخه یا Level از CSS، بسیاری از ماژول‌ها همان ماژول‌های Level 3 بودند که از level 2.1 توسعه پیدا کرده بودند. در این میان تعدادی ماژول هم به عنوان ماژول‌های Level 4 توسعه پیدا کردند. از ماژول‌های Level 4 در CSS 4 می‌توان به Image Values، مرزبندی و پس زمینه (Background & Borders) و Selector اشاره کرد.

کاربرد

همانطور که در پاراگراف‌های ابتدایی مقاله اشاره کردیم، CSS به عنوان یک Style Sheet Languge، به وجود آمد تا کار طراح سایت را برای ایجاد فرمت ظاهری زیباتر، راحت‌تر کند. اگر با طراحی سایت آشنا باشید، می‌دانید که برای Style دادن به یک صفحه وب ۳ راه مختلف وجود دارد.

1. ایجاد استایل با فایل CSS
2. ایجاد استایل در HTML Header
3. استفاده از inline style

ایجاد استایل با فایل css

برنامه هایی مثل notepad، DreamWeaver، Visual Studio و هر برنامه ای که با آن احساس راحتی بیشتری دارید برای نوشتن این کدها قابل استفاده هستند. فراموش نکنید فایل های سی اس اس فقط حاوی دستورات CSS هستند و هیچ کد و تگی از HTML در آنها نباید نوشته شود.

یک نمونه کد که میتوانید آن را در یک notepadنوشته و با فرمت cssذخیره کنید .

ایجاد استایل در HTML Header

یک استایل داخلی زمانی باید استفاده شود که معمولا  استایل به یک تگ html وصل است اما بهتر است که همین استایل ها را نیز مانند استایل های داخلی به کار ببریم  چون کاربر با چند کلیک و رفتن به صفحات دیگر ،  نیازی نیست این استایل ها را دوباره دانلود کند.

نحوه نوشتن این استایل ها مانند استایل خارجی می باشد ولی تنها فرق آن این است که به جای تگ <link> از تگ <style> استفاده می کنیم.

کد زیر یک نمونه از استایل خارجی می باشد .

استایل ها یا شیوه نامه های چندگانه

محدودیت‌های

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

مثلا نمی‌توان برای rules اسم تعیین کرد. تعیین اسم برای یک rule‌، به عنوان مثال، می‌تواند برای ارجاع دادن یک اسکریپت سمت کاربر (Clien-side) به یک rule هنگام تغییر selector آن، کارآمد باشد. همچنین محدودیت‌های دیگری مثل عدم توانایی انتقال Style‌ از یک rule به rule دیگر و چند مورد دیگر از محدودیت در CSS وجود دارد که ممکن است مانند محدودیت‌هایی که در نسخه‌های پیشین CSS وجود داشتند، در آینده حل شوند.

مزایا

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

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

اگر دوست دارید طراح سایت شوید و پا به این دنیای ناشناخته و وسیع بگذارید، آموزش HTML و CSS قدم‌های ابتدایی شما است. در ادامه راه آشنایی با زبان‌ها و فریم ورک‌های مختلف طراحی سایت می‌تواند شما را برای ورود حرفه‌ای به دنیای طراحی وب آماده کند.