CSS چیست و چه کاربردی دارد؟

زبان CSS چیست؟

در ابتدای مسیر شما باید بدانید که CSS مخفف چه کلماتی است؟ CSS مخفف Cascading Style Sheet (CSS) است. زبان CSS یک زبان طراحی صفحات وب است که برنامه‌نویسان از آن برای ایجاد و طراحی ویژگی‌های ظاهری وب‌سایت، استفاده می‌کنند. CSS جز مهم‌ترین اصطلاحات طراحی سایت است که دانستن آن برای طراحی وب‌سایت کمک زیادی به افراد می‌کند. از CSS می‌توان به‌عنوان رایج‌ترین و محبوب‌ترین ابزار طراحی صفحات وب نوشته شده، توسط زبان HTML و XHTML یادکرد و همچنین قابلیت پشتیبانی از سایر زبان‌های اسکریپت مانند plain XML، SVG و XUL دارد.

امکان تغییر استایل سایت مانند رنگ، فونت، تصاویر پس‌زمینه و … در کدنویسی با استفاده از CSS وجود دارد و طراح وب می‌تواند این ویژگی‌ها را به‌صورت دلخواه و باب میل کارفرما تغییر دهد.

هدف و کاربرد CSS چیست ؟

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

در اینجا برخی از کاربردهای CSS ذکر شده است که عبارت‌اند از:

• تعیین طول و عرض.
• طراحی ریسپانسیو صفحات وب.
• انتخاب و تعیین پس‌زمینه.
• انتخاب محل جای‌گذاری عناصری مانند متن یا عکس و…
• تعیین میزان فاصلهٔ عناصر از یکدیگر.
• تغییر در نوع نوشتاری (چپ‌چین، راست‌چین، فونت، رنگ و…)

در ادامهٔ مقاله با ساختار کدهای CSS آشنا خواهید شد.

ساختار کدهای CSS

ساختار کلی یک کد در CSS متشکل از دو بخش است:

1. انتخاب‌کننده (Selector)
2. اعلان (Declaration)

Selector

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

انتخاب‌کننده‌های CSS را می‌توان به چند دسته تقسیم کرد:

انتخاب‌کننده عنصر:

با استفاده از این انتخاب‌کننده، می‌توانید تگ خاصی را انتخاب و تغییرات استایل را بر روی آن اعمال کنید به طور مثال می‌توان تگ‌ <p> در یک صفحه وب را انتخاب کرد و رنگ آن را به آبی تغییر داد.

انتخاب‌کننده ID :

زمانی که قصد داشته باشید استایل‌های CSS را بر روی گروهی از تگ‌ها تعریف کنید، در این زمان باید از انتخاب‌کننده ID استفاده کنید. این کار به‌وسیله تعریف یک ID برای تگ موردنظر در کدهای HTML انجام خواهد شد و پس از آن در قسمت CSS آی‌دی مربوطه را انتخاب و اعمال تغییرات را بر روی آن انجام می‌دهیم.
در این صورت دستورات و فرمان‌ها تنها بر روی یک ID خاص که با به‌وسیله علامت # در ابتدای آن مشخص می‌گردد، اعمال می‌شود.

انتخاب‌کننده Class :

زمانی است که شما قصد دارید برخی از تگ‌ها ظاهری یکسان داشته باشند. در این زمان بایستی تمامی تگ‌های انتخابی را داخل یک کلاس تعریف کنید و مانند انتخاب ID به بخش CSS برگشته و حالت و همچنین استایل موردنظر را روی آن کلاس تعریف کنید. صفت کلاس با “ .“ در ابتدای آن قابل تشخیص است.

Declaration

این بخش که در بین {…} قرار می‌گیرد با استفاده از آن می‎‌توانید تعیین کنید که چه استایلی روی تگ‌های انتخابی اعمال شود. این قسمت متشکل از دو بخش “ویژگی” و “مقدار” است که باید مشخص کنید عنصر انتخاب شده چه ویژگی و چه مقداری داشته باشد. برای مثال مشخص کنید تگ g3 به رنگ بنفش و سایز فونت برابر 12 پیکسل باشد.

نحوه عملکرد CSS چگونه است؟

اگر بخواهیم به زبان ساده توضیح دهیم، می‌توانید عملکرد زبان CSS  را مانند آبشار در نظر بگیرید. به این‌گونه که کدهای نوشته شده با CSS به‌صورت پیش‌فرض از بالابه‌پایین و به ترتیب پردازش و اجرا می‌شوند. CSS این قابلیت را در اختیار شما قرار می‌دهد که با ایجاد یک فایل خارجی (Style Sheet) ویژگی‌های اجزای مختلف را در صفحات وب‌سایت تعیین کنید. یعنی تغییراتی که شما به کمک CSS در یک صفحه وب ایجاد می‌کنید، روی اجزای زیرمجموعهٔ آن هم تأثیر می‌گذارند. به‌عنوان‌مثال اگر شما رنگ متن یک صفحه را تغییر دهید، تمامی زیر متن‌ها مانند پاراگراف‌ها و سرخط‌ها نیز آن رنگ را خواهند داشت.

stylesheet  چیست؟

stylesheet به مجموعه‌ای از قوانین و کدهای CSS  گفته می‌شود که نحوهٔ چگونگی نمایش Tag HTML را برای مرورگر مشخص می‌کند.

فایل CSS چیست؟

با ایجاد فایل CSS ، CSS این امکان را به شما می‌دهد تا حالت نمایش صفحه موردنظر خود را در چندین مدل مختلف Rendering (تفسیر) کنید. مانند حالت نمایش بر روی مانیتور، حالت نمایش در هنگام چاپ، در زمان حالت شناسایی صدا (برای مرورگرهای مبتنی بر قابلیت شناسایی صدا) و همچنین برای نمایش در صفحات مرورگر موبایل، بتوانید به‌درستی تنظیم نمایید.

اضافه‌کردن CSS به HTML

برای اتصال فایل CSS به فایل HTML می‌توان از سه روش زیر استفاده کرد :

• External CSS
• Internal CSS
• Inline CSS

External CSS

یکی از پرکاربردترین روش‌های استفاده از CSS، روش External CSS  است که به‌وسیلهٔ آن می‌توانید با تغییر یک فایلی که از قبل طراحی شده است، بتوانید ویژگی‌های ظاهر یک سایت را تغییر دهید. ابتدا بایستی کدهای CSS را در یک فایل notepad به شکل مجزا نوشته و با پسوند .css ذخیره کنید. سپس باید این فایل را با دستورات HTML به فایل اصلی متصل کنید. برای این کار می‌توانید داخل تگ <link> در قسمت <head> فایلی که از قبل طراحی کرده‌اید را معرفی کنید.

Internal CSS

زمانی که نیاز است یک صفحه از سایت، استایل مشخصی داشته باشد از Internal CSS استفاده می‌شود. به این صورت که در قسمت <head> در تگ <style> و همچنین در هر بخشی که نیاز به تغییر دارد، تغییرات را بر روی آن اعمال می‌کنید.

Inline CSS

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

آشنایی با انواع CSS

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

زبان CSS 1

اولین نسخه  CSS که توسط مؤسسه استانداردسازی W3C تأییدیه گرفت، در دسامبر سال ۱۹۹۶ منتشر شد. این نسخه از CSS دارای قابلیت‌های زیر بود :

• امکان تنظیم کردن مشخصه‌های فونت مانند قابلیت Fontface و Emphasis.
• امکان ویرایش رنگ متون، تعیین تصویر یا رنگ پس‌زمینه و سایر ویژگی‌های ظاهری.
• امکان تغییر سایر ویژگی‌های متون، مانند تنظیم نمودن فاصله بین کلمات، حروف و سطرها.
• هم تراز کردن نوشته‌ها، تصاویر و جداول.
• امکان اضافه‌کردن حاشیه، کادر و لایه‌بندی صفحات.
• قابلیت دسته‌بندی مشخصه‌ها و امکانات وب‌سایت.

قابل‌ذکر است که WC3 دیگر نسخه CSS 1  را به کاربران توصیه نمی‌کند.

زبان CSS 2

نسخه دوم  CSS در ماه می سال ۱۹۹۸ منتشر شد و در دسترس کاربران قرار گرفت. این نسخه از CSS دارای قابلیت‌های بیشتری نسبت به نسخه پیشین خود بود. برخی از این قابلیت‌ها عبارت‌اند از:

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

این نسخه از زبان CSS نیز دیگر توسط W3C  توصیه نمی‌گردد.

CSS 2.1

نسخه ۲.۱ CSS به علت رفع تعداد زیادی از مشکلات CSS 2  منتشر و در اختیار کاربران قرار گرفت. این نسخه از CSS هنوز و با وجود منتشر شدن نسخه‌های جدیدتر به‌عنوان یکی از استانداردهای طراحی وب‌سایت توسط W3C  مورد تأیید است.

زبان CSS3

این نسخه از CSS در ماه ژوئن سال ۱۹۹۹ منتشر شد و کاربران توانستند از آن استفاده کنند. نسخه CSS3 برخلاف نسخه‌های قبلی که تعاریف و امکانات در قالب یک نرم‌افزار مورداستفاده کاربر قرار می‌گرفت، دارای ساختاری ماژولار است. هر یک از ماژول‌ها، قابلیت‌های خاصی را به نرم‌افزار اضافه می‌کنند.

با ایجاد ساختار ماژولار، امکانات متفاوتی توسط ماژول‌های مختلف، مانند قابلیت اضافه‌شدن به نرم‌افزار را پیدا کرد. طبق آخرین اطلاعات، در نوامبر ۲۰۱۱ بالغ بر ۵۰ نوع ماژول مختلف با امکانات مخصوصی توسط تیم طراحی CSS در دسترس کاربران قرار گرفت.

زبان CSS 4

WC3 شروع به طراحی و تکمیل نسخه چهارم زبان css در ماه سپتامبر سال ۲۰۰۹ نمود، گرچه هنوز هیچ یک از مرورگرهای معروف از تمامی امکانات آن پشتیبانی نمی‌کنند، اما پیش‌بینی می‌شود تا چندین سال آینده این نسخه از زبان CSS به‌عنوان یکی از رایج‌ترین ابزارهای طراحی با امکانات ویژه‌ای مورداستفاده قرار بگیرد.

مزایا CSS چیست؟

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

معایب CSS چیست؟

زبان CSS در مقابل مزایای بسیار زیادی که دارد، شامل ضعف‌ها و محدودیت‌هایی هم است. برخی از محدودیت‌های این زبان عبارت‌اند از:

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

دنیای وب بدون زبان CSS چگونه می‌شد؟

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

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

فرانت اند (Front End) به چه معناست؟

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

ریسپانسیو کردن با CSS

همان‌طور که می‌دانید در زمان‌های گذشته بیشتر افراد از طریق سیستم‌های کامپیوتری به وب‌گردی و مشاهده صفحات وب می‌پرداختند. اما امروزه با پیشرفت تکنولوژی، دسترسی به اینترنت با دستگاه‌هایی مانند گوشی، تبلت، ساعت‌های هوشمند و … افزایش پیدا کرده است. این موضوع باعث شده است که توسعه‌دهندگان به فکر سازگار کردن صفحات وب‌سایت‌ها با دستگاه‌های هوشمند بیفتند.

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

منظور از پشتیبانی مرورگرها از زبان CSS چیست ؟

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

پس از آن مرورگر Internet Explorer 3 شروع به پشتیبانی از کدهای CSS کرد و در سال 2008 و در هشتمین نسخه خود، توانست به طور کامل CSS 2 را پشتیبانی کند. امروزه اکثر مرورگرها از CSS پشتیبانی می‌کنند، اما هنوز هم ممکن است توسعهٔ نسخه‌های CSS، مشکلاتی به همراه داشته باشد.

سخن آخر

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

هر سؤالی که درباره این زبان داشته باشید می‌توانید در قسمت نظرات همین مقاله با ما در میان بگذارید تا سریعاً متخصصان رویال کد پاسخگو شما باشند.