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