0Pricing
CSS Academy · درس

أنماط الحدود وعرضها ولونها

طبّق حدودًا بأنماط وعروض وألوان مختلفة باستخدام الخصائص المختصرة والمفصلة.

أنماط الحدود وعرضها ولونها درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

اختصار border

يضبط اختصار border الجوانب الأربعة دفعة واحدة: العرض، والنمط، واللون.

<div class="box">Solid border box</div>
<div class="warning">Dashed warning box</div>

قيم border-style

يجب ضبط border-style حتى يظهر الحد. والقيم المتاحة هي:

  • solid — خط متصل
  • dashed — شرطات طويلة
  • dotted — نقاط دائرية
  • double — خطان متوازيان
  • groove/ridge/inset/outset — تأثيرات ثلاثية الأبعاد
  • none — بلا حد (القيمة الافتراضية)

border-width

تقبل border-width أي وحدة قياس للطول أو الكلمات المفتاحية thin وmedium وthick. استخدم القيم الرقمية للحصول على دقة أكبر.

<div class="thin-border">Thin</div>
<div class="medium-border">Medium</div>
<div class="thick-border">Thick</div>

border-color

تقبل border-color أي قيمة لون في CSS، بما في ذلك RGBA للشفافية. وترث currentColor لون النص.

<div class="card">Card with translucent border</div>
<button class="icon-btn">Icon Button</button>

حدود الجوانب الفردية

اضبط الحدود على جوانب محددة باستخدام الخصائص التفصيلية:

<div class="bottom-only">Bottom border only</div>
<div class="left-accent">Accent quote</div>

border-radius

تدوّر border-radius زوايا العناصر. استخدم قيمة واحدة للتدوير الموحد، أو ما يصل إلى أربع قيم للتحكم في كل زاوية على حدة.

<div class="card">Card</div>
<div class="pill">Pill</div>
<div class="circle">&#9679;</div>
<div class="custom">Custom</div>

border-radius الإهليلجي

يمكن أن يكون لنصف قطر كل زاوية قيمتان تفصل بينهما / لإنشاء تدوير إهليلجي غير متماثل:

<div class="leaf"></div>

border-image

تستبدل border-image الحد بصورة مقسّمة أو بتدرّج لوني، مما يتيح إنشاء حدود زخرفية:

<div class="fancy">Gradient border image</div>

outline مقابل border

ترسم outline خطًا خارج الحد. وخلافًا للحد، فإنها لا تؤثر في التخطيط أو أبعاد العنصر. وتُستخدم عادةً كمؤشر للتركيز عبر لوحة المفاتيح.

<button class="focus-demo">Focused Button (demo)</button>

إزالة outline: استخدمها بحذر

لا تزل مخططات :focus مطلقًا من دون توفير مؤشر تركيز مرئي بديل. تؤدي إزالة أنماط التركيز إلى الإضرار بمستخدمي لوحة المفاتيح وقارئات الشاشة.

<button>Button without outline</button>
<a href="#">Link without outline</a>

border-collapse للجداول

في جداول HTML، يدمج border-collapse: collapse حدود الخلايا المتجاورة في خط واحد للحصول على مظهر أكثر ترتيبًا.

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>30</td></tr>
</table>

تحقق سريع

أي خاصية CSS ترسم خطًا خارج الحد من دون التأثير في تخطيط العنصر؟

خلاصة

يضبط اختصار border العرض والنمط واللون. وتدوّر border-radius الزوايا. وتنفصل outline عن الحد؛ فهي لا تؤثر في التخطيط، وتُعدّ ضرورية لمؤشرات التركيز الميسّرة للوصول عبر لوحة المفاتيح.

الأسئلة الشائعة

هل درس «أنماط الحدود وعرضها ولونها» مجاني؟

نعم — نص درس «أنماط الحدود وعرضها ولونها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «أنماط الحدود وعرضها ولونها»؟

طبّق حدودًا بأنماط وعروض وألوان مختلفة باستخدام الخصائص المختصرة والمفصلة. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «أنماط الحدود وعرضها ولونها»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. فهم Width وHeight وMargin وPadding
  2. أنماط الحدود وعرضها ولونها
  3. Box-Sizing: Content-Box مقابل Border-Box
  4. Outline وBox-Shadow
← العودة إلى CSS Academy