كيفية تغيير لون علامة HR باستخدام CSS

المقدمة: كيفية تغيير لون علامة HR باستخدام CSS

لغة CSS تُبهرنا دائماً بقدرتها على تحسين وتجميل وتزيين وتنسيق محتوى الويب ، سواء كان هذا المحتوى نص مقالة أو عنصر أخر.

بالنسبة للخط الفاصل داخل صفحات HTML يمكنك فقط كتابة علامة HR  بهذا الشكل:

وسيتم إنشاء مثل هذا الخط :


CSS

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

صراحة الطريقة بسيطة من حيث التطبيق، فقط سنستخدم خاصية لون الخلفية ( background-color ) مع خصائص الارتفاع     ( height )  والحد  ( border ) . وذلك لتغيير اللون الافتراضي للعلامة hr


شفرة المصدر :

كيفية تغيير لون علامة HR باستخدام CSS

 

النتيجة:

الخط الفاصل ملون وعرضه 100% :


خط فاصل، طوله بقيمة عرض الصفحة ( 100% )، يعمل على الفصل بين الفقرات أو يوضع تحت العناوين داخل المقالة

الخط الفاصل HR  بطول 50%


ليصبح الخط طوله 50% ، يعني النصف، يجب إضافة قيمة العرض ب CSS كالتالي:

إضافة width: 50% 

ملاحظة: يمكنك تغيير قيمة 50% إلى أي رقم تريده حسب ما يناسب المحتوى، فمثلاً إذا أردت جعل الخط تحت عنوان قصير يمكنك أن تكتب 30% أو أكثر أو أقل.

شفرة المصدر :

 

النتيجة:

الخط الفاصل ملون وعرضه 50% بمحاذاة الوسط:


خط فاصل، طوله في عرض الصفحة ( 50% )، يعمل على الفصل بين الفقرات أو يوضع تحت العناوين داخل المقالة بمحاذاة الوسط

CSS

الخط الفاصل HR  بطول 50% بمحاذاة اليمين


بعد أن أصبح طول الخط هو نصف عرض الصفحة يمكننا أن نجعله على اليمين أو اليسار، ولتحقيق ذلك ننزل إلى العلامة HR في الشفيرة أدناه  ونجعلها في حالة محاذاة اليمين هكذا:

 

شفرة المصدر :

 

النتيجة:

الخط الفاصل ملون وعرضه 50% بمحاذاة اليمين:


 
خط فاصل، طوله في عرض الصفحة ( 50% )، يعمل على الفصل بين الفقرات أو يوضع تحت العناوين داخل المقالة بمحاذاة اليمين .

CSS

الخط الفاصل HR  بطول 50% بمحاذاة اليسار


 

لجعل الخط الفاصل HR  جهة اليسار ، ننزل إلى العلامة HR في الشفيرة أدناه  ونجعلها في حالة محاذاة اليسار هكذا:

شفرة المصدر :

 

النتيجة:

الخط الفاصل ملون وعرضه 50% بمحاذاة اليسار :


خط فاصل، طوله في عرض الصفحة ( 50% )، يعمل على الفصل بين الفقرات أو يوضع تحت العناوين داخل المقالة بمحاذاة اليسار .

CSS

تغيير سمك الخط hr ولونه 


 

لزيادة سمك خط hr ، يكفي أن نرفع قيمة خاصية height ، ولتغيير لونه، يكفي أن نغير كود اللون لخاصية background-color شاهد المثال:

 

النتيجة:

الخط الفاصل hr بعد تغيير سمكه ولونه  :


خط فاصل، طوله في عرض الصفحة ( 80% )، سمكه height: 10px .

يمكنكم دائماً العودة إلى قائمة دروس HTML و CSS

ولاستخدام نفس الطريقة في مقالات ووردبريس يمكنك الاطلاع على هذه المقالة:

في أمان الله


 

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

 

شَـاركِ الْمَوْضُوع:
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك تعليقاً

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

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 457 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

28 عدد المشاهدات لهذا المحتوى
Scroll to Top