❮
Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing
❯
عودة للدرس❯ ❮عودة للدرس

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.
جرب الكود

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

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

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;
}
جرب الكود