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

سلام رفیق! 👋 به جلسه نهم آموزش CSS رایا وردپرس خوش اومدی 🙂

آماده‌ای تا با دنیای جذاب حاشیه ها یا همون Borders توی CSS بیشتر آشنا بشیم؟ 🤔 حاشیه‌ها مثل قاب عکس برای محتوای وب‌سایت عمل می‌کنن. می‌تونن عناصر رو از هم جدا کنن، روی بخش‌های مهم تاکید کنن یا خیلی ساده، به طراحی‌ات زیبایی و جلوه‌ی بیشتری بدن.

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

🤔حاشیه (Border) در CSS چیست؟

قبل از اینکه بریم سراغ اصل مطلب، بذار یه توضیح کوتاه و جمع و جور بدم. هر عنصر HTML توی صفحه وب، مثل یه جعبه (Box Model) می‌مونه. این جعبه می‌تونه یه حاشیه دور خودش داشته باشه. CSS به ما این قدرت رو می‌ده که این حاشیه رو از هر نظر (رنگ، ضخامت، شکل و…) شخصی‌سازی کنیم.

×

جلسه 4 آموزش CSS: انتخابگرها یا Selectors در CSS

مطالعه

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

حالا بریم سراغ ویژگی‌های اصلی که برای کنترل حاشیه ها استفاده می‌شن که عبارتن از:

• border-style : شکل یا طرح خط دور لبه
• border-width : اندازه خط دور لبه
• border-color : رنگ خط دور لبه

1️⃣ ویژگی border-style: چه شکلی باشه حاشیه‌ات؟

اولین چیزی که باید برای حاشیه‌ات مشخص کنی، سبکشه. ویژگی border-style بهت می‌گه حاشیه‌ات قراره خط صاف باشه، نقطه‌چین باشه یا هر مدل دیگه. این ویژگی پایه و اساس بردرهاست.

👇 انواع سبک‌های حاشیه:

• solid: یه خط پیوسته و صاف. این معمول‌ترین استایله.
• dotted: خط حاشیه به‌صورت نقطه‌چین نمایش داده می‌شه. ⚫⚫⚫
• dashed: خط حاشیه به‌صورت خط‌چین نمایش داده می‌شه. ➖➖➖
• double: دو خط موازی کنار هم.
• groove: یه خط سه‌بعدی که انگار تو صفحه فرورفته.
• ridge: برعکس groove، انگار خط از صفحه اومده بیرون.
• inset: یه حاشیه سه‌بعدی که باعث می‌شه عنصر تو رفته به نظر بیاد.
• outset: برعکس inset، یه حاشیه سه‌بعدی که باعث می‌شه عنصر برجسته به نظر بیاد.
• none: هیچ حاشیه ای نمایش داده نمی‌شه (مقدار پیش‌فرض).
• hidden: مثل none هست، اما توی جداول یه رفتار خاص داره و برای حل تداخل حاشیه ها به کار میاد.

توجه! برای هر کدوم از حالت های محتلف border-style یه مثال ساده میزنم تا ببینی خروجی نهایی چه شکلی میشه. برای اینکه حاشیه‌ها خوب دیده بشن، توی همه‌ی مثال‌ها (به جز none)، یه ضخامت (border-width: 5px;) و یه رنگ قرمز (border-color:red; ) هم در نظر میگیرم.

×

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

مطالعه

1. border-style: none;

در این حالت، هیچ حاشیه‌ای نشون داده نمی‌شه (حتی اگه عرض و رنگ رو تعیین کنی).

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

خروجی: هیچ خط یا حاشیه‌ای دور المان نمی‌بینی، انگار اصلاً حاشیه‌ای وجود نداره.

2. border-style: solid;

یه خط صاف و پیوسته دور عنصر می‌کشه. این رایج‌ترین و ساده‌ترین استایل حاشیه است.

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

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

×

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

مطالعه

3. border-style: dotted;

حاشیه به صورت نقطه‌چین (نقطه‌های ریز گرد) نمایش داده می‌شه. ⚫⚫⚫

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

خروجی: نقطه‌های قرمز ریز با فاصله از هم دور المان می‌بینی، مثل یه خط نقطه‌چین.

4. border-style: dashed;

حاشیه به صورت خط‌چین نمایش داده می‌شه. ➖➖➖

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

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

×

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

مطالعه

5. border-style: double;

دو تا خط صاف و موازی کنار هم کشیده می‌شه.

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

خروجی: دو خط صاف قرمز کنار هم با یه فاصله کوچیک بینشون دور المان می‌بینی.

6. border-style: groove;

یه خط سه‌بعدی که انگار تو صفحه فرورفته.

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

خروجی: یه حاشیه تیره که انگار تو صفحه فرورفته، با سایه‌هایی که حس عمق می‌ده.

×

جلسه 16 آموزش CSS: تصاویر (Images) در CSS

مطالعه

7. border-style: ridge;

برعکس groove، خطوط حاشیه انگار از صفحه اومده بیرون.

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

خروجی: یه حاشیه قرمز که انگار از صفحه بیرون زده، با سایه‌هایی که برعکس groove هستن.

8. border-style: inset;

کل المان انگار فرورفته.

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

خروجی: حاشیه قرمز که باعث می‌شه کل المان انگار تو صفحه فرو رفته باشه.

×

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

مطالعه

9. border-style: outset;

کل المان انگار برآمده.

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

خروجی: حاشیه قرمز که باعث می‌شه کل المان انگار از صفحه بیرون زده باشه.

نکته: برای اینکه حاشیه رو ببینی، باید حتماً border-style رو مشخص کنی (به جز none). اگه بخوای، می‌تونی برای هر طرف المان (بالا، راست، پایین، چپ) یه سبک متفاوت بذاری، مثلاً:

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

2️⃣ ویژگی border-width: حاشیه‌ات چقدر ضخیم باشه؟

حالا که سبک حاشیه‌ات رو انتخاب کردی، وقتشه بگی چقدر ضخیم یا نازک باشه. ویژگ border-width این کار رو برات می‌کنه.

×

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

مطالعه

مقادیر ممکن برای border-width :

• پیکسل: مثل 1px, 5px (دقیق و دلخواه).
• کلمات کلیدی:
  • thin (نازک)
  • medium (متوسط)
  • thick (ضخیم)

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

در مثال بالا یه حاشیه صاف با ضخامت 4 پیکسل دور div می‌بینی.

یه ترفند باحال: می‌تونی برای هر طرف (بالا، راست، پایین، چپ) یه ضخامت جدا و دلخواه تعیین کنی:

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

نکته: ترتیب همیشه ساعت‌گرد شروع از بالاست: بالا → راست → پایین → چپ.

3️⃣ ویژگی border-color: حاشیه‌ات چه رنگی باشه؟

حالا که شکل و ضخامت حاشیه‌ات رو تعیین کردی، نوبت رنگشه! با border-color می‌تونی هر رنگی که دوست داری به حاشیه‌ات بدی.

×

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

مطالعه

مقادیر ممکن برای border-color:

• اسم رنگ: مثل red.
• کد هگز: مثل #ff5733 (برای رنگ نارنجی).
• RGB: مثل rgb(255, 87, 51) (نارنجی).
• RGBA: مثل rgba(255, 87, 51, 0.5) (نارنجی با شفافیت).

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

در مثال بالا یه حاشیه صاف 2 پیکسلی قرمز دور div کشیده میشه.

رنگ متفاوت برای هر طرف: اگه میخای تمام خطوط حاشیه یه رنگ ثابت نداشته باشن و هر جهت یه رنگ متفاوت داشته باشه میتونی به صورت زیر بنویسی که ترتیبش ساعتگرده یعنی رنگ اول برای بالا، رنگ دوم راست، رنگ سوم پایین و رنگ آخری برای حاشیه سمت چپ خواهد بود

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

خلاصه‌نویسی ویژگی Border: همه رو با هم بنویس! ✍️

اگه بخوای هر دفعه سه تا خط کد برای سبک، عرض و رنگ بنویسی، علاوه بر اینکه خسته‌کننده می‌شه حجم کدهات هم بالا میره . برای همین CSS یه راه برای خلاصه نویسی ویژگی بردر وجود داره:

ساختار:

×

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

مطالعه

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

مثال:

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

این یه حاشیه خط‌چین 3 پیکسلی سبز دور div می‌کشه. ساده و سریع!

نکته: اگه یه مقدار رو ننویسی (مثلاً رنگ)، پیش‌فرضش اعمال می‌شه. ولی بدون تعیین border-style هیچی نمی‌بینی.

استایل نوشتن برای یک جهت خاص: فقط یه طرف رو تغییر بده! 🧭

بعضی وقتا نمی‌خوای کل المان حاشیه داشته باشه، فقط یه طرفش برات مهمه. اینجا ویژگی‌های جهت‌دار به کار میان:

×

جلسه 3 آموزش CSS: کامنت گذاری در CSS

مطالعه

• border-top: حاشیه بالا
• border-right: حاشیه راست
• border-bottom: حاشیه پایین
• border-left: حاشیه چپ

مثال:

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

این کد فقط زیر div یه خط صاف آبی می‌کشه.

مثال ترکیب چند جهت:

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

نکته: می‌تونی برای هر جهت جداگانه سبک، عرض و رنگ بذاری.

×

جلسه 4 آموزش CSS: انتخابگرها یا Selectors در CSS

مطالعه

😮 ویژگی‌ پیشرفته‌ تر برای حاشیه‌ها

حالا که اصول رو یاد گرفتی، بیا یه ویژگی باحال‌تر از بردر یا حاشیه رو ببینیم.

✔️ border-radius: گوشه‌های نرم و قشنگ

با border-radius می‌تونی گوشه‌های حاشیه‌ات رو گرد و نرم تر کنی. این برای دکمه‌ها و کارت‌ها عالیه.

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

اینجا گوشه‌ها 8 پیکسل گرد می‌شن.

جمع‌بندی: حالا استاد حاشیه‌ها شدی! 😁

خب، دیگه همه‌چیز رو درباره حاشیه‌ها یا Borders در CSS یاد گرفتی! از border-style برای شکل، border-width برای ضخامت، border-color برای رنگ، تا خلاصه‌نویسی و استایل‌دهی به یه جهت خاص.

×

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

مطالعه

فقط یادت باشه با مثال‌ها تمرین کنی تا دستت راه بیفته. اگه سوالی داشتی، تو کامنت‌ها بپرس، با کمال میل کمکت می‌کنم! 😊 موفق باشی و طراح های قشنگ بسازی! 🌈

×

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

مطالعه