CSS چیست؟

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

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

برای طراحی سایت با ظاهری منحصر به فرد از طراحان وبکده کمک بگیرید.

تعریف CSS

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

این زبان همچنین به شما اجازه می‌دهد تا به وب سایت خود افکت و تصاویر متحرک اضافه کنید. بدون CSS وب سایت شما به عنوان یک صفحه‌ی HTML ساده نمایش داده می‌شود. در واقع سی اس اس تعیین می‌کند که چگونه اجزای HTML بر روی صفحه، کاغذ یا دیگر رسانه‌ها نشان داده شوند.

فایل‌های CSS معمولا به شکل متن (تکست) هستند و با استفاده از نرم‌افزارهای مختلف می‌شود آن‌ها را ویرایش کرد.

کاربرد CSS

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

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

حالا که با کاربرد CSS آشنا شدید، بیایید ببینیم با چه هدفی از آن استفاده می‌شود.

هدف از به کار بردن CSS

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

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

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

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

انواع CSS

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

CSS داخلی

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

مزایای CSS داخلی

- شما می‌توانید از کد Class و انتخابگرهای ID در این شیوه‌نامه استفاده کنید.

- از آنجایی که شما یک کد را فقط به یک فایل HTML اضافه می‌کنید، بنابراین نیاز به بارگزاری چندین فایل نیست.

معایب CSS داخلی

- اضافه کردن کد به یک Document می‌تواند باعث افزایش سایز صفحه و زمان بالا آمدن آن شود.

CSS خارجی

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

مزایای CSS خارجی

- از آنجایی که کد سی اس اس در یک document مجزا قرار دارد، فایل‌های HTML شما ساختاری مرتب‌تر خواهند داشت و سایزشان کوچک‌تر خواهد بود.

- شما می‌توانید یک فایل CSS خارجی را برای چندین صفحه استفاده کنید.

معایب CSS خارجی

- ممکن است تا زمانی که سی اس اس خارجی بارگیری نشده، صفحات شما به خوبی نمایش داده نشوند.

- بارگزاری یا لینک‌دهی به چند فایل سی اس اس می‌تواند موجب افزایش زمان دانلود صفحات سایت شما شود.

CSS درون خطی

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

مزایای CSS درون خطی

- در این نوع به راحتی می‌توانید کدهای سی اس اس را به یک صفحه HTML اضافه کنید. به همین دلیل این نوع برای آزمایش یا مشاهده‌ی پیش نمایش صفحات کاربرد زیادی دارند.

- شما در آن نیازی به ایجاد و بارگزاری یک Document جداگانه نخواهید داشت.

معایب CSS درون خطی

- اضافه کردن کدهای CSS به تمامی اجزای HTML زمان‌بر است و ساختار HTML شما را نامرتب می‌کند.

- تغییر استایل چند بخش می‌تواند باعث بالا رفتن اندازه‌ی صفحه و زمان دانلود صفحات سایت شما شود.

برخی از ویژگی‌های CSS

- آبشاری بودن

همانطور که در ابتدای مقاله گفتیم، CSS به معنای شیوه‌نامه‌ی آبشاری است. اما این آبشاری بودن به چه معناست؟

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

1- دیفالت مرورگر

2- شیوه‌نامه‌ی خارجی

3- شیوه‌نامه‌ی داخلی (در قسمت head)

4- شیوه‌نامه‌ی درون خطی (درون اجزای HTML) که بالاترین اولویت را دارد.

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

- باعث می‌شود قابلیت دسترسی آسان‌تر شود

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

- برای نمایش صفحات روی موبایل عالی است

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

چارچوب‌های CSS (فریم ورک‌ها)

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

انیمیشن

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

مزایای استفاده از CSS

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

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

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

معایب استفاده از CSS

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

- سطوح مختلف ، زبان سی اس اس سطح‌های مختلفی دارد: CSS، 2 CSS و 3 CSS. این موضوع هم برای برنامه نویسان و هم برای مرورگرها گیج کننده است. برخی افراد فقط کار با یک زبان را ترجیح می‌دهند.

کدهای CSS را با چه نرم‌افزارهایی می‌توان نوشت؟

در این بخش به معرفی 4 نرم‌افزار می‌پردازیم که با استفاده از آن‌ها می‌شود کدهای CSS را نوشت و ویرایش کرد.

1. Atom

یکی از بهترین‌ نرم‌افزارهای منبع باز برای ویرایش کدهای سی اس اس است که تمامی قابلیت‌های اساسی که یک برنامه نویس از یک نرم‌افزار انتظار دارد در آن قرار دارند. بهترین ویژگی آن است که همکاری بین چند کاربر در پلتفرم‌های مختلف را ساده‌تر و موثرتر می‌کند.

2. Brackets

این نرم‌افزار که به ویژه برای برنامه نویسان Front-end و طراحان وب سایت ساخته شده است، ابزارهای تصویری دقیقی دارد و از پیش‌پردازنده‌ها پشتیبانی می‌کند.

3. Notepad++

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

4. Visual Studio Code

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

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

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