CSS چیست و چه کاربردی دارد؟
اگر در طراحی وب تازه کار باشید، حتما واژهی CSS به گوشتان خورده است و حتما برایتان سوال پیش آمده است که CSS چیست . در این فایل و ویدئوی آموزشی میخواهیم بصورت کامل به این سوالات جواب دهیم: CSS چیست ؟ CSS چه کاربردی دارد؟ فایل ها و کدهای CSS چطور اجرا میشوند؟ و تفاوت CSS با CSS3 چیست؟ با من در این آموزش همراه باشید.
CSS چیست
اگر میخواهید خیلی دقیق به پاسخ سوال CSS چیست برسید، فیلم آموزشی زیر را مشاهده کنید
یک معرفی کلی
برای پاسخ به سوال CSS چیست خیلی خوب است که بندانیم CSS مخفف Cascading Style Sheet که از کنار هم قرار گرفتن حرف اول این ۳ کلمه، CSS حاصل میشود. اما اگر این عبارت را به فارسی ترجمه کنیم، کارایی اصلی CSS برای ما روشن نمیشود. به همین دلیل، مباحث تئوری را کنار میگذاریم و خیلی سریع دربارهی کاربرد اصلی CSS صحبت میکنیم. اگر به دنبال تاریخچه و مباحث تئوری دربارهی سی اس اس هستید، این صفحه از ویکی پدیا را مطالعه کنید.
اگر در یک جلمهی ساده بخواهیم بگوییم که CSS چیست میتوانیم بگوییم که CSS آمده که دنیای وب و صفحات وب را برای ما زیباتر کند. و اینکار را با کمک و یاری HTML انجام میدهد.
اگر دربارهی HTML چیزی نمیدانید، پیشنهاد میکنیم مقاله HTML چیست و چه کاربردی دارد و همینطور HTML5 چیست؟ را مطالعه کنید. مطالعهی این دو مقاله بسیار برایتان مفید خواهد بود.
کاربرد اصلی CSS
در این قسمت میخواهیم به سوال CSS چیست بصورت دقیق تر و ریزتر پاسخ دهیم و کاربرد اصلی CSS را بررسی کنیم.
CSS ابزاری است که بوسیلهی آن میتوانید صفحات وب خود را زیبا و چشم نواز کنید. همانطور که در مقالهی HTML چیست گفتیم، شما با استفاده از HTML میتوانید ساختار کلی صفحه وب خود را بسازید و در واقع اسکلت بندی صفحهی وب خود را داشته باشید. و حالا با استفاده از CSS میتوانید ساختار سایت خودتان را زیبا کنید، به آن رنگ اضافه کنید، اندازهی آنها را مشخص کنید، روش نمایش آنها را تنظیم کنید و… .
در واقع CSS به شما کمک میکند تا صفحات وب زیبا و چشم نوازی داشته باشید.
یک ساختمان را تصور کنید
در توضیح HTML ما یک ساختمان را مثال زدیم و گفتیم که طراحی وب را میتوانیم به ساختمان سازی تشبیه کنیم.
در ساختمان سازی، معمولا دو مرحلهی اصلی وجود دارد:
- در مرحله اول اسکلت بندی ساختمان با سیمان، بتن، میلگرد و… صورت میگیرد
- در مرحلهی دوم زیباسازی ساختمان با گچ بری، رنگ آمیزی، نورپردازی و… انجام میشود.
طراحی سایت نیز دقیقا به همین صورت است:
- در مرحلهی اول شما با استفاده از HTML، ساختار کلی صفحه وب خود را میسازید و در واقع اسکلت بندی آنرا انجام میدهید و مشخص میکنید که در صفحه وبتان به چه چیزهایی نیاز دارید.
- در مرحلهی بعد با استفاده از CSS، اقدام به زیباسازی، رنگ دهی و… میکنید و به صفحه وب خودتان جذابیت های ظاهری اضافه میکنید.
در واقع در پاسخ به سوال CSS چیست میتوانیم بگوییم: CSS به شما کمک میکند تا صفحهی وب زیبا و چشم نوازی داشته باشید.
یا مثلا یک انسان را تصور کنید
در مثالی دیگر، میتوانیم یک انسان را مثال بزنیم تا بتوانیم بهتر به سوال CSS چیست پاسخ دهیم:
اگر شما بدن یک انسان را در نظر بگیرید:
- استخوان ها و اسکلت بندی بدن انسان را میشود به HTML تشبیه کرد
- و ظاهر، لباس، مو، چهره و… را میتوان به CSS تشبیه کرد.
ساختار کدهای CSS به چه صورت است؟
اگر بخواهیم به سوال CSS چیست پاسخ دهیم، خیلی خوب است که یک مثال از کدهای CSS داشته باشیم که بتوانیم کمی با ساختار کدهای CSS نیز آشنا شویم.
کدهای CSS به این صورت کار میکنند که شما بخش از کد HTML که میخواهید روی آن تغییر ایجاد کنید را انتخاب میکنید، سپس با استفاده از کدهای CSS تغییراتی که مدنظرتان است را روی آن بخش ایجاد میکنید. برای مثال در تکه کد بالا، ما یک المان با کلاس test را مورد هدف قرار دادهایم و برای رنگ پس زمینهی آن، رنگ سفید را انتخاب کردهایم.
اگر با ID ها و Class ها آشنایی ندارید این آموزش میتواند برایتان مفید باشد: تفاوت ID و Class در طراحی وب
رابطهی HTML و CSS چیست
در ادامهی پاسخ به سوال CSS چیست میخواهیم دربارهی رابطهی HTML و CSS صحبت کنیم.
حقیقت این است که HTML و CSS هیچکدام به تنهایی هیچ مزیت خاصی ندارد. با HTML به تنهایی نمیتوانید صفحات وب حرفهای و چشم نواز طراحی کنید. CSS هم به تنهایی کاربردی نمیتواند داشته باشد. HTML و CSS در کنار یکدیگر هستند که میتوانند قدرت فوق العادهای پیدا کنند و صفحات وب چشم نواز و زیبایی را طراحی کنند.
به همین دلیل است که در کلاس ها و کارگاههایمان، وقتی کسی از ما دربارهی مسیر تبدیل شدن به یک طراح وب میپرسد، ما در مرحلهی اول به او یادگیری HTML و CSS را پیشنهاد میکنیم. زیرا این دو تکنولوژی، مقدماتی ترین چیزهایی هستند که یک طراح وب باید به آن مسلط باشد.
روش اجرای فایل های CSS
فایل های CSS برای اجرا شدن به ابزار خاصی نیاز ندارند. شما برای اجرای فایل های CSS فقط به یک مرورگر نیاز دارید. فرقی نمیکند که مرورگر ما فایرفاکس باشد یا کروم. همه مرورگر ها از کدهای CSS پشتیبانی میکنند. تنها چیزی که برای اجرای فایل های CSS نیاز دارید، یک مرورگر (Browser) و ترکیب فایل های CSS با HTML است.
چرا CSS یک زبان برنامه نویسی نیست!
خیلی از اشخاصی که به خوبی مفهوم CSS را درک نکرده اند و نتوانسته اند که پاسخ خوبی برای سوالCSS چیست پیدا کنند، CSS را یک زبان برنامه نویسی میدانند که کاملا اشتباه است.
CSS هرگز نمیتواند یک زبان برنامه نویسی باشد. زیرا اصلا ویژگی های یک زبان برنامه نویسی، مثل متغیر ها، توابع، شرط ها، حلقه ها و… را ندارد. پس کاملا اشتباه است اگرCSS را یک زبان برنامه نویسی بدانیم. میتوانیم دربارهیCSS بگوییم که ابزاری است که استفاده از آن میتوانیم تگ های HTML خود را زیبا کنیم و صفحات وب چشم نوازی را طراحی کنیم.
دیدگاهتان را بنویسید