Learn Typing Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Computer Fundamentals English English Conversations Problem Solving

HTMLالوسم <kbd>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي
  • نصائح و ملاحظات

تعريفه

نستخدم الوسم <kbd> على هذا النحو <kbd> </kbd> لعرض أسماء الأزرار الموجودة على الكيبورد بشكل مختلف عن باقي النص الموضوع في الصفحة.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <kbd>.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بعرض إسم الزر Ctrl و إسم الزر S بخط مختلف عن باقي النص.

مثال

Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save this page on your computer.
Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save this page on your computer.

جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

kbd {
font-family: monospace;
}
kbd { font-family: monospace; }

نصائح و ملاحظات

في العادة يتم تحسين طريقة ظهور الوسم <kbd> بواسطة كود CSS لإظهار الكلام الموضوع فيه كزر.

مثال

kbd {
display: inline-block;
margin: 0 .1em;
padding: .1em .6em;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 11px;
line-height: 1.4;
color: #242729;
text-shadow: 0 1px 0 #fff;
background-color: #e1e3e5;
border: 1px solid #adb3b9;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(12,13,14,.2), 0 0 0 2px #fff inset;
white-space: nowrap;
}
kbd { display: inline-block; margin: 0 .1em; padding: .1em .6em; font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; font-size: 11px; line-height: 1.4; color: #242729; text-shadow: 0 1px 0 #fff; background-color: #e1e3e5; border: 1px solid #adb3b9; border-radius: 3px; box-shadow: 0 1px 0 rgba(12,13,14,.2), 0 0 0 2px #fff inset; white-space: nowrap; }

جرب الكود

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة