إعدادات الحواف للعناصر في cssc_css
من أهم الخصائص المحددة للعنصر هي الحواف.
فإدا تم تعريفها أو تلوينها سنرى بوضوح الحد الفاصل بينها و بين محيطها . خصوصا إدا كان العنصر بدون خلفية
في هدا الدرس شرح كامل لإعدادات و خصائص الحواف border في الأنماط الإنسيابية css
الإستخدام المختصر للخاصية border كالتالي
معنى هدا أن الحواف ستكون بسمك 5 بكسل و نمط متصل و دات لون أسود
نتيجة
ملاحظة هامة قبل المتابعة:
سمك الحواف سينضاف إفتراضيا إلى أبعاد العنصر و بالتالي قد تحصل على أبعاد أكبر من الحد المطلوب
في مثالنا السابق إنضافت 5 بكسل إلى كل جانب من العنصر أي بزيادة 10 بكسل لكل من العرض و الإرتفاع
لتجنب دلك يمكن إستخدام خاصية box-sizing كالتالي
هدا سيحافظ على حجم العنصر إلى الحجم الأصلي
مقارنة:
لدا أقترح عليك إستخدام خاصية box-sizing لجميع العناصر كالتالي
المعطيات في الخاصية border قد تكون واظحة جدا بإستتناء القيمة solid
هده القيمة هي اللتي تعطي النمط المتصل للحافة
في ما يلي الأنماط الممكن إستخدامها للحواف في css3
تتفرع عن الخاصية border عدة خصائص فرعية تمكن من التحكم بكل قيمة في الخاصية الأم على حدا .
كما توجد خصائص أخرى للتحكم بكل حافة على حدا
الجدول التالي يقربك من المقصود
لنأخد مثالا من الجدول أعلاه
الخاصية border-style تتحكم بنمط جميع الحواف و يمكن إستخدامها بطريقتين
في المثال الأول ( 1 ) يتم إعطاء نمط موحد لجميع الحواف
بينما في المثال التاني ( 2 ) يتم إعطاء نمط محدد لكل حافة على حدى
الترتيب دوما يبدأ من الأعلى و تليه باقي الحواف بترتيب في إتجاه عقارب الساعة
هدا في ما يخص النمط و يمكن إستخدام باقي الخاصيات بنفس الشكل
أمثلة
السمك
اللون
الخاصية border-image
بالإضافة لكل ما سبق تأتي خاصية border-image لإستخدام صورة كإطار / حافة للعنصر
إنتهى الدرس
aa-- --bb
jjjjjjjjjjjjj
فإدا تم تعريفها أو تلوينها سنرى بوضوح الحد الفاصل بينها و بين محيطها . خصوصا إدا كان العنصر بدون خلفية
في هدا الدرس شرح كامل لإعدادات و خصائص الحواف border في الأنماط الإنسيابية css
من أهم الخصائص المحددة للعنصر هي الحواف.
فإدا تم تعريفها أو تلوينها سنرى بوضوح الحد الفاصل بينها و بين محيطها . خصوصا إدا كان العنصر بدون خلفية
في هدا الدرس شرح كامل لإعدادات و خصائص الحواف border في الأنماط الإنسيابية css
الإستخدام المختصر للخاصية border كالتالي
border: 5px solid #000;
معنى هدا أن الحواف ستكون بسمك 5 بكسل و نمط متصل و دات لون أسود
نتيجة
ملاحظة هامة قبل المتابعة:
سمك الحواف سينضاف إفتراضيا إلى أبعاد العنصر و بالتالي قد تحصل على أبعاد أكبر من الحد المطلوب
في مثالنا السابق إنضافت 5 بكسل إلى كل جانب من العنصر أي بزيادة 10 بكسل لكل من العرض و الإرتفاع
لتجنب دلك يمكن إستخدام خاصية box-sizing كالتالي
box-sizing: border-box;
هدا سيحافظ على حجم العنصر إلى الحجم الأصلي
مقارنة:
لدا أقترح عليك إستخدام خاصية box-sizing لجميع العناصر كالتالي
*{
box-sizing: border-box;
}
المعطيات في الخاصية border قد تكون واظحة جدا بإستتناء القيمة solid
هده القيمة هي اللتي تعطي النمط المتصل للحافة
إدا قمنا بإستبدالها بــ dashed سنحصل على النمط المتقطع كالتالي
في ما يلي الأنماط الممكن إستخدامها للحواف في css3
تتفرع عن الخاصية border عدة خصائص فرعية تمكن من التحكم بكل قيمة في الخاصية الأم على حدا .
كما توجد خصائص أخرى للتحكم بكل حافة على حدا
الجدول التالي يقربك من المقصود
لنأخد مثالا من الجدول أعلاه
الخاصية border-style تتحكم بنمط جميع الحواف و يمكن إستخدامها بطريقتين
// Example 1
border-style:solid;
// Example 2
border-style:solid dotted dashed double;
في المثال الأول ( 1 ) يتم إعطاء نمط موحد لجميع الحواف
بينما في المثال التاني ( 2 ) يتم إعطاء نمط محدد لكل حافة على حدى
الترتيب دوما يبدأ من الأعلى و تليه باقي الحواف بترتيب في إتجاه عقارب الساعة
هدا في ما يخص النمط و يمكن إستخدام باقي الخاصيات بنفس الشكل
أمثلة
السمك
اللون
الخاصية border-image
بالإضافة لكل ما سبق تأتي خاصية border-image لإستخدام صورة كإطار / حافة للعنصر
مثال
border: 5px solid;
border-image: url(img.jpg) 1 round;
الصورة المستخدمة كإطار
النتيجة
إنتهى الدرس