جلسه 2 آموزش CSS: سینتکس CSS – اصول پایه و قواعد نوشتاری

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

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

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

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

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

×

جلسه 9 آموزش CSS: کار با حاشیه (Border) در CSS

مطالعه

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

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

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

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

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

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

×

جلسه 17 آموزش CSS: لینک ها (link) در CSS

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

در مثال بالا:

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

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

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

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

×

جلسه 7 آموزش CSS: کار با رنگ ها (colors) در CSS

مطالعه

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

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

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

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

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

×

جلسه 22 آموزش CSS: شبه عناصر (pseudo elements) در CSS

مطالعه

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

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

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

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

سخن پایانی

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

×

جلسه 6 آموزش CSS: کار با متن ها (Texts) در CSS

مطالعه

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

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

×

جلسه 13 آموزش CSS: باکس مدل (Box Model) در CSS

مطالعه