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

إنشاء الحدود في 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 بيكسل تحيط بالعناوين الرئيسية أو الأسماء ، فإننا نكتب ما يلي:

 

والنتيجة:

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

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

إنشاء الحدود في CSSهاته الأنماط بعرض الحدود 3 بيكسل

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

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


 

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

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

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

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


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

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

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

 

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

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

 

 

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


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

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

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

 

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

اترك تعليقاً

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

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

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