إنشاء الحدود في CSS

الحدود القياسية:

نظراً لأهمية الحدود في تزيين صفحات الويب، فإن CSS  وفَّـر لنا مجموعة كبيرة من الحدود بخصائص تساعدنا على تغيير مظهر و شكل تلك الحدود  كما سنرى في  هذا الدرس.

border-width , border-color , border-style

للوصول إلى ما هو مهم في هذا الدرس ، أقترح  أن تستخدم مباشرة خاصية  border الذي يجمع كل هذه الخصائص 😆

هل تتذكر خاصية background ؟ إنه يعمل على نفس المبدأ، ومن خلاله سنكون قادرين على الجمع بين عدة قيم.


 

بالنسبة لـ border يمكننا استخدام  ثلاث قيم والتي نستطيع بها تغيير  مظهر الحدود:

1- العرض ( largeur ): ليتم تحديد عرض الحدود، نضع القيمة بالبكسل (مثل 2 px).

2- اللون: هو لون الحدود. وفيها نستخدم ، إما اسم اللون ( green , red ، …) ،

أو قيمة الست عشرية  #FF00FF ، أو قيمة RGB بما يناسبها من قيم  (rgb (198 ، 212 ، 37.

 

3- نوع الحدود : هناك مجموعة من  الخيارات. قد تكون حدودك عبارة عن سطر واحد أو خطوط منقطة أو شرطات أو خط مزدوج ، إلخ…


القيم المتاحة  ل border-style


  • none : بلا حدود (افتراضي) ؛
  • solid : خط الحدود عادي عبارة عن خط .
  • dotted : حدود منقطة 
  • dashed : الحدود عبارة عن شرطات
  • double : الحدود المزدوجة ؛
  • groove : حدود نموذجية ثلاثية الأبعاد 3D والتأثير حسب قيمة لون الحدود border-color
  • ridge :  الحدود على شكل سلسلة ثلاثية الأبعاد 3D والتأثير حسب قيمة لون الحدود border-color
  •   inset : حدود متدرجة داخلية ثلاثية الأبعاد 3D والتأثير حسب قيمة لون الحدود border-color
  • outset :  حدود متدرجة خارجية ثلاثية الأبعاد 3D والتأثير حسب قيمة لون الحدود border-color

 

وهنا سنعطي مثال للتوضيح :

 للحصول على حدود حمراء ، منقطة ، بِسُمْك 3 بيكسل تحيط بالعناوين الرئيسية أو الأسماء ، فإننا نكتب ما يلي:

 

والنتيجة:

موقع jabism.com

و في ما يلي أنماط الحدود المختلفة التي يمكنك استخدامها حول الكتابة أو الصور أو أي عنصر:

هاته الأنماط بعرض الحدود 3 بيكسل

هاته الأنماط بعرض الحدود 10 بيكسل، ليظهر تأثرها هنا

جوانب الحدود: أعلى ، يمين ، يسار ، أسفل …


 

هل كنت تعلم أن CSS له هاته المميزات؟

مهما كان جوابك، لا بد أن أطرح عليك سؤالاً أخر!

هل تعلم أنه يمكنك أن تنشئ الحدود الأربعة بشكل مختلف عن بعضها البعض؟

ووواو ! شيئ لا يصدق ! كلا ، صدِّق! صدِّق! بواسطة CSS يمكنك وضع حدود مختلفة حسب الجانب  المكون للحدود،  يمين ، يسار أعلى أو أسفل ، يمكنك القيام بذلك دون مشكلة. فقط عليك أن تستخدم  هذه الخصائص الأربعة:


  • border-right: الحدود اليمنى.
  • border-left: الحدود اليسرى.
  • border-top: الحدود العلوية.
  • border-bottom: الحدود السفلية.

 

هناك أيضًا طرق مماثلة لتخصيص  تفاصيل حد من الحدود، إذا كنت تريد مثلاً : border-top-width هذا يقوم بتغيير سُمْك الحد العلوي ، و border-top-color مخصص للون الحد العلوي ، وهكذا…

 

هناك أيضًا خواص رائعة ،تعمل مثل border لكنها تطبق  فقط على جانب واحد.

لإضافة حد واحد فقط إلى يسار أو يمين الفقرات ، يمكنك فعل ذلك بكتابة :

 

 

يمكنك تحرير حدود لأي نوع من العناصر على الصفحة. لقد فعلناها هنا في الفقرات ولكن يمكننا أيضًا تعديل حدود الصور ، والنصوص المهمة مثلاً  ، إلخ.


استكمال درس الحدود من هنا:

اترك تعليقًا

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

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

عدد المشاهدات لهذه المقالة : 236