إنشاء الحدود في 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 بيكسل تحيط بالعناوين الرئيسية أو الأسماء ، فإننا نكتب ما يلي:
|
1 2 3 4 |
h1 { border: 3px red dotted; } |
والنتيجة:
و في ما يلي أنماط الحدود المختلفة التي يمكنك استخدامها حول الكتابة أو الصور أو أي عنصر:
هاته الأنماط بعرض الحدود 3 بيكسل
هاته الأنماط بعرض الحدود 10 بيكسل، ليظهر تأثرها هنا
جوانب الحدود: أعلى ، يمين ، يسار ، أسفل …
هل كنت تعلم أن CSS له هاته المميزات؟
مهما كان جوابك، لا بد أن أطرح عليك سؤالاً أخر!
هل تعلم أنه يمكنك أن تنشئ الحدود الأربعة بشكل مختلف عن بعضها البعض؟
ووواو ! شيئ لا يصدق ! كلا ، صدِّق! صدِّق! بواسطة CSS يمكنك وضع حدود مختلفة حسب الجانب المكون للحدود، يمين ، يسار أعلى أو أسفل ، يمكنك القيام بذلك دون مشكلة. فقط عليك أن تستخدم هذه الخصائص الأربعة:
- border-right: الحدود اليمنى.
- border-left: الحدود اليسرى.
- border-top: الحدود العلوية.
- border-bottom: الحدود السفلية.
إنشاء الحدود في CSS
هناك أيضًا خواص رائعة ،تعمل مثل border لكنها تطبق فقط على جانب واحد.
لإضافة حد واحد فقط إلى يسار أو يمين الفقرات ، يمكنك فعل ذلك بكتابة :
|
1 2 3 4 5 |
p { border-left: 2px solid black; border-right: 2px solid black; } |
استكمال درس الحدود من هنا:
قناتي على اليوتوب أرى أن هذه المواضيع قد تهمك: |
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل .. تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.