اگر به دنبال طراحی وبسایت باشید حتما اسم زبان CSS را شنیده‌اید، زبان CSS یک زبان مکمل برای زبان نشانهگذاری HTML است که در طراحی‌وب بسیار کاربردی است. دستورات زبان CSS برای بخش فرانت‌اند سایت کاربرد دارند و به همین علت این زبان یک زبان برنامه نویسی نیست. زبان CSS کوتاه شده عبارت Cascading Style Sheets که به معنی برگ‌هایی به سبک آبشاری است.
تاریخچه زبان CSS
زبان فوق حدود 24 سال پیش ساخته شده است، و به عنوان نسخه ابتدایی در جهان منتشر شده است. امروز زبان CSS تغییراتی کرده است و بعد از تغییرات مختلف با نسخه 3 در جهان استفاده می‌شود. در مقالات گذشته گفتیم که، زبان‌ها برای انجام فعالیت پسوند‌های اختصاصی خود را برای فایل‌های خود دارند و پسوند مورد استفاده از زبان کلمه CSS است.
دستورات زبان CSS
تا به این قسمت با نوع زبان CSS آشنا شده‌اید، در حال حاضر می‌خواهیم شما را با دستورات زبان CSS آشنا کنیم. دستورات زبان CSS کلمات انگلیسی هستند که به صورت مستقیم در این زبان استفاده می‌شوند، علت اینکه گفتیم به صورت مستقیم این است که در زبان نشانهگذاری HTML اکثر تگ‌ها کوتاه شده عبارت‌های انگلیسی هستند، ولی در زبان CSS به این صورت نیست.
برای مثال color که به معنی رنگ است و در این زبان نیز برای تغییر رنگ متن کاربرد دارد. و‌یا کلمه background که به معنی پس‌زمینه است در زبان CSS نیز برای تغییر رنگ و تصویر پس‌زمینه کاربرد دارد. که اگر هر دو دستور گفته شده یعنی color و background را ترکیب کنیم، دستور دیگری را تشکیل می‌دهد که برای تغییر رنگ پس‌زمینه است.
نکته: علت اینکه به ویژگی‌های CSS دستور گفته می‌شود تداخل اسمی نداشتن با ویژگی‌های HTML است و تنها جهت آموزش استفاده می‌شود.
مقادیر دستورات CSS
دستورات زبان CSS برای ایجاد تغییرات در وبسایت نیاز به مقادیر مختلفی دارند، این مقادیر اغلب به صورت پیشفرض موجود است و بعضی از آنها را خود شما باید درج کنید. البته باید این نکته را برای شما عزیزان بگویم که هریک از دستورات CSS مقادیر پیشفرض خود را دارند، و این در طراحی وبسایت بسیار مفید و کاربردی است.
اکثر دستوراتی که مقادیر خود را از کاربر دریافت می‌کنند دستوراتی هستند که برای ایجاد کردن سایز و فضا کاربرد دارند، و یا برای درج کردن رنگ جدید و یا تصویر کاربرد دارند. اگر بخواهیم برای این موضوع مثالی طرح کنیم باید بگوییم که دستور color حتما باید نام رنگی را دریافت کند، تا بتوانند رنگ متن را به آن حالت تغییر دهد.
انتخابگرها(selectors)
حتما برای شما سوال شده است که زبان CSS به چه صورت می‌تواند مکمل زبان HTML باشد، زبان CSS با استفاده از انتخابگرها تگ‌های زبان HTML را شناسایی می‌کند. انتخابگرها موضوع پیچیده‌ای نیستند و بسیار ساده هستند، علت استفاده از آنها این است که طراحی‌وب به درستی انجام شود و وبسایت کمتر دچار اختلال در بخش CSS شود، و همینطور کار طراحان وبسایت بسیار ساده شود.
انتخابگر می‌تواند نام خود تگ باشد برای مثال تگ <p> و یا class و id مشخص شده آن باشد. و حتی می‌تواند تگی در یک مجموعه بزرگ‌تر باشد، که در طراحی‌وب به آن عنصری گفته می‌شود که زیر مجموعه عنصر بزرگ‌تر است. برای مثال ما می‌توانیم با استفاده از تگ <ul> یکی از تگ های درون آن را فراخوانی کنیم، و تغییرات را روی آن ایجاد کنیم.
علامت‌های انتخابگرها در CSS
انتخابگرهای مختلفی در زبان CSS وجود دارند، در اینجا چند مورد کاربردی که بیشتر طراحان وبسایت از آنها استفاده می‌کنند را برای شما توضیح می‌دهیم. در نظر داشته باشید که انتخابگرهای زبان CSS به جهت دسترسی بهتر و کیفیت بیشتر کار می‌باشند. برای مثال وقتی روی عنصری در وبسایت قرار می‌گیریم، رنگ عنصر وهمینطور پس زمینه آن تغییر می‌کند. این عمل را به راحتی می‌توانید با انتخابگرها انجام دهید.
انتخابگر شناور (:hover)
حتما وقتی به وب‌سایت‌های مختلفی مراجعه کرده‌اید، مشاهده کرده‌اید که وقتی روی دکمه‌های وبسایت قرار می‌گیرید آنها تغییر می‌کنند. برای مثال رنگ آنها تغییر می‌کند، و یا حاشیه‌ای برای آن ایجاد می‌شود. تمامی این حالت‌ها را می‌توان با انتخابگر (:hover)یدا ایجاد کنید. انتخابگر(:hover) به این صورت عمل می‌کند که وقتی کاربر روی آن قرار گرفت فعال شود.
انتخابگر همه عناصر(*)
در طراحی‌وب زمان‌هایی وجود دارد که شما می‌خواهید بعضی از تغییرات یا سبک‌ها را به تمام عناصر بدهید. و اگر بخواهید تک تک تگ‌های HTML را درج کنید فضای زیادی را از شما دریافت می‌کند، و شاید بعضی از تگ‌ها را فراموش کنید. با استفاده از انتخابگر (*) می‌توانید تمامی عناصر را فراخوانی کنید و به آنها سبک بدهید.
نحوه نوشتن دستورات CSS
زبان CSS نیز دارای قوانین مشخصی است که باید آنها را رعایت کنید، تا بتوانید وب‌سایتی را به درستی و استاندارد طراحی کنید. اولین و مهم ترین آنها این است که دستورات همیشه باید بین {} قرار داشته باشند، و شما بعد از شناسایی انتخابگر خود باید {} را ایجاد کنید و دستورات مربوط به هر انتخابگر را درون فضای خودش قرار دهید. دستورات بعد از درج شدن با علامت (:) از مقدار جدا می‌شوند، یا به عبارتی هر دستور بعد از نوشته شدن باید از مقدار با علامت (:) جدا شود. باید پایان هر مقداری که برای دستورات مشخص می‌کنیم را با علامت (;) ببندیم تا با دیگر دستورات تداخل نداشته باشد.
چگونه از CSS در طراحی‌وب استفاده کنیم؟
پاسخ به این سوال این است که به سه روش می‌توانیم، از دستورات CSS در طراحی‌وب استفاده کنیم. که در هر روش دستورات تغییری نمی‌کنند بلکه محل استفاده از آنها تغییر می‌کند و خود این بسیار مهم است.
روش اول استفاده از CSS
حتما با ویژگی style در زبان نشانهگذاری HTML آشنا شده اید، با استفاده از این ویژگی می‌توانید دستورات CSS را برای هر تگ تعریف کنید. البته این روش را برای شما عزیزان پیشنهاد نمی‌کنم، در صورتی از این روش استفاده کنید که تنها یک تگ به صورت خاص نیاز به این روش داشته باشد. علت این که می‌گوییم از این روش استفاده نکنید این است که تکرار دستورات CSS برای وبسایت مفید نیست، و شما برای اینکه به هر تگ حتی تگ‌های مشابه بخواهیم style و سبک دهید باید دستورات را تکرار کنید.
روش دوم استفاده از CSS
این روش نیز در سند HTML انجام می‌شود، با این تفاوت که روش اول درون هر تگ با استفاده از ویژگی style دستورات را ایجاد می‌کرد، ولی این روش درون تگ <style> دستورات CSS را ایجاد می‌کند. روش دوم تکرار کمتری در خصوص دستورات CSS دارد، زیرا می‌تواند از انتخابگرها نیز استفاده کند ولی به علت اینکه نمی‌توان از دستورات آن در دیگر سند‌ها استفاده کرد، و همینطور حضور دستورات CSS در فایل HTML این روش را نیز توصیه نمی‌کنیم.
روش سوم استفاده از CSS
این روش بسیار کاربردی می‌باشد و از شما عزیزان می‌خواهم که به درستی به این روش توجه کنید. در ابتدای مقاله گفتیم که پسوند فایل اختصاصی زبان CSS خود کلمه CSS می‌باشد، شما می‌توانید دستورات را در فایل اصلی خود CSS درج کنید و آن را با استفاده از تگ <link> به سند HTML لینک کنید. این روش چند مزیت دارد اولین مزیت آن این است که دستورات درون فایل HTML قرار ندارند تا باعث شلوغی فایل شوند، و همینطور می‌توانید از دستورات CSS درون فایل CSS در دیگر سند‌های HTML نیز استفاده کنید.
برای آموزش ویژگی‌های زبان CSS ما را همراهی کنید.
آموزش تخصصی CSS(قسمت – 1)
به نام خداوند بخشنده مهربان در این جلسات سعی داریم نکات زبان CSS را از صفر تا صد برای شما عزیزان توضیح دهیم. در این جلسه از آموزش انتخابگرها (selectors) را به شما عزیزان توضیح دهیم و مفهوم کلی آنها را بازگو کنیم. در این جلسه دو تا از انتخابگرهای مهم از جمله hover و * نیز آموزش داده شده است. عزیزان انتخابگرهای CSS بسیار زیاد هستند و ما سعی داریم در هر جلسه چندتایی از آنها توضیح دهیم تا بتوانید به خوبی بیاموزید و از آنها در طراحی‌های خودتان استفاده کنید. اگر به دنبال مطالب بیشتر هستید ما را در شبکه‌های اجتماعی زیر همراهی کنید در نظر داشته باشید می‌توانید مقالات مختلفی را در وبسایت ما مطالعه نمایید.
آموزش تخصصی CSS(قسمت – 2)
در این جلسه تگ والد را آموزش داده‌ایم. همینطور پیرامون چند انتخابگر دیگر صحبت کردیم که بسیار کاربردی هستند. از جمله این انتخابگرها nth-child می‌باشد.
خداقوت
بی نهایت سپاسگزارم
خسته نباشین امیدوارم که همیشه بدرخشین عالی هست
سپاس فراوان از شما خوشحالم که مطالب برای شما مفید بوده
سلام
خیلی عالی بود.خسته نباشید
خیلی خیلی ممنونم از شما
اگر قوانین هر زبانی را به درستی بیاموزید آموزش تمامی قسمت های آن بسیار ساده خواهد شد. اگر به درستی متوجه انتخابگر ها شوید قطعا به راحتی می‌توانید از دستورات استفاده کنید.
موفق باشید.
خلاصه و مفید. عالی
بی نهایت سپاسگزارم