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