الخط الأفقـي hr مختصر للعبارة : horizontal rule
♦ إنشاء خط فاصل أفقي hr
كيف يتم إنشاء خط فاصل أفقي hr بين الفقرات في المقالة؟
إنشاء خط فاصل أفقي hr
جاءتني فكرة تحرير هذا الدرس منذ مدة، وكلما عادت إليَّ الفكرة أحاول تجاهلها، لأنني كنت أحسب مثل هاته المعلومات جد متوفرة عبر النت، وأن أيقونة إضافة خط فاصل موجودة في جل محررات النصوص، لكنني اليوم ادركت أن هذا الدرس ذو أهمية بمكان ويجب ان أحرره قبل غيره . لأن هناك محموعة من النماذج للخطوط الأفقية الفاصلة بين الفقرات أو التي تكون تحت العناوين ولا يعرفها إلا القليل، وهي تساهم في تزيين المقالات.
صراحة إنشاء خط أفقي هو أسهل من السهل، يكفي أن تفتح محرر أكواد html وتكتب <hr /> تحت أي سطر ثم سجل وستلاحظ أنه تم انشاء خط أفقي مثل هذا:👇
طيب هذا جميل! لكن ليس هذا كل ما نحتاجه. نحن نريد أن نتحكم في هذا الخط من حيث الطول والارتفاع واللون، ومن حيث وضعيته : ( في الوسط، يمين أو شمال).
نبدأ على بركة الله
تذكيــر: إنشاء خط فاصل أفقي hr
يجب أن أذكركم بما جاء في درس CSS3 « تنسيق صفحات الويب باستخدام لغة CSS »
يمكن لنـا إستخدام CSS في ملفات HTML عن طريق إدراج شفرة CSS مباشرة في علامة style .
وهذا ما سنقوم به هنا في هذا الدرس لإنشاء خطوط أفقيـة داخل المقالة ، كي نتحكم في تغيير أحجامها و ألوانها حسب المطلوب.
- سطر فاصل <HR> يحتل عرض الصفحة كاملاً:
لإدراج هذا النوع من السطر يكفي أن تكتب في ملف HTML هذا الرمز <hr /> وستحصل على سطر فاصل بين فقرتين.
لكن أحياناً وهذا هو الجديد نريد أن نجعل له لوناً مغايراً للون الافتراضي، وهنا سنستعمل بعض عناصر CSS.
- تلوين سطر <hr /> :
لتلوين الخط الفاصل <hr /> بالأزرق مثلاً، نقوم بإضافة هذا الرمز:
color: #4f96cc;
|
1 |
<hr style="border: solid; color: #4f96cc;"/> |
ونحصل على هذه النتيجـــة:
-
التحكم في طول خط فاصل أفقي hr:
كيف نُـعَـدِّلُ علـى طــول الخط ؟
أولاً، يجب أن نحدد الطول الذي سنستعمله ، وأفضل استعمال النسبة المئوية كي تتناسب مع الهواتف والأجهزة الصغيرة!
في مثالنا هذا سنستعمل 50% لنحصل على نصف الخط الافتراضي، فنقوم بإضافة الرمز التالي:
width: 50%;
|
1 |
<hr style="border: solid; color: #4f96cc; width: 50%;"/> |
ونحصل على هاته النتيجـة:
-
التحكـم في اتجـاه السـطـر:
- السطـر جـهـة اليميـن:
وهذا هو الرمز الذي الذي نضيفه إلى ما سبق:
text-align: right;
|
1 |
<hr style="border: solid; color: #6FA939; width: 50%; text-align: right;" /> |
ونحصـل على هاته النتيجـة:
- السطر جهـة اليسار:
وهذا هو الرمز الذي الذي نضيفه إلى ما سبق:
text-align: left;
|
1 |
<hr style="border: solid; color: #6FA939; width: 50%; text-align: left;" /> |
ونحصـل على هاته النتيجـة:
- السطر في الوسط:
هذا هو الرمز:
text-align: center;
|
1 |
<hr style="border: solid; color: #6FA939; width: 50%; text-align: center;" /> |
ونحصـل على هاته النتيجـة:
-
التحكــم في سمك الخط الفاصل hr :
للتحكم في سمك الخط نقـوم بإضافة الشفيرة التاليـة:
|
1 |
<hr style="height: 2px; border: none; background-color: #ffcd42;" /> |
بتغيير قيمة الارتفاع height: 2px ستحصلون على نتائج مختلفة:
وبتغيير قيمة الطـول width:70%; ستحصلون على نتائج مختلفة:
50%
40%
30%
20%
إقرأ أيضاً: إنشاء قوائم نقطية ومرقمة بالألوان
إلــى هنــا، أكون قد استوفيت الشرح لإنشاء الخطـوط الفاصـلة الأفقيـة، أرجو أن يكون الشرح واضحاً وفي متنـاول الجميع، وأي استفسار ، أنا في الخدمــة.
إقرأ أيضاً: تغيير خلفيات الجداول على صفحات HTML
فـــــي أمــان الله
 |
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.
