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

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

در این مقاله قصد داریم تا به این سوالات پاسخ دهیم. ابتدا به سراغ مفهوم css می رویم.

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

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

یک مثال ساده از کد CSS

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}
h1 {
  color: #2c3e50;
  text-align: center;
}

ویژگی های اصلی css چیست؟

همانطور که از اسم Cascading Style Sheet پیداست، در css کد ها به صورت آبشاری و به ترتیب نوشته می شوند.
اگر طراحی وب سایت را مانند بدن انسان در نظر بگیریم زبان نشانه گذاری (HTML) مانند اسکلت بدن و css نقش پوست و گوشت و در نهایت لباس را ایفا می کند.

چرا باید از CSS استفاده کنیم؟

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

تأثیر CSS بر سرعت و سئو سایت

• فایل‌های CSS بهینه‌سازی‌شده باعث می‌شوند سایت سریع‌تر بارگذاری شود.
• فشرده‌سازی (Minify) و ترکیب فایل‌ها حجم کد را کاهش می‌دهد.
• استفاده از CSS خارجی (External) به جای Inline یا Internal باعث می‌شود مرورگر بتواند فایل‌ها را کش کند و سرعت بارگذاری بالاتر برود.
• سرعت بیشتر = رتبه بهتر در گوگل و تجربه کاربری قوی‌تر.

CSS و طراحی واکنش‌گرا (Responsive)

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

بدون CSS vs HTML با CSS

• بدون CSS: صفحه فقط شامل متن ساده و پشت سر هم است، بدون رنگ، بدون فاصله و بدون جذابیت.
• با CSS: همان متن می‌تواند به یک صفحه زیبا با رنگ‌بندی، فونت‌های متنوع، منوهای مرتب و طراحی واکنش‌گرا تبدیل شود.
• به همین دلیل CSS را «پوست و لباس وب» می‌نامند.

فرمت css چیست و به چند روش قابل استفاده است؟

فرمت فایل سی سی اس به صورت .css می باشد و به سه روش قابل نوشتن و استفاده می شود.

External CSS

پرکاربردترین روش استفاده از سی اس اس External Css می باشد. در این روش یک فایل به صورت جداگانه ایجاد می شود و کدها و قواعد css در آن نوشته می شود. سپس به فایل اصلی HTML متصل می گردد.

Internal CSS

زمانی که لازم است یک صفحه از سایت استایل مشخصی داشته باشد از این روش استفاده می شود.
در این روش دستورات CSS درون تگ <style> صفحه مورد نظر نوشته می شوند.

Inline CSS

در این حالت استایل مورد نظر مستقیم درون تگ مورد نظر نوشته می شود و تاثیری بر روی تگ های دیگر ندارد.

این مقاله را حتما بخوانید

جاوا اسکریپت چیست؟

پرسش‌های متداول (FAQ)