CSS چیست؟

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

دوره معرفی شده در ویدئو

آموزش پیشنهادی

دوره آموزش html css با 20 ساعت پروژه طراحی سایت هاستینگ + پشتیبانی VIP

  • آموزش کامل تگ های HTML
  • بررسی تخصصی زبان CSS
  • کار با تگ های مفهومی HTML 5
  • پیاده سازی پروژه واقعی وبسایت هاستینگ
  • و...
میلاد علیزاده وکیلی
۲.۰
دوره آموزش html css با 20 ساعت پروژه طراحی سایت هاستینگ + پشتیبانی VIP مشاهده دوره

تفاوت HTML و CSS چیست؟

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

اهداف و کاربردهای CSS

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

معرفی نسخه های CSS

همواره نسخه های متفاوت و مختلفی از تکنولوژی ها برای رفع مشکلات قبلی به وجود می‌آیند. CSS نیز از این قاعده مستثنی نبوده و نسخه های متفاوتی دارد. در تصویر زیر 5 نسخه اصلی تا به الان معرفی شده را ذکر و بررسی کرده‌ایم.

انواع نسخه های CSS چیست؟

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

دو روش استفاده از کد های CSS وجود دارد. در روش اول به صورت inline و داخلی میتوان از کد های سی‌اس‌اس استفاده کرد. اما در روش دوم بایستی یک فایل خارجی با پسوند .css ایجاد کنیم و در فایل html خود به صورت زیر، لینک فایل CSS را قرار دهیم:

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

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

برای استفاده از کد های CSS بایستی در داخل تگ های HTML از Style استفاده کنیم. پس از نوشتن Style قادر به استفاده از خصوصیات CSS خواهیم بود. این خصوصیات بسیار زیاد هستند و هرکدام قطعا برای کارهای مرتبط با خود استفاده میشوند. مثلا خصوصیت Color برای تغییر رنگ متون میباشد و مانند کد زیر میتوانیم از آن بهره ببریم:

<p style="background-color: red; color: white;"></p>

فرمت فایل های CSS چیست؟

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

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

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

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

webkit در css چیست؟

هر مرورگری برای تشخیص و شناسایی کدهای HTML و CSS نیازمند یک موتور رندر میباشد. مانند یک کامپایلر که کد های زبان جاوا را میتواند به زبان ماشین ترجمه کرده و خروجی درستی را به نمایش بگذارد. شاید برای شما هم سوال بوده که مرورگر ها چگونه معنی و مفهوم کدهای HTML / CSS را متوجه میشوند؟ خوب ساده اس؛ با موتور رندر webkit. در واقع این مرورگر نیست که ساختار کد ها را درک میکند، بلکه این موتور های رندر نظیر webkit هستند که عملیات پردازش و تفسیر را بر عهده دارند.

Scss چیست؟

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

نتیجه گیری

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

در این مقاله به بررسی جامعی از css پرداخته شد. چنانچه هرگونه سوال در مورد “css چیست” دارید میتوانید در قسمت دیدگاه های این بخش مطرح کرده تا در کوتاهترین زمان پاسخ مناسبی دریافت کنید.