خطوط أفقية

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

ولكن يمكنك أيضًا إنشاء خطوط مخصصة لتلائم صفحة الويب الخاصة بك ولإتقان المساحة التي تتلاعب بها في صفحتك.

مع ذلك ، دعنا نلقي نظرة فاحصة على كيفية تخصيص الخطوط الأفقية داخل صفحات HTML الخاصة بك.

الخط الأفقي هو عنصر HTML يُستخدم كزخرفة لصفحة الويب الخاصة بك. ومع ذلك ، يمكن أن يكون مفيدًا أيضًا لمجموعة من الأغراض الأخرى ، مثل:

- فاصل يقسم بصريًا أجزاء مختلفة من المحتوى الخاص بك ويضع تأكيدًا حيث تنتهي فكرة وتبدأ أخرى.

- أداة تمييز تركز على بعض الأقسام المهمة لصفحة الويب.

- يعتبر الخط الأفقي من أكثر الطرق شيوعًا وأسهلها لتحقيق مجموعة واسعة من الأغراض على موقع الويب. على الرغم من أنه قد يبدو بسيطًا للوهلة الأولى ، إلا أنه عنصر متعدد الوظائف يمكنك تعديله بناءً على متطلباتك الخاصة. باستخدام تعديلات بسيطة على كود HTML لصفحة الويب الخاصة بك ، يمكنك ضبط المواصفات التالية للخط الأفقي:

طول؛

عرض؛

اللون؛

محاذاة.

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

تعتبر الخطوط الأفقية مفيدة جدًا في فصل صفحتك إلى أقسام مختلفة ، لإضافة خط أفقي بسيط فقط اكتب <hr> ، وستحصل على هذا:

---

كيفية إنشاء خط أفقي

يمكنك تعيين خط باستخدام علامة بسيطة <hr>. إنه اختصار لـ "Horizontal Rule" ويضع المعلمات الخارجية الكلاسيكية. الشيء الذي يميزه عن غيره هو أنه لا يحتاج إلى علامة نهاية ويمكن أن يوجد بمفرده. يمكنك تغيير الخصائص الخارجية لعنصر باستخدام قيم إضافية في العلامة:

تبدو هكذا. على سبيل المثال ، إذا أردنا أن يبلغ طوله 100 بكسل ، فسنضع علامة مثل هذا: hr width = "100.

محاذاة.

يمكنك محاذاة الخط على الحواف اليمنى أو اليسرى ، وكذلك في الوسط. هذه الميزة صالحة فقط إذا كنت قد حددت بالفعل معلمة العرض حيث لا يمكن محاذاة سطر صفحة كاملة. للمحاذاة ، عيّن سمة إضافية في علامة "المحاذاة" وأضف اتجاهًا إليها: الوسط - للوسط ، لليسار - لليسار واليمين - للمحاذاة اليمنى.

ستبدو العلامة النهائية ، في هذه الحالة ، على النحو التالي: إذا احتجنا إلى ضبط المحاذاة المركزية لخط أفقي بطول 150 بكسل ، فستبدو العلامة النهائية على النحو التالي: hr align = "center" width = " 150 بوصة.

لاحظ أن "المحاذاة" ، مقياس المحاذاة ، يتم وضعها في الموضع 1 ، على الرغم من أن السمة تعتمد على عرض قياس الطول.

عرض.

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

وبالتالي ، إذا احتجنا إلى إنشاء خط بعرض 15 بكسل ، فنحن بحاجة إلى إنشاء العلامة التالية: hr size = "15".

اللون.

يتم تعيينه أيضًا كمؤشر مستقل. لتغييره ، استخدم سمة اللون جنبًا إلى جنب مع اسم اللون في شكل رمز أو باللغة الإنجليزية. يشار إلى اللون في علامات الاقتباس بعد الرمز "=".

وبالتالي ، يمكن كتابة علامة الخط الأبيض القياسي بطريقتين: hr color = "#FFFFFF" أو hr color = "white"

يمكن إنشاء اللون الأسود باستخدام الرمز # 000000.

كيف تصنع خط أفقي ملون؟

تعتبر الأسطر الأفقية جيدة لفصل كتلة نصية عن أخرى. يجذب النص الصغير ذو الخطوط الأفقية في الأعلى والأسفل انتباه القارئ أكثر من النص العادي.

باستخدام العلامة <hr> ، يمكنك رسم خط أفقي ، يعتمد مظهره على السمات المستخدمة ، بالإضافة إلى المتصفح. تشير العلامة إلى عناصر الحظر ، لذلك يبدأ السطر دائمًا في سطر جديد ، وبعد ذلك ، يتم عرض جميع العناصر في السطر التالي. بفضل الخصائص العديدة للعلامة <hr> ، يسهل التعامل مع الخط الذي تم إنشاؤه من خلال هذه العلامة. إلى جانب قوة الأنماط ، فإن إضافة خط إلى المستند الخاص بك أمر سهل للغاية.

بشكل افتراضي ، يتم عرض الخط باللون الرمادي وبتأثير الصوت. لا يتناسب هذا النوع من الخطوط دائمًا مع تصميم الموقع ، لذا فإن رغبة المطورين في تغيير اللون والمعلمات الأخرى للخط من خلال الأنماط أمر مفهوم. ومع ذلك ، فإن المتصفحات غامضة بشأن هذه المشكلة ، ولهذا السبب سيتعين عليك استخدام العديد من خصائص النمط في وقت واحد. على وجه الخصوص ، تستخدم الإصدارات القديمة من Internet Explorer خاصية اللون للون الخط ، بينما تستخدم المتصفحات الأخرى لون الخلفية. لكن هذا ليس كل شيء ، في هذه الحالة ، تأكد من تحديد سمك الخط (خاصية الارتفاع) بخلاف الصفر وإزالة الحد حول الخط عن طريق تعيين خاصية الحد إلى لا شيء. من خلال وضع جميع الخصائص معًا لمحدد hr ، نحصل على حل شامل للمتصفحات الشائعة.

<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> لون الخط الأفقي </ title> <style> hr {border: none؛ / * إزالة الحدود * / لون الخلفية: أحمر ؛ / * لون الخط * / اللون: أحمر ؛ / * لون الخط لـ IE6-7 * / الارتفاع: 2 بكسل ؛ / * عرض الخط * /} </ style> </ head> <body> <hr> <p> سلسلة نصية </ p> <hr> </ body> </ html>

أمثلة:

هذه:

<hr color = "# c7c34c" size = "2" width = "50٪">

يعطي هذا:

---

اللون: لون الخط:

<hr color = "# c7c34c" size = "2" width = "50٪">

الحجم: ارتفاع الخط معبراً عنه بالبكسل:

<hr size = "x">

العرض: يتم التعبير عن عرض الخط إما بالنسبة المئوية (٪) أو بالبكسل (في المثال الخاص بي هو 50٪ من الحجم الأصلي):

<hr width = "x٪"> أو <hr width = "x">

أكثر تطورا:

هذه:

<hr width = "400" color = "# 000000" size = "4">

يعطي:

---

في هذه الحالة استخدمنا النمط:

عرض الحدود 3 بكسل (3 بكسل)

منقط

اللون الأساسي أسود: # 000000

النقاط الملونة باللون الأزرق: # 0099CC

مثال أخير لشرح المزيد ، إذا لزم الأمر ؛):

هذه

<hr width = "400" color = "# FFFFFF" size = "6">

يعطي:

---

في هذه الحالة أعلاه:

عرض الحدود 2 بكسل (2 بكسل)

إنه متقطع

اللون الأساسي أبيض: #FFFFFF

شرطات ملونة بالفضة: # C0C0C0

الأنماط الممكنة هي:

-منقط

- متقطع

-صلب

-مزدوج

-أخدود

-عودة

-أقحم

-ريدج

هذا كل ما يجب أن أقوله عن الخطوط الأفقية!