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

CSS یا همون Cascading Style Sheets زبان طراحی هست که به کمکش می‌تونی به صفحات وب خودت زیبایی و شخصیت بدی! 🎨 اما برای استفاده درست از CSS، باید با سینتکس و قواعد نوشتاری اون آشنا باشی. همین قواعد ساده هستن که تفاوت بین یک صفحه وب معمولی و یک شاهکار هنری رو ایجاد می‌کنن!

تو این جلسه یاد می‌گیری چطور درست کدهای CSS بنویسی، انواع روش‌های پیاده‌سازی CSS رو می‌شناسی و با مثال‌های کاربردی، همه چیز رو به صورت عملی تمرین می‌کنی. پس بیا با هم شروع کنیم! 💪

🌀 نحوه نوشتن دستورات CSS

CSS هم مثل هر زبان دیگه‌ای، قواعد خاص خودش رو داره! 📝 اگه می‌خوای از CSS استفاده کنی، باید این قواعد رو یاد بگیری و رعایت کنی.

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

ببین رفیق، سینتکس (Syntax) CSS در واقع همون دستور زبان و قواعد نوشتاری‌شه! 🧐 یعنی باید بدونی چطور دستورات رو بنویسی تا مرورگر بتونه اونا رو بفهمه و اجرا کنه. وقتی با سینتکس CSS آشنا بشی، می‌تونی از همه ویژگی‌های جذابش استفاده کنی و صفحات وبت رو خوشگل کنی! ✨💻

1-1. ساختار پایه دستورات CSS

هر دستور CSS از سه بخش اصلی تشکیل شده: انتخابگر (Selector)، خاصیت (Property) و مقدار (Value) این سه بخش، ستون‌های اصلی قواعد نوشتاری CSS هستن:

1. انتخابگر (Selector): مثل یه نشانگر جادویی عمل می‌کنه که مشخص می‌کنه تغییراتمون روی کدوم تگ یا المان اعمال بشه! 🎯
2. خاصیت (Property): با Property میگی کدوم ویژگی اون المان رو می‌خوای تغییر بدی، مثل رنگ، اندازه یا فونت! 📐
3. مقدار (Value): با Value تعیین میکنی دقیقاً چجوری اون ویژگی تغییر کنه؛ مثلاً می‌تونی اندازه رو کم یا زیاد کنی!

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

بیا با یک مثال ساده این موضوع رو بهتر برات روشن کنم:

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

در مثال بالا:

• p انتخابگره (همه عناصر پاراگراف رو هدف می‌گیره)
• color و font-size خاصیت‌ها هستن
• blue و 16px هم مقادیر هستن

به طور کلی؛ برای نوشتن یک دستور CSS:

اول مشخص می‌کنیم که استایل رو روی چی می‌خوایم اعمال کنیم، مثلا یه تگ، کلاس یا ID. بعد یه آکولاد باز { می‌ذاریم و ویژگی موردنظر (مثل رنگ، اندازه فونت و …) رو می‌نویسیم. بعدش یه دونقطه : می‌ذاریم و مقدار اون ویژگی یا خاصیت رو مشخص می‌کنیم. در نهایت، با علامت ; دستور رو تموم می‌کنیم و آکولاد بسته } رو می‌نویسیم.

توجه! برای افزایش خوانایی کد، همیشه از تورفتگی (indentation) استفاده کن. اگه به کدهای بالا دقت کنی، می‌بینی که هم‌راستا نیستن و در یک تراز عمودی قرار نگرفتن. در واقع، کدهایی که می‌خواهیم روی یک المان اعمال بشن، باید با کمی فاصله از سمت چپ صفحه (تورفتگی) نوشته بشن. این کار کمک می‌کنه که کدها بهتر سازماندهی بشن و قابل فهم تر بشن.

نکته! مقادیر و خاصیت‌های CSS یعنی (Property) و (Value) به بزرگی و کوچکی حروف حساس نیستن. اما انتخابگرهای ID و Class به بزرگی و کوچکی حروف حساس هستن!

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

2-1 روش‌های نوشتن دستورات CSS

خب، برای نوشتن دستورات CSS دو روش کلی داریم: آبشاری و فشرده. بیا هر کدوم رو با دقت بیشتری بررسی کنیم:

روش آبشاری (زیر هم)

در این روش، هر دستور CSS به طور جداگانه و توی یه خط مجزا نوشته میشه و همه دستورات زیر هم قرار می‌گیرن. این طوری کدها خیلی راحت‌تر خونده می‌شن و ترتیب اجرای دستورات کاملاً مشخصه. 📑 این روش باعث میشه که وقتی می‌خواهی دستورات رو مرور کنی یا تغییر بدی، خیلی سریع‌تر متوجه بشی هر کد چیکار میکنه. مثال:

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

روش فشرده (پشت سر هم)

در روش فشرده (پشت سر هم)، تمام دستورات CSS در یک خط نوشته می‌شن بدون اینکه هر دستور در یک خط جداگانه باشه. این کار باعث میشه که حجم فایل CSS کوچیک‌تر بشه و در نتیجه سایت سریع‌تر بارگذاری بشه. ⚡

اما یه نکته مهم اینه که این روش ممکنه کمی خواندن کد رو سخت‌تر کنه، چون همه دستورات در یک خط قرار دارن و ممکنه دیدن جزئیات هر دستور برای کسی که کد رو می‌خونه، دشوار باشه. مثال:

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

🤔 کدوم روش رو انتخاب کنیم؟

• اگه میخای کدهات مرتب و خوانا باشه، بهتره از روش آبشاری استفاده کنی. 📚
• اما اگه هدف ات کاهش حجم فایل و بهینه‌سازی کدهاست، استفاده از روش فشرده بهترین راهکاره ⚡

پس در نهایت، بسته به نیاز پروژه‌ ات، می‌تونی از این دو روش استفاده کنی!

توجه! 👀 یه نکته کوچیک بهت بگم: سعی کن هر چیزی که میگم رو با مثال برای خودت انجام بدی و تمرین کنی. اینجوری چیزهایی که یاد می‌گیری، به صورت عینی و ملموس برات ثابت میشه. مثلا همین موردی که گفتم: حجم فایل CSS ای که به صورت فشرده و پشت سر هم نوشته شده، کمتر از حجم فایلیه که به صورت آبشاری نوشته میشه. ✅
این موضوع درسته، اما همیشه بهتره چیزی که یاد می‌گیری و درک می‌کنی رو به صورت عینی تست کنی، نه فقط ذهنی. پس پیشنهاد می‌کنم این کار رو خودت انجام بدی:
10 خط کد CSS بنویس به صورت آبشاری.
همون کدها رو به صورت فشرده بنویس.
بعد حجم فایل‌ها رو با هم مقایسه کن.
اینطوری می‌فهمی که آیا واقعاً این موضوع درست هست یا نه! 📊 این کار بهت کمک می‌کنه که خودت تجربه کنی و بهتر یاد بگیری. 😉

سخن پایانی

تبریک می‌گم رفیق! 🎉 حالا که با قواعد نوشتاری CSS آشنا شدی، دیگه می‌دونی چطور دستورات CSS رو به درستی بنویسی. یادت باشه که CSS یه مهارته و با تمرین بیشتر، تسلطت بیشتر میشه.

در جلسه بعدی، می‌ریم سراغ کامنت نویسی و یاد می‌گیریم چطور توضیحات مفید در CSS بنویسیم. تا اون موقع، سعی کن با تمرین مثال‌های این جلسه، مهارت‌هات رو تقویت کنی. 💪

اگر سوال یا نظری داری، حتما تو کامنت‌ها بنویس! 👇 منتظرم بشنوم چه تجربه‌هایی از این جلسه داری.

جلسه 19 آموزش CSS: جدول (Table) در CSS

مطالعه

جلسه 10 آموزش CSS: فاصله داخلی (Padding) در CSS

مطالعه

جلسه 24 آموزش CSS: مدیا کوئری (Media queries) در CSS

مطالعه