جلسه 21 آموزش CSS: عناصر Block و Inline در CSS

سلام دوست من! 👋 خوش اومدی به یه جلسه دیگه از آموزش CSS! امروز قراره با هم در مورد عناصر Block و Inline در CSS صحبت کنیم.

شاید الان بپرسی اینا دیگه چی‌ان و به چه دردی می‌خورن؟ 🤔 بذار خیالت رو راحت کنم، فهمیدن تفاوت این دو تا عنصر، کلید اصلی برای چیدمان (Layout) درست و حسابی صفحات وب هست. اگه می‌خوای کنترل کاملی روی نحوه نمایش المان‌هات توی صفحه داشته باشی، باید فرق بین Block و Inline رو مثل کف دستت بلد باشی.

عناصر Block و Inline چی هستن؟

بیا اول بفهمیم این دو تا چه فرقی با هم دارن و هر کدوم چه کارایی دارن.

عناصر Block

عناصر Block مثل یه جعبه بزرگن که هر کدوم یه خط جدید رو توی صفحه شروع می‌کنن و کل عرض صفحه رو می‌گیرن (مگه اینکه خودت اندازه‌شون رو تغییر بدی). فکر کن مثل یه بلوک ساختمانی که زیر هم چیده می‌شن! 🧱 تگ‌هایی مثل:

×

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

مطالعه

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

• <div>
• <p> (پاراگراف)
• <h1> تا <h6> (تیترها)
• <ul>, <ol>, <li> (لیست‌ها)

معروف ترین عناصر بلاکی هستن.

مثلاً، اگه یه <div> توی کدت بذاری، اون یه بلوک جدید می‌سازه و هر چیزی که بعدش بیاد، توی یه خط جدید قرار می‌گیره. این باعث می‌شه برای بخش‌بندی صفحه خیلی مناسب باشن.

عناصر Inline

حالا برسیم به عناصر Inline. اینا مثل یه کلمه توی یه جمله‌ان؛ فقط جای خودشون رو می‌گیرن و توی همون خطی که هستن باقی می‌مونن. 🖌️ تگ‌هایی مثل <span>، <a>، <img>، <strong> و <em> از این دسته‌ان.

×

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

مطالعه

کار با عناصر Block و Inline در CSS

حالا که فهمیدی این عناصر چی‌ان، بهت میگم چطور می‌تونی باهاشون کار کنی 🤝

عناصر Block برای ساختار دادن به صفحه عالی‌ان. مثلاً، می‌تونی با <div> بخش‌های مختلف سایتت رو جدا کنی، مثل هدر، بدنه و فوتر. از طرف دیگه، عناصر Inline برای تغییرات کوچیک توی یه خط، مثل لینک دادن یا استایل دادن به یه کلمه خاص، بهترین انتخابن.

مثال از حالت‌های نمایش بلاکی و اینلاینی

بیا با دو تا مثال ساده، تفاوتشون رو بهتر ببینیم.

×

جلسه 18 آموزش CSS: لیست ها (List) در CSS

مطالعه

مثال 1: ترکیب Block و Inline

فرض کن می‌خوای یه پاراگراف بنویسی و یه کلمه رو توی اون برجسته کنی. می‌تونی اینجوری کد بزنی:

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

اینجا <p> یه عنصر Block هست و کل عرض صفحه رو می‌گیره، ولی <span> که Inline هست، فقط دور کلمه “خفن” می‌چرخه و توی همون خط می‌مونه. نتیجه؟ یه پاراگراف قشنگ با یه کلمه آبی! 💙

مثال 2: چند عنصر Inline کنار هم

حالا فرض کن می‌خوای چند تا لینک رو کنار هم بذاری:

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

چون <a> یه عنصر Inline هست، این سه تا لینک توی یه خط قرار می‌گیرن و فضای اضافی اشغال نمی‌کنن. مثل یه ردیف مرتب و شیک! ✨

×

جلسه 15 آموزش CSS: فونت (Font) در CSS

مطالعه

تغییر حالت نمایش تگ‌ها با استفاده از CSS

یکی از باحال‌ترین چیزایی که توی CSS می‌تونی انجام بدی، اینه که حالت نمایش تگ‌ها رو عوض کنی. با خاصیت display می‌تونی یه عنصر Block رو به Inline تبدیل کنی یا برعکس. بیا ببینیم چطوریه!

تغییر Block به Inline

فرض کن یه <div> داری و می‌خوای توی یه خط بمونه:

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

با این کد، <div> دیگه یه بلوک جدید شروع نمی‌کنه و مثل یه عنصر Inline رفتار می‌کنه. مثال:

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

نتیجه؟ هر دو <div> کنار هم توی یه خط قرار میگیرن! 🌈

×

جلسه 1 آموزش CSS: نحوه ایجاد فایل CSS و اتصال آن به HTML

مطالعه

تغییر Inline به Block

حالا اگه بخوای یه <span> رو به صورت Block نشون بدی:

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

با این کار، <span> یه خط جدید شروع می‌کنه و کل عرض صفحه رو می‌گیره. مثال:

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

اینجا هر <span> یه بلوک جدا می‌شه و زیر هم قرار می‌گیره! 🟩🟦

استفاده از Inline-Block

یه گزینه دیگه هم داری به اسم inline-block. این حالت ترکیبی از هر دوئه؛ یعنی عنصر توی یه خط می‌مونه، ولی می‌تونی عرض و ارتفاعش رو تنظیم کنی. مثال:

×

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

مطالعه

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

اینجا هر دو <div> کنار همن، ولی هر کدوم اندازه مشخص خودشون رو دارن. خیلی باحاله، نه؟ 😍

پایان حرفام

خب، رفیق. فکر کنم دیگه با عناصر Block و Inline توی CSS حسابی آشنا شدی! 🌟 حالا می‌دونی که چطوری ازشون استفاده کنی و حتی چطوری حالت نمایششون رو عوض کنی. این چیزا پایه‌های طراحی وبن و اگه خوب بلدشون باشی، می‌تونی صفحات فوق‌العاده‌ای بسازی.

حتماً برو و با مثال‌های مختلف تمرین کن. هر چی بیشتر دستت راه بیفته، کارات بهتر می‌شه. اگه سوالی داشتی یا جایی گیر کردی، زیر همین مقاله برام بنویس. قول می‌دم سریع جوابت رو بدم! 😊

موفق باشی و تا جلسه بعدی، مراقب خودت باش! 🎉

×

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

مطالعه