Ibrahem Smart
زيزوومى ذهبى
غير متصل
مرحبا إخوتي أعضاء منتديات زيزووم للأمن والحماية
اليوم سأشرح لكم في دورة تعلم لغة CSS
Borders
حواف العنصر
------------------------------------------------------------
نحن نعلم ان كل عنصر سواء (نص & صندوق & صورة...إلخ) له حدوده فسنتعلم اليوم خاصية لعمل اطار للعنصر بالحجم واللون الذي تختاره وفي المكن الذي تريد.
خاصية border تكتب مثل أي خاصية ونراها عادة بشكل مشابه للتالي مثلًا:
فسيظهر الاطار في المتصفح باللون والشكل والحجم الذي قمت بتحديده في الكود
معنى ذلك أن البوردر له ثلاث قيم تكتب بجانب بعضها على سطر واحد وهم بالترتيب عند الكتابة (الحجم ثم الشكل وفي النهاية لونه).
شرح مفصل لكتابة خاصية الاطار (Border)
نكتب أولًا عند بداية اي خاصية بأسمها border ثم نضع نقطتين : ونبدأ بالكتابة على سطر واحد.
أول القيم للاطار هو حجمه (ضخومته) يجب أن تحدد له حجمًا يظهر به كما تريد.
وثاني قيمة والتي تحتاج فهم جيد وهي نوع الاطار (شكله) فيوجد اطار كامل وعلى شكل نقط وعلى شكل شرطات وأنواع أخرى كثيرة.
وهذه كل أنواع الاطارات ومعناها في صورة يمكنك حفظها لديك للنظر فيها في أي وقت:
القيمة الأخيرة وهي (اللون) يمكنك كتابته أو لا فإن لم تكتبه يأخذ الإطار بنفسه اللون الأسود وإذا حددت اللون في قيم الإطار فسيظهر اللون الذي قمت باختياره وقد شرحنا سابقًا في الدورة الألوان وكيف تكتب.
ملحوظة بسيطة: بين كل قيمة والأخرى يجب أن تقوم بوضع مسافة واحدة.
هكذا تعلمنا كيف نكتب الخاصية ونكتب قيمها.
توجد أيضًا 4 خواص أخرى تابعة لخاصية border ويأخذون نفس قيمها لكن تقوم بتحديد مكان واحد يظهر فيه الأطار:
border-top: اطار في الأعلى.
border-bottom: اطار في الأسفل.
border-left: اطار في اليسار.
border-right: اطار في اليمين.
خلاصة الدرس
- لعمل إطار للعنصر يجب استخدام خاصية border.
- قيم خاصية border ثلاثة بالترتيب (الحجم ثم النوع ثم اللون).
- يوجد عدة أنواع (أشكال) للإطار ويوجد في الأعلى صورة توضحهم.
- بين كل قيمة والأخرى للأطار مسافة واحدة حتى لا تواجه أي مشاكل في قراءة المتصفح للأكواد.
- يوجد للإطار أربع إتجاهات.
