أحد الخصائص الأساسية في لغة CSS والذي يشكل جزء أساسي في بنية وتحديد عناصر الصفحة واعطاء أشكال كثيره هو الإطار border.
وهذا أحد الدروس المحورية بخصوص هذا العنصر الذي يلعب دور هام جداً في مظهر الصفحة.
ما هو الإطار border في لغة CSS ؟
هو الإطار المحيط بعنصر معين وهذا الإطار هو شئ بارز في التصميم ويتكون من حجم ومظهر ولون لهذا الإطار ويمكن اللاعب به بطرق كثيرة جداً لتغيير شكل العنصة أو ابرازه.
الخصائص الأساسية
.example {
border-width:4px;
border-style:solid;
border-color:red
}
السُمك [[border-width]]
وهو يعبر عن سماكة الإطار ويعتمد فيه على وحدة البيسكل px لأنها الأدق والأفضل في الإستخدام في مقاسات الإطار
المظهر [[border-style]]
وهو يعبر عن شكل الإطار
| المظهر | الوظيفة |
|---|---|
| solid | خط مستقيم بدون أى أشكال مختلفة |
| dotted | اطار مكون من نقاط |
| dashed | إطار مكون من خطوط متقطعة |
| double | إطار مزدوج |
| none | الغاء الإطار |
اللون [[border-color]]
وهو لون الإطار ويمكنك أن تستخدم أى نوع من صيغ الألوان فيه
النظام الرباعي
العناصر مكونة من أربعة جوانب للإطار ويمكنك أن تستخدم هذه الخصائص عبر الأربعة جوانب بالترتيب التالي من اليسار الى المين
أعلى [[top]]
يمين [[right]]
أسفل [[bottom]]
يسار [[left]]
مثال
.example {
border-width:8px 3px 5px 4px;
border-style:solid dotted dashed double;
border-color:red green #000 blue;
}
معنى الكود
أن سمك الإطار من الأعلى 8 ومن اليمين 3 ومن الأسفل 5 ومن اليسار 4
أن المظهر من الأعلى solid الخ
واللون من الأعلى أحمر الخ
صيغة مختصرة
الصيغة المتختصر تستخدمها ان كنت لا تريد تعيين سمك مختلف أو لون مختلف او مظهر مختلف لكل جانب من الإطار وهي الصيغة الشائعة لأنه نادراً ما نستخدم الصيغ الأخرى لان معظم الإطارات تكون كل جوانبها بشكل موحد.
والصيغة المتخصرة ترتيبها من اليسار الى اليمين هو : السمك - المظهر - اللون
.example {
border:2px solid red
}
وكذلك يمكنك أن تستخدم الصيغة المختصرة لجانب واحد فقط
مثال لو أردنا تعيين فقط لإطار السفلي والأيسر
.example {
border-bottom:2px solid red;
border-left:4px dashed blue
}
الإستدارة [[radius]]
وهذه الخاصية تعبر عن درجة استدارة الإطار وهي خاصية منفصلة عن باقي الخواص السابقة
مثال
.example {
border-radius:10px
}
ويسري عليها النظام الرباعي
.example {
border-radius:10px 4px 50% 3px
}
وفي هذه الخاصة يمكنك أن تستخدم النسبة المئوية وسنتخدم النسبة المئوية لعمل استدارة قوية كمظهر الدائرة مثلاً فنستخدم معها نسبة 50%
تعليقات