CSS چیست؟
زبان CSS زبانی است که توسط مرورگرها قابل درک است و به ما امکان طراحی صفحات وب را می دهد. همانطور که می دانید چارچوب هر وب سایتی با استفاده از زبان نشانه گذاری HTML ساخته می شود. HTML و CSS دقیقا همان استاندارد و چارچوبی هستند که همه مرورگرها از آن پشتیبانی می کنند و ما می توانیم با استفاده از این زبان ها با مرورگرها ارتباط برقرار کنیم. سوال اینجاست که چرا دو زبان؟ منظور از CSS چیست و HTML چه کاربردی دارد؟ در این مقاله آموزشی html و css به این سوالات پاسخ می دهیم.
دوره ارائه شده در ویدئو
تفاوت بین HTML و CSS چیست؟
با استفاده از زبان نشانه گذاری HTML، قادر خواهیم بود بدنه اصلی وب سایت و چارچوب آن را ایجاد کنیم. اما این بدنه فاقد رنگ و لعاب بوده و برای مصرف کنندگان جذابیتی ندارد. بنابراین ما به ابزاری برای رنگ آمیزی و استایل دادن به صفحات وب نیاز خواهیم داشت. این ابزار دقیقاً همان زبان CSS است که می توانیم از آن برای رنگ آمیزی عناصر و اعمال سبک های جذاب برای آنها استفاده کنیم. با CSS، ما حتی قادر به ایجاد عناصر سفارشی و اعمال انیمیشن خواهیم بود.
اهداف و کاربردهای CSS
همانطور که w3schools اشاره می کند، استفاده از CSS به معنای هر چیزی است که در وب سایت های مختلف می بینید. تمام جذابیت یک وب سایت در ظاهر و رابط کاربری آن است که به زبان CSS پیاده سازی شده است. گرد بودن گوشه دکمه، رنگ پس‌زمینه عناصر، شیب‌ها، انیمیشن‌ها، منوها و حتی نماد بارگذاری وب‌سایت، همگی با CSS طراحی شده‌اند.
ارائه نسخه های CSS
همیشه نسخه های مختلفی از فناوری برای حل مشکلات قبلی وجود دارد. CSS نیز از این قاعده مستثنی نیست و نسخه های مختلفی دارد. در تصویر زیر به 5 نسخه اصلی ارائه شده تا کنون اشاره و بررسی کرده ایم.
CSS را به HTML اضافه کنید
دو راه برای استفاده از کدهای CSS وجود دارد. در روش اول می توان از کدهای CSS به صورت درون خطی و داخلی استفاده کرد. اما در روش دوم باید یک فایل خارجی با پسوند css بسازیم و لینک فایل CSS را به صورت زیر در فایل html خود قرار دهیم:
<head>
<link rel="stylesheet" type="text/css" href="https://www.daneshjooyar.com/blog/what-is-css/mystyle.css">
</head>ساختار کدهای CSS
برای استفاده از کدهای CSS باید از Style در تگ های HTML استفاده کنیم. وقتی استایل را نوشتیم، می‌توانیم از ویژگی‌های CSS استفاده کنیم. این توابع بسیار زیاد است و هر یک از آنها قطعا برای وظایف مربوط به خود استفاده می شود. برای مثال از تابع Color برای تغییر رنگ متن استفاده می شود و می توانیم مانند کد زیر از آن استفاده کنیم:
<p style="background-color: red; color: white;"></p>فرمت فایل های CSS چیست؟
وقتی نوبت به فایل می رسد، به این معنی است که از یک پسوند استفاده خواهد شد. در واقع این پسوندها هستند که نوع فایل ها را در هر سیستمی تعیین می کنند. فایل های CSS نیز از این قاعده مستثنی نیستند. پسوند این فایل ها css. یعنی اگر قصد داشته باشیم فایلی با نام Style ایجاد کنیم این فایل به صورت زیر نامگذاری می شود: Style.css
چگونه با CSS آن را ریسپانسیو کنیم
ابتدا باید بدانیم مفهوم طراحی واکنشی یا واکنش گرا در CSS چیست؟ طراحی ریسپانسیو به معنای توسعه سایت به گونه ای است که وب سایت ما به یک سبک و درست در انواع مانیتورها نمایش داده شود. کاربران عموما از انواع دستگاه های محاسباتی مانند تلفن های همراه، تبلت های مایکروسافت و مک بوک، لپ تاپ های بزرگ و سیستم های کامپیوتری رومیزی استفاده می کنند. هر یک از این کاربران انتظار دارند که وب سایت بر اساس اندازه مانیتوری که استفاده می کنند، به درستی برای آنها نمایش داده شود.
اگر کاربری با موبایل خود وارد سایت شود و دکمه های فوق العاده بزرگی ببیند تجربه خوبی نخواهد داشت و از وب سایت خارج می شود. از طرفی اگر دکمه ها و متون سایت ما در اندازه کوچک روی یک مانیتور بزرگ نمایش داده شوند، باز هم با مشکل مواجه خواهیم شد. طراحان وب سایت برای مقابله با این مشکل از طراحی ریسپانسیو استفاده می کنند. این سبک طراحی را می توان در CSS با استفاده از ویژگی هایی مانند Flex Box و CSS Grid انجام داد.
وب کیت در css چیست؟
هر مرورگری برای تشخیص کدهای HTML و CSS به یک موتور رندر نیاز دارد. مانند یک کامپایلر که می تواند کد جاوا را به زبان ماشین ترجمه کند و خروجی صحیح را نمایش دهد. شاید برای شما سوالی در مورد اینکه مرورگرها چگونه معنی و مفهوم کدهای HTML/CSS را درک می کنند دارید؟ خوب، ساده است. با ارائه دهنده وب کیت. در واقع، این مرورگر نیست که ساختار کدها را درک می کند، بلکه موتورهای رندر مانند وب کیت مسئول عملیات پردازش و تفسیر هستند.
scss چیست؟
همانطور که می دانید CSS یک زبان برنامه نویسی نیست. زیرا امکان تعریف متغیرها و ایجاد ساختارهای تودرتو وجود ندارد. اما چارچوب هایی مانند SCSS برای افزودن این ویژگی ها به CSS ساخته شده اند. با استفاده از SCSS و SASS می توانید از متغیرها و سایر ویژگی های پیشرفته زبان CSS استفاده کنید. نکته مهم این است که مرورگرها پسوند .SCSS را متوجه نمی شوند و اگر از این فریم ورک یا SASS استفاده می کنید، ابتدا باید تمام کدهایی که می نویسید در CSS کامپایل شده و سپس در سرور آپلود شوند.
نتیجه
زبان CSS یک ابزار طراحی و توسعه وب سایت است. قبل از ظهور CSS، همه سایت ها با رنگ ها و لعاب های بی روح و فقط HTML طراحی می شدند. اما از آنجایی که HTML در زمینه گرافیک و ایجاد تغییرات گرافیکی ضعیف بود، CSS متولد شد. با استفاده از CSS قادر خواهیم بود تمام تگ های HTML را استایل و رنگ آمیزی کنیم و سایت خود را زیبا کنیم. HTML اسکلت سایت ما را تشکیل می دهد و CSS پوست و ظاهر وب سایت ما را تشکیل می دهد.
در این مقاله یک مرور کلی از css مورد بحث قرار گرفت. اگر سوالی در مورد “css چیست” را می توانید در قسمت نظرات همین بخش مطرح کنید تا در کمترین زمان ممکن پاسخ مناسبی دریافت کنید.