إعلان
تعلم الآن

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;
}
		

جرب الكود

الدورات

أدوات مساعدة

أقسام الموقع

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