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

HTML الوسم <hr>

تعريفه

نستخدم الوسم <hr> لعرض خط أفقي في الصفحة.

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

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

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

خصائصه

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

إستخدامه

في المثال التالي قمنا بعرض خط أفقي بين الفقرتين.

مثال

<p>In Harmash.com you can learn every thing you need for free.</p>
<hr>
<p>You can learn Algorithms, Java, C++, Python, SQL etc..</p>
		

جرب الكود

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

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

hr {
	display: block;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: auto;
	margin-right: auto;
	border-style: inset;
	border-width: 1px;
}
	

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

في حال أردت تغيير شكل الخط الإفتراضي للوسم <hr> و إظهار رمز أو كلمة ما على الخط يمكنك فعل ذلك بواسطة كود CSS.

في المثال التالي قمنا بتغيير تصميم الوسم <hr> ليظهر في الصفحة خطين فوق بعض و في وسطهم الرمز §.

مثال

hr {
    border: none;
    border-top: 3px double #333;
    color: #333;
    overflow: visible;
    text-align: center;
    height: 5px;
}

hr:after {
    background: #fff;
    content: '§';
    padding: 0 4px;
    position: relative;
    top: -13px;
}
		

جرب الكود

الدورات

أدوات مساعدة

أقسام الموقع

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