CSS Borders
-
في هذه الخاصية يتم التحكم بالحواف (border) الخاص ب element بحيث يمكن التحكم العرض width، اللون color ، النمط style
تمام خلونا نعمل امثلة عملية حتى نفهم الموضوع بشكل أفضل:
نبدأ بإنشاء ملف HTML باسم Borderوبعدها نضيف الكود التالي:
<!DOCTYPE html>
<html>
<body><p style="border-style:solid; border-color: red;"> Borders تطبيق </p><p style="border-style:dotted; border-color: gray;"> Borders تطبيق </p><p style="border-style:double; border-color: green;"> Borders تطبيق </p><p style="border-style:solid; border-width: 1px; border-radius: 6px; border-color: burlywood;"> Borders تطبيق </p></body>
</html>
شغل الصفحة ونشوف النتيجة (الصورة)
تمام في هذا المثال طبقنا امثلة على تغيير Border الخاص ب <P> element .
وللتذكير استخدمنا Inline CSS
طيب نوخذ فكره سريعة عن الكود:
طبقنا الأكود التالية على <p>:
⦁ border-style:solid : والتي هي مسؤولة عن تحديد شكل الاطار
⦁ border-color: green: والتي هي مسؤولة عن تحديد لون الاطار
⦁ border-width: 1px;: والي هي مسؤولة عن تحديد حجم الاطار.
⦁ border-radius: 6px : والي هي مسؤولة عن عمل rounded للاطار.
تمام بشكل عام للتعامل مع Border في CSS تكتب بالطريقة
Border-<PropertyType>:<Value>
الان نتعرف border-style بالتفصيل
مثل ما حكينا border-style هي المسؤولة عن تحديد شكل عرض الاطار Border
ومن خلال هذه الخاصية يمكن تحديد مجموعة من الاشكال هي:
⦁ dotted : عرض الاطار بشكل نقط dotted
⦁ dashed عرض الاطار بشكل متقطع dashed
⦁ solid عرض الاطار بشكل متصل solid
⦁ double عرض الاطار بشكل مزدوج
⦁ Groove: عرض الاطار بشكل مجوف ثلاثي الأبعاد. التأثير يعتمد على قيمة لون الاطار
⦁ ridge : عرض الاطار بشكل مموج ثلاثي الأبعاد. التأثير يعتمد على قيمة لون الاطار
⦁ inset : عرض الاطار بشكل داخلي ثلاثي الأبعاد. التأثير يعتمد على قيمة لون الاطار
⦁ outset :عرض الاطار بشكل خارجي ثلاثي الأبعاد. التأثير يعتمد على قيمة لون الاطار
⦁ none : لن يتم تطبيق أي شيء على الاطار no border
⦁ hidden:إخفاء الاطار
تمام نشوف المثال التالي : قمنا بتطبيق جميع هذه الخصائص
في الملف السابق الي عملناه Border.html نتعدل الكود الى:
<!DOCTYPE html>
<html>
<body><p style="border-style:dotted ; border-color: gray;"> Borders dotted تطبيق </p><p style="border-style:dashed ; border-color: gray;"> Borders dashed تطبيق </p><p style="border-style:solid ; border-color: gray;"> Borders solid تطبيق </p><p style="border-style:double ; border-color: gray;"> Borders double تطبيق </p><p style="border-style:groove ; border-color: gray;"> Borders groove تطبيق </p><p style="border-style:ridge ; border-color: gray;"> Borders ridge تطبيق </p><p style="border-style:inset ; border-color: gray;"> Borders inset تطبيق </p><p style="border-style:outset ; border-color: gray;"> Borders outset تطبيق </p><p style="border-style:none ; border-color: gray;"> Borders none تطبيق </p><p style="border-style:hidden ; border-color: gray;"> Borders hidden تطبيق </p><p style="border-style:dotted dashed solid double;; border-color: gray;"> Borders mix تطبيق </p><p style="border-style:dotted; border-color: gray;"> Borders تطبيق </p><p style="border-style:double; border-color: green;"> Borders تطبيق </p><p style="border-style:solid; border-width: 1px; border-radius: 6px; border-color: burlywood;"> Borders تطبيق </p></body>
</html>
شغل الصفحة وشوف النتيجة (اكيد بتكون بشكل الصورة)
اترك تعليقك