<kbd>

وسم مدخلات لوحة المفاتيح <kbd>

وسم kbd يميز ما يضغطه المستخدم على لوحة المفاتيح — Ctrl+C وEnter — بمظهر «زر» مألوف في التوثيقات.

عندما تقول للقارئ «اضغط كذا» فالكلمة المضغوطة تلبس kbd: خط أحادي المسافة افتراضيًّا، والعرف التصميمي الراسخ يضيف إطارًا وظلًّا خفيفًا يحاكي غطاء الزر الفيزيائي (كما في شريط البحث بهذا الموقع).

الاختصارات المركبة تُبنى بتداخل أنيق: كل زر kbd مستقلة داخل kbd جامعة، بينهما علامة +.

الصياغة

<p>احفظ الملف بـ <kbd>Ctrl</kbd> + <kbd>S</kbd></p>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<p>
  افتح البحث السريع:
  <kbd style="background:#f1f0f5; border:1px solid #ccc; border-bottom-width:3px; border-radius:6px; padding:2px 8px; font-family:monospace">Ctrl</kbd>
  +
  <kbd style="background:#f1f0f5; border:1px solid #ccc; border-bottom-width:3px; border-radius:6px; padding:2px 8px; font-family:monospace">K</kbd>
</p>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
—	لا خصائص مميزة — المظهر «الزراري» عبر CSS

💡 نصائح عملية

أنماط CSS الثلاثة الصانعة للشكل: border + border-bottom أسمك + radius
قابله بـ samp لمخرجات البرنامج وcode للكود — لكل دوره

⚠️ أخطاء شائعة

استخدام code لأزرار الكيبورد — kbd هو الدلالة الصحيحة
كتابة Ctrl+S نصًّا خامًا في التوثيقات — تخسر التمييز البصري والدلالي

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs