المقدمة: كيفية تغيير لون علامة HR باستخدام CSS
لغة CSS تُبهرنا دائماً بقدرتها على تحسين وتجميل وتزيين وتنسيق محتوى الويب ، سواء كان هذا المحتوى نص مقالة أو عنصر أخر.
بالنسبة للخط الفاصل داخل صفحات HTML يمكنك فقط كتابة علامة HR بهذا الشكل:
|
1 |
<hr /> |
وسيتم إنشاء مثل هذا الخط : 
CSS
لكن تلوين هذا الخط بأي لون تختاره أو الزيادة في سمكه أو النقص من طوله وجعله في الوسط أو اليمين أو اليسار . فإننا سنحتاج إلى تدخل CSS لضبط هذه الأشياء وتنسيقها .
صراحة الطريقة بسيطة من حيث التطبيق، فقط سنستخدم خاصية لون الخلفية ( background-color ) مع خصائص الارتفاع ( height ) والحد ( border ) . وذلك لتغيير اللون الافتراضي للعلامة hr
شفرة المصدر :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html dir="rtl" lang="ar"> <head> <meta charset="utf-8"> <title><span style="font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12.8px;">تغيير لون علامة HR باستخدام CSS</span></title> <style> hr{ height: 3px; background-color: #ff7d95; border: none; } </style> </head> <body> <h1><span style="font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12.8px;">هنا عنوان متعلق بالمحتوى</span></h1> <hr> <p><span style="font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12.8px;">خط فاصل، بين الفقرات أو تحت العناوين وبلون جميل</span>.</p> </body> </html> |
كيفية تغيير لون علامة HR باستخدام CSS
| النتيجة: |
الخط الفاصل ملون وعرضه 100% :خط فاصل، طوله بقيمة عرض الصفحة ( 100% )، يعمل على الفصل بين الفقرات أو يوضع تحت العناوين داخل المقالة |
الخط الفاصل HR بطول 50%
ليصبح الخط طوله 50% ، يعني النصف، يجب إضافة قيمة العرض ب CSS كالتالي:
|
1 2 3 4 5 |
hr{ height: 3px; background-color: #ff7d95; border: none; width: 50%; } |
إضافة width: 50%
ملاحظة: يمكنك تغيير قيمة 50% إلى أي رقم تريده حسب ما يناسب المحتوى، فمثلاً إذا أردت جعل الخط تحت عنوان قصير يمكنك أن تكتب 30% أو أكثر أو أقل.
شفرة المصدر :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title><span style="font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12.8px;">تغيير لون علامة HR باستخدام CSS</span></title> <style> hr{ height: 3px; background-color: #ff7d95; border: none; width: 50%; } </style> </head> <body> <h1><span style="font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12.8px;">هنا عنوان متعلق بالمحتوى</span></h1> <hr> <p><span style="font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12.8px;">خط فاصل، بين الفقرات أو تحت العناوين وبلون جميل</span>.</p> </body> </html> |
| النتيجة: |
الخط الفاصل ملون وعرضه 50% بمحاذاة الوسط:خط فاصل، طوله في عرض الصفحة ( 50% )، يعمل على الفصل بين الفقرات أو يوضع تحت العناوين داخل المقالة بمحاذاة الوسط |
CSS
الخط الفاصل HR بطول 50% بمحاذاة اليمين
بعد أن أصبح طول الخط هو نصف عرض الصفحة يمكننا أن نجعله على اليمين أو اليسار، ولتحقيق ذلك ننزل إلى العلامة HR في الشفيرة أدناه ونجعلها في حالة محاذاة اليمين هكذا:
|
1 |
<hr align="right"> |
شفرة المصدر :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title><span style="font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12.8px;">تغيير لون علامة HR باستخدام CSS</span></title> <style> hr{ height: 3px; background-color: #ff7d95; border: none; width: 50%; } </style> </head> <body> <h1><span style="font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12.8px;">هنا عنوان متعلق بالمحتوى</span></h1> <hr align="right"> <p><span style="font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12.8px;">خط فاصل، بين الفقرات أو تحت العناوين وبلون جميل</span>.</p> </body> </html> |
| النتيجة: |
الخط الفاصل ملون وعرضه 50% بمحاذاة اليمين:خط فاصل، طوله في عرض الصفحة ( 50% )، يعمل على الفصل بين الفقرات أو يوضع تحت العناوين داخل المقالة بمحاذاة اليمين . |
CSS
الخط الفاصل HR بطول 50% بمحاذاة اليسار
لجعل الخط الفاصل HR جهة اليسار ، ننزل إلى العلامة HR في الشفيرة أدناه ونجعلها في حالة محاذاة اليسار هكذا:
|
1 |
<hr align="left"> |
شفرة المصدر :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title><span style="font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12.8px;">تغيير لون علامة HR باستخدام CSS</span></title> <style> hr{ height: 3px; background-color: #ff7d95; border: none; } </style> </head> <body> <h1><span style="font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12.8px;">هنا عنوان متعلق بالمحتوى</span></h1> <hr align="left"> <p><span style="font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12.8px;">خط فاصل، بين الفقرات أو تحت العناوين وبلون جميل</span>.</p> </body> </html> |
| النتيجة: |
الخط الفاصل ملون وعرضه 50% بمحاذاة اليسار :خط فاصل، طوله في عرض الصفحة ( 50% )، يعمل على الفصل بين الفقرات أو يوضع تحت العناوين داخل المقالة بمحاذاة اليسار . |
CSS
تغيير سمك الخط hr ولونه
لزيادة سمك خط hr ، يكفي أن نرفع قيمة خاصية height ، ولتغيير لونه، يكفي أن نغير كود اللون لخاصية background-color شاهد المثال:
حدث خطأ . الرجاء معاودة المحاولة في وقت لاحق |
| النتيجة: |
الخط الفاصل hr بعد تغيير سمكه ولونه :خط فاصل، طوله في عرض الصفحة ( 80% )، سمكه height: 10px . |
يمكنكم دائماً العودة إلى قائمة دروس HTML و CSS
ولاستخدام نفس الطريقة في مقالات ووردبريس يمكنك الاطلاع على هذه المقالة:
في أمان الله
قناتي على اليوتوب أرى أن هذه المواضيع قد تهمك: |
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.