إنشاء خط فاصل أفقي hr

أخر تحديث لهذه المقالة في: 18 أكتوبر 2020 الساعة: 10:14 م

الخط الأفقـي hr مختصر للعبارة : horizontal rule 

 

كيف يتم إنشاء خط أفقي فاصل بين الأسطر في المقالة؟


جاءتني فكرة تحرير هذا الدرس منذ مدة، وكلما عادت إليَّ الفكرة أحاول تجاهلها، لأنني كنت أحسب مثل هاته المعلومات جد متوفرة عبر النت، وأن أيقونة إضافة خط فاصل موجودة في جل محررات النصوص، لكنني اليوم ادركت أن هذا الدرس ذو أهمية بمكان ويجب ان أحرره قبل غيره . لأن هناك محموعة من النماذج للخطوط الأفقية الفاصلة بين الفقرات أو التي تكون تحت العناوين ولا يعرفها إلا القليل، وهي تساهم في تزيين المقالات. 

صراحة إنشاء خط أفقي هو أسهل من السهل، يكفي أن تفتح محرر أكواد html وتكتب <hr />  تحت أي سطر ثم سجل وستلاحظ أنه تم انشاء خط أفقي مثل هذا:👇


 

طيب هذا جميل! لكن ليس هذا كل ما نحتاجه. نحن نريد أن نتحكم في هذا الخط من حيث الطول والارتفاع واللون، ومن حيث وضعيته : ( في الوسط، يمين أو شمال).

نبدأ على بركة الله

تذكيــر:

يجب أن أذكركم بما جاء في درس CSS3 « تنسيق صفحات الويب باستخدام لغة CSS »

 يمكن لنـا إستخدام CSS في ملفات HTML  عن طريق إدراج شفرة CSS  مباشرة في  علامة  style .

وهذا ما سنقوم به هنا في هذا الدرس لإنشاء خطوط أفقيـة داخل المقالة ، كي نتحكم في تغيير أحجامها و ألوانها حسب المطلوب.

  • سطر فاصل <HR> يحتل عرض الصفحة كاملاً:

لإدراج هذا النوع من السطر يكفي أن تكتب في ملف HTML  هذا الرمز <hr /> وستحصل على سطر فاصل بين فقرتين.

لكن أحياناً وهذا هو الجديد نريد أن نجعل له لوناً مغايراً للون الافتراضي، وهنا سنستعمل بعض عناصر CSS.

  • تلوين سطر <hr /> :

لتلوين الخط الفاصل  <hr />  بالأزرق مثلاً، نقوم بإضافة هذا الرمز:

color: #4f96cc;

ونحصل على هذه النتيجـــة:


  • التحكم في طول الخط:

كيف نُـعَـدِّلُ علـى طــول الخط ؟

  أولاً، يجب أن نحدد الطول الذي سنستعمله ، وأفضل استعمال النسبة المئوية كي تتناسب مع  الهواتف والأجهزة الصغيرة!

في مثالنا هذا سنستعمل  50% لنحصل على نصف الخط الافتراضي، فنقوم بإضافة الرمز التالي:

width: 50%;

ونحصل على هاته النتيجـة:

 


  • التحكـم في اتجـاه السـطـر:

  • السطـر جـهـة اليميـن:

وهذا هو الرمز الذي الذي نضيفه إلى ما سبق:

text-align: right;

ونحصـل على هاته النتيجـة:


  • السطر جهـة اليسار:

وهذا هو الرمز الذي الذي نضيفه إلى ما سبق:

text-align: left;

ونحصـل على هاته النتيجـة:


  • السطر في الوسط:

هذا هو الرمز:

text-align: center;

ونحصـل على هاته النتيجـة:


  • التحكــم في سمك الخط :

للتحكم في سمك الخط نقـوم بإضافة الشفيرة التاليـة:

بتغيير قيمة الارتفاع    height: 2px ستحصلون على نتائج مختلفة:


 


 


 


 


 

وبتغيير قيمة الطـول    width:70%; ستحصلون على نتائج مختلفة:

50%


40%


30%


20%


إقرأ أيضاً: إنشاء قوائم نقطية ومرقمة بالألوان

إلــى هنــا أكون قد استوفيت الشرح لإنشاء الخطـوط الفاصـلة الأفقيـة، أرجو أن يكون الشرح واضحاً وفي متنـاول الجميع، وأي استفسار ، أنا في الخدمــة.

إقرأ أيضاً: تغيير خلفيات الجداول على صفحات HTML

فـــــي أمــان الله


 

لا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء.

اترك تعليقًا

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

    مؤسس موقع :
        عبدالرحيم ح.س من شمال المغرب . تقني "الهندسة المدنية" ، مارست البرمجة منذ 2001، خبرتي مع الويب والإعلاميات : تمتد من سنة 2000 ، سائر باستمرار في تحديث معلوماتي والاطلاع على كل جديد.
كتب 286 مقالة في jabism.com.

عدد المشاهدات لهذه المقالة : 1٬212