السلام عليكم، سنرى في هذا الدرس خواص الحواف BORDER-STYLE، BORDER-WIDTH و BORDER-COLOR، بالإضافة إلى خواص إنشاء و تعديل الحواف المنفردة، و سنرى أيضاً الخاصية BORDER-RADIUS و الخاصية BOX-SHADOW.
الخاصية BORDER-STYLE
الخاصية 'BORDER-STYLE' هي الخاصية المسؤولة عن إنشاء الحواف و تحديد نوعها.
قيم الخاصية BORDER-STYLE
لدى الخاصية 'BORDER-STYLE' عشر قيم و هم :
• SOLID : قيمة تنشئ حواف على شكل خط مستقيم في كل حافة.
• DASHED : قيمة تنشئ حواف على شكل خط متقطع في كل حافة.
• DOTTED : قيمة تنشئ حواف على شكل نقاط مستقيمة في كل حافة.
• DOUBLE : قيمة تنشئ حواف على شكل خطين مستقيمين متوازيين في كل حافة.
• GROOVE : قيمة تنشئ حواف على شكل خطين مختلفين في كل حافة، حيث يوجد خط داخلي و خط خارجي، و يتعاكسان في الجهة الأخرى من قطر الحواف.
• RIDGE : قيمة تنشئ حواف على عكس شكل القيمة 'GROOVE'
• INSET : قيمة تنشئ حواف تظهر مقعَّرة في الإنطباع الثلاثي الأبعاد.
• OUTSET : قيمة تنشئ حواف تظهر محذَّبة في الإنطباع الثلاثي الأبعاد.
• HIDDEN : قيمة تخفي الحواف.
• NONE : قيمة تحذف الحواف.
تعدد القيم في الخاصية BORDER-STYLE
يمكن إقحام في قيمة الخاصية 'BORDER-STYLE' قيمة واحدة، أو قيمتين، أو ثلاث قيم، أو أربع قيم.
- نموذج قيمة واحدة في الخاصية 'BORDER-STYLE' : بإقحام قيمة واحدة ستنشأ الحواف الأربعة بنفس الشكل.
- نموذج قيمتان في الخاصية 'BORDER-STYLE' : القيمة التي في اليسار هي المسؤولة عن إنشاء الحافتين العليا و السفلى، أما القيمة التي في اليمين فهي المسؤولة عن إنشاء الحافتين اليمنى و اليسرى.
- نموذج ثلاث قيم في الخاصية 'BORDER-STYLE' : القيمة الأولى هي المسؤولة عن إنشاء الحافة العليا، القيمة الوسطى هي المسؤولة عن إنشاء الحافتين اليمنى و اليسرى، أما القيمة الثالثة فهي المسؤولة عن إنشاء الحافة السفلى.
- نموذج أربع قيم في الخاصية 'BORDER-STYLE' : القيمة الأولى هي المسؤولة عن إنشاء الحافة العليا، القيمة الثانية هي المسؤولة عن إنشاء الحافة اليمنى، القيمة الثالثة هي المسؤولة عن إنشاء الحافة السفلى، أما القيمة الرابعة فهي المسؤولة عن إنشاء الحافة اليسرى.
خواص إنشاء الحواف المنفردة
الحواف المنفردة هم الحافة العليا، الحافة اليمنى، الحافة السفلى و الحافة اليسرى، و يتم إنشاء كل حافة منفردة بخاصية مخصصة و هم :
• BORDER-TOP-STYLE : هي الخاصية المسؤولة عن إنشاء الحافة المنفردة العليا.
• BORDER-RIGHT-STYLE : هي الخاصية المسؤولة عن إنشاء الحافة المنفردة اليمنى.
• BORDER-BOTTOM-STYLE : هي الخاصية المسؤولة عن إنشاء الحافة المنفردة السفلى.
• BORDER-LEFT-STYLE : هي الخاصية المسؤولة عن إنشاء الحافة المنفردة اليسرى.
يمكن إقحام بعض أو جميع خواص إنشاء الحواف المنفردة في نفس الكود CSS.
الخاصية BORDER-WIDTH
الخاصية 'BORDER-WIDTH' هي الخاصية المسؤولة عن التعديل على سمك الحواف، و لا تطبق إلا بوجود الخاصية 'BORDER-STYLE'.
قيم الخاصية BORDER-WIDTH
لدى الخاصية 'BORDER-WIDTH' ثلاث قيم خاصة زيادة عن القيم المطلقة و القيم النسبية و هم :
• THIN : قيمة تُظهر الحواف رقيقة السمك.
• MEDIUM : قيمة تُظهر الحواف متوسطة السمك.
• THICK : قيمة تُظهر الحواف غليضة السمك.
• القيم المطلقة : تقبل الخاصية 'BORDER-WIDTH' جميع القيم المطلقة.
• القيم النسبية : تقبل الخاصية 'BORDER-WIDTH' جميع القيم النسبية.
تعدد القيم في الخاصية BORDER-WIDTH
يمكن إقحام في قيمة الخاصية 'BORDER-WIDTH' قيمة واحدة، أو قيمتين، أو ثلاث قيم، أو أربع قيم.
- نموذج قيمة واحدة في الخاصية 'BORDER-WIDTH' : بإقحام قيمة واحدة سيتم التعديل على سمك الحواف الأربعة.
- نموذج قيمتان في الخاصية 'BORDER-WIDTH' : القيمة التي في اليسار هي المسؤولة عن تعديل سمك الحافتين العليا و السفلى، أما القيمة التي في اليمين فهي المسؤولة عن تعديل سمك الحافتين اليمنى و اليسرى.
- نموذج ثلاث قيم في الخاصية 'BORDER-WIDTH' : القيمة الأولى هي المسؤولة عن تعديل سمك الحافة العليا، القيمة الوسطى هي المسؤولة عن تعديل سمك الحافتين اليمنى و اليسرى، أما القيمة الثالثة فهي المسؤولة عن تعديل سمك الحافة السفلى.
- نموذج أربع قيم في الخاصية 'BORDER-WIDTH' : القيمة الأولى هي المسؤولة عن تعديل سمك الحافة العليا، القيمة الثانية هي المسؤولة عن تعديل سمك الحافة اليمنى، القيمة الثالثة هي المسؤولة عن تعديل سمك الحافة السفلى، أما القيمة الرابعة فهي المسؤولة عن تعديل سمك الحافة اليسرى.
خواص تعديل سمك الحواف المنفردة
يتم التعديل على سمك كل حافة منفردة بخاصية مخصصة علماً أن هذه الأخيرة لا تطبّق إلا بوجود خاصية إنشاء الحواف أو خاصية إنشاء الحواف المنفردة، و هم :
• BORDER-TOP-WIDTH : هي الخاصية المسؤولة عن تعديل سمك الحافة المنفردة العليا.
• BORDER-RIGHT-WIDTH : هي الخاصية المسؤولة عن تعديل سمك الحافة المنفردة اليمنى.
• BORDER-BOTTOM-WIDTH : هي الخاصية المسؤولة عن تعديل سمك الحافة المنفردة السفلى.
• BORDER-LEFT-WIDTH : هي الخاصية المسؤولة عن تعديل سمك الحافة المنفردة اليسرى.
يمكن إقحام بعض أو جميع خواص تعديل سمك الحواف المنفردة في نفس الكود CSS.
الخاصية BORDER-COLOR
الخاصية 'BORDER-COLOR' هي الخاصية المسؤولة عن التعديل على لون الحواف، و لا تطبق إلا بوجود الخاصية 'BORDER-STYLE'.
قيم الخاصية BORDER-COLOR
تقبل الخاصية 'BORDER-COLOR' جميع قيم الألوان (يمكنكم تفقد قيم الألوان في الدرس 15 من هذه الدورة و هو درس الألوان و الشفافية في CSS) و هم القيم بإسم اللون، القيم بالـ Hexadecimal، القيم بالـ RGB و القيم بالـ RGBa.
تعدد القيم في الخاصية BORDER-COLOR
يمكن إقحام في قيمة الخاصية 'BORDER-COLOR' قيمة واحدة، أو قيمتين، أو ثلاث قيم، أو أربع قيم.
- نموذج قيمة واحدة في الخاصية 'BORDER-COLOR' : بإقحام قيمة واحدة سيتم التعديل على لون الحواف الأربعة.
- نموذج قيمتان في الخاصية 'BORDER-COLOR' : القيمة التي في اليسار هي المسؤولة عن التعديل على لون الحافتين العليا و السفلى، أما القيمة التي في اليمين فهي المسؤولة عن التعديل على لون الحافتين اليمنى و اليسرى.
- نموذج ثلاث قيم في الخاصية 'BORDER-COLOR' : القيمة الأولى هي المسؤولة عن التعديل على لون الحافة العليا، القيمة الوسطى هي المسؤولة عن التعديل على لون الحافتين اليمنى و اليسرى، أما القيمة الثالثة فهي المسؤولة عن التعديل على لون الحافة السفلى.
- نموذج أربع قيم في الخاصية 'BORDER-COLOR' : القيمة الأولى هي المسؤولة عن التعديل على لون الحافة العليا، القيمة الثانية هي المسؤولة عن التعديل على لون الحافة اليمنى، القيمة الثالثة هي المسؤولة عن التعديل على لون الحافة السفلى، أما القيمة الرابعة فهي المسؤولة عن التعديل على لون الحافة اليسرى.
خواص التعديل على لون الحواف المنفردة
يتم التعديل على لون كل حافة منفردة بخاصية مخصصة علماً أن هذه الأخيرة لا تطبّق إلا بوجود خاصية إنشاء الحواف أو خاصية إنشاء الحواف المنفردة، و هم :
• BORDER-TOP-COLOR : هي الخاصية المسؤولة عن التعديل على لون الحافة المنفردة العليا.
• BORDER-RIGHT-COLOR : هي الخاصية المسؤولة عن التعديل على لون الحافة المنفردة اليمنى.
• BORDER-BOTTOM-COLOR : هي الخاصية المسؤولة عن التعديل على لون الحافة المنفردة السفلى.
• BORDER-LEFT-COLOR : هي الخاصية المسؤولة عن التعديل على لون الحافة المنفردة اليسرى.
يمكن إقحام بعض أو جميع خواص التعديل على لون الحواف المنفردة في نفس الكود CSS.
الفيديو التوضيحي للدرس
الخاصية BORDER
يمكن جمع الخواص 'BORDER-WIDTH'، 'BORDER-STYLE' و 'BORDER-COLOR' في خاصية واحدة تسمى 'BORDER'، و تكتب في قيمتها كالآتي : Vb-w Vb-s Vb-c
* Vb-w هي قيمة الخاصية 'BORDER-WIDTH'.
* Vb-s هي قيمة الخاصية 'BORDER-STYLE'.
* Vb-c هي قيمة الخاصية 'BORDER-COLOR'.
هذا ما يسمى بتقنية Shorthand في CSS، و يمكن تطبيق هذه التقنية أيضا في خواص الحواف المنفردة، و ذلك بـ :
• BORDER-TOP : هي Shorthand Property للحافة العليا.
• BORDER-RIGHT : هي Shorthand Property للحافة اليمنى.
• BORDER-BOTTOM : هي Shorthand Property للحافة السفلى.
• BORDER-LEFT : هي Shorthand Property للحافة اليسرى.
الخاصية BORDER-RADIUS
الخاصية 'BORDER-RADIUS' هي الخاصية المسؤولة عن التعديل على وتر تقوس الأحرف علماً أن الحرف هو نقطة إلتقاء حافة مع حافة أخرى، و لا تطبق الخاصية 'BORDER-RADIUS' إلا بوجود الخاصية 'BORDER-STYLE' أو الخاصية 'BORDER'، و تقبل من القيم جميع القيم المطلقة و جميع القيم النسبية، و يمكن إقحام في قيمتها قيمة واحدة، أو قيمتين، أو ثلاث قيم، أو أربع قيم.
- نموذج قيمة واحدة في الخاصية 'BORDER-RADIUS' : بإقحام قيمة واحدة سيتم التعديل على وتر تقوس الأحرف الأربعة.
- نموذج قيمتان في الخاصية 'BORDER-RADIUS' : القيمة التي في اليسار هي المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أعلى اليسار و الحرف الموجود في أسفل اليمين، أما القيمة التي في اليمين فهي المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أعلى اليمين و الحرف الموجود في أسفل اليسار.
- نموذج ثلاث قيم في الخاصية 'BORDER-RADIUS' : القيمة الأولى هي المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أعلى اليسار، القيمة الوسطى هي المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أعلى اليمين و الحرف الموجود في أسفل اليسار، أما القيمة الثالثة فهي المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أسفل اليمين.
- نموذج أربع قيم في الخاصية 'BORDER-RADIUS' : القيمة الأولى هي المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أعلى اليسار، القيمة الثانية هي المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أعلى اليمين، القيمة الثالثة هي المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أسفل اليمين، أما القيمة الرابعة فهي المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أسفل اليسار.
خواص التعديل على وتر تقوس الأحرف المنفردة
الأحرف المنفردة هم الحرف الموجود في أعلى اليسار، الحرف الموجود في أعلى اليمين، الحرف الموجود في أسفل اليمين و الحرف الموجود في أسفل اليسار، و يتم التعديل على وتر تقوس كل حرف منفرد بخاصية مخصصة علماً أن هذه الأخيرة لا تطبّق إلا بوجود الخاصية 'BORDER-STYLE' أو الخاصية 'BORDER'، و هم :
• BORDER-TOP-LEFT-RADIUS : هي الخاصية المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أعلى اليسار.
• BORDER-TOP-RIGHT-RADIUS : هي الخاصية المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أعلى اليمين.
• BORDER-BOTTOM-RIGHT-RADIUS : هي الخاصية المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أسفل اليمين.
• BORDER-BOTTOM-LEFT-RADIUS : هي الخاصية المسؤولة عن التعديل على وتر تقوس الحرف الموجود في أسفل اليسار.
يمكن إقحام بعض أو جميع خواص التعديل على وتر تقوس الأحرف المنفردة في نفس الكود CSS.
الخاصية BOX-SHADOW
الخاصية 'BOX-SHADOW' هي خاصية تمنح ظل لأغلب العناصر HTML كالصور و الفيديوهات و الحواف و غيرها... و تقبل قيمتين خاصتين و قيمتين شاملتين.
القيم الخاصة للخاصية BOX-SHADOW
• القيمة الخاصة المركبة : تكون القيمة الخاصة المركبة للخاصية BOX-SHADOW كالتالي : Nx Ny Nb Np Nc
Nx هي القيمة المسؤولة عن تغيير الإزاحة الأفقية للظل، و تصنف إجبارية في القيمة، و تكون عبارة عن قيمة مطلقة أو قيمة نسبية، و كلما كبرت قيمتها في الموجب أزيح الظل يميناً أكثر، و كلما كبرت قيمتها في السالب أزيح الظل يساراً أكثر.
Ny هي القيمة المسؤولة عن تغيير الإزاحة العمودية للظل، و تصنف إجبارية في القيمة، و تكون عبارة عن قيمة مطلقة أو قيمة نسبية، و كلما كبرت قيمتها في الموجب أزيح الظل إلى الأسفل أكثر، و كلما كبرت قيمتها في السالب أزيح الظل إلى الأعلى أكثر.
Nb هي القيمة المسؤولة عن تغيير كثافة التضبيب للظل، و هي اختيارية في القيمة، و تكون عبارة عن قيمة مطلقة أو قيمة نسبية.
Np هي القيمة المسؤولة عن تغيير الإنتشار الضبابي للظل، و هي اختيارية في القيمة، و تكون عبارة عن قيمة مطلقة أو قيمة نسبية، و كلما كبرت قيمتها في الموجب كان الظل منتشراً أكثر، و كلما كبرت قيمتها في السالب كان الظل متجمعاً أكثر.
Nc هي القيمة المسؤولة عن تغيير لون الظل، و هي اختيارية في القيمة، و تكون عبارة عن قيمة بإسم اللون، أو قيمة بالـ Hexadecimal، أو قيمة بالـ RGB، أو قيمة بالـ RGBa.
نماذج القيمة الخاصة المركبة للخاصية BOX-SHADOW
يمكن إنشاء عدة نمادج بالقيمة الخاصة المركبة للخاصية 'BOX-SHADOW' أذكر منها :
- نموذج ظل عادي : لإنشاء ظل عادي يجب إقحام سوى القيم الإجبارية.
- نموذج ظل مضبب : لإنشاء ظل مضبب يجب إضافة قيمة التضبيب الإختيارية.
- نموذج ظل مضبب منتشر : لإنشاء ظل مضبب منتشر يجب إضافة قيمتا التضبيب و الإنتشار الضبابي.
- نموذج ظل داخلى : لإنشاء ظل داخلي يجب إضافة الكلمة المفتاحية 'INSET' داخل القيمة.
- نموذج تعدد الضلال : لإنشاء العديد من الظلال في عنصر واحد يجب إقحام قيم كل ظل مفروقة بفاصلة عن قيم الظل الآخر في نفس قيمة الخاصية 'BOX-SHADOW'.
• NONE : هي القيمة التلقائية للخاصية، و تستعمل لحذف الظلال من العناصر.
القيم الشاملة للخاصية BOX-SHADOW
• INHERIT : قيمة تورِّث العناصر الستايل من العناصر المحتوية لها، و في حالة الخاصية 'BOX-SHADOW'، فالقيمة 'INHERIT' تورِّث للعناصر الظل من العناصر المحتوية لها.
• INITIAL : قيمة ترجع ستايل العناصر إلى القيمة التلقائية، و في حالة الخاصية 'BOX-SHADOW'، فالقيمة 'INITIAL' ترجع ستايل العناصر إلى القيمة التلقائية للخاصية التي هي 'NONE'، و بالتالي تحذف الظلال منها.
الأكواد المستعملة في الدرس
أتمنى أن تستفيدوا من الدرس